How to bind value inside a Pug.js filter

Question

I'm tying to bind some value inside a Pug.js filter. But that filter works fine the value doesn't bind.

Output Result with the filter

<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>

Output Result without the Filter

<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>

Pug.js Code

Note: That :minifycss filter made with 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; 
        }

So the Filter looks like :

require('pug').filters = {

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

};

What is the actual output of the code? Is nothing there, or is it unexpected output? — Shea Hunter Belsky, Mar 22 '17 at 19:07
@SheaBelsky. No there is no errors. Just that Output result only — 0xdw, Mar 23 '17 at 01:30

score 2 · Answer 1 · answered Mar 23 '17 at 22:02

It looks like Pug filters are run at compile time, and don't allow for variable/dynamic content. See this GitHub issue for more info. You can export the minifycss function you've written, then require it within Jade (as is done in this related GitHub issue) in order to get your filter code to work. You'd need to export the require function to Pug (locals.require = require in your route), then use it to require the minifycss function from elsewhere.

However, it also appears as though the above issue was fixed in Pug 2.0.0 beta11. Depending on what version of Pug you're using, that may be the cause of the issue.

How to bind value inside a Pug.js filter

1 Answers1