Is there a way to ignore dollar signs in certain places?
cullylarson opened this issue · comments
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.
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.
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