Is there a way to ignore dollar signs in certain places?

[Cully Larson]

I'm using postcss with styled-jsx. postcss processes the style and sends it to styled-jsx to embed in the page. styled-jsx allows using javascript variables in styles. The problem is that variables in JS string templates use dollar signs and postcss-simple-vars will try to interpret them before sending to styled-jsx. Since the variable doesn't exist as far as postcss-simple-vars is concerned, it produces an empty value.

For example, if postcss-simple-vars gets this:

<style jsx>
    {`
        .categories {
            --numColumns: ${numColumns.xl};
            --gapWidth: 20px;

            padding-left: 10px;
            overflow-x: hidden;
        }
    }`
</style>

It will produce something like:

.categories {
    --numColumns: ;
    --gapWidth: 20px;

    padding-left: 10px;
    overflow-x: hidden;
}

I'm wondering if there's a way to tell postcss-simple-vars to ignore a line or a string.

[Cully Larson]

I was looking at the source code for postcss-simple-vars to see if I could modify it to work for what I need. I don't actually think this is caused by postcss-simple-vars. The regex used to match variable names should not match templates string expressions. If I find an answer I'll post it here in case someone else stumbles upon this.

[Cully Larson]

It turns out this is caused by cssnano. If I disable it, the problem goes away. I haven't found a solution (turning off all cssnano options doesn't fix it). I posted an issue there: cssnano/cssnano#885