Comment lier la valeur à l'intérieur d'un filtre Pug.js

Question

Je cherche à lier une valeur à l'intérieur d'un filtre Pug.js. Mais ce filtre fonctionne bien la valeur ne lie pas.

sortie de résultat avec le filtre

<style>.#{cs_1}{font-family:monospace !important;color:#a1292c !important}.#{cs_1}:hover{background-color:transparent !important;text-decoration:underline !important}.#{cs_2}{position:absolute;font-size:11px;text-transform:none;left:80px;top:12px;border-left:1px solid #ccc;padding-left:6px}.#{cs_3}{white-space:nowrap}</style> 

Résultat de sortie sans le filtre

<style> 
    .eTWkI { 
     font-family: monospace !important; 
     color: #a1292c !important; 
    } 
    .eTWkI:hover { 
     background-color: transparent !important; 
     text-decoration: underline !important; 
    } 
    .Rzorr { 
     position: absolute; 
     font-size: 11px; 
     text-transform: none; 
     left: 80px; 
     top: 12px; 
     border-left: 1px solid #ccc; 
     padding-left: 6px; 
    } 
    .vMvwp { 
     white-space: nowrap; 
    } 
</style> 

code Pug.js

Non e: Ce filtre :minifycss fait avec uglifycss Module

- var length = 5 
- var chars = "ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz_-" 

- var cs_1 = utils.randomString(length, chars) 
- var cs_2 = utils.randomString(length, chars) 
- var cs_3 = utils.randomString(length, chars) 

style 
    :minifycss 
     .#{cs_1} { 
      font-family: monospace !important; 
      color: #a1292c !important; 
     } 
     .#{cs_1}:hover { 
      background-color: transparent !important; 
      text-decoration: underline !important; 
     } 
     .#{cs_2} { 
      position: absolute; 
      font-size: 11px; 
      text-transform: none; 
      left: 80px; 
      top: 12px; 
      border-left: 1px solid #ccc; 
      padding-left: 6px; 
     } 
     .#{cs_3} { 
      white-space: nowrap; 
     } 

Ainsi, le filtre ressemble:

require('pug').filters = { 

    minifycss: (text, options) => { 
     if (!text) return; 
     return uglifycss.processString(text, options); 
    } 

}; 

Answer 1

On dirait que les filtres Pug sont exécutés au moment de la compilation, et ne permettent pas contenu variable/dynamique. Voir this GitHub issue pour plus d'informations. Vous pouvez exporter la fonction minifycss que vous avez écrite, puis l'utiliser dans Jade (comme c'est le cas dans this related GitHub issue) pour que votre code de filtre fonctionne. Vous devez exporter la fonction require vers Pug (locals.require = require dans votre itinéraire), puis l'utiliser pour exiger la fonction minifycss d'ailleurs. Cependant, it also appears as though the above issue was fixed in Pug 2.0.0 beta11. Selon la version de Pug que vous utilisez, cela peut être la cause du problème.