Open nicolasdelfino opened 4 years ago
Specifying extractAll to false and using this query in postcss.config.js
queries: { "screen and (min-width: 1024px)": "desktop" }
against this css rule (base.css):
@media screen and (min-width: 1024px)
doesn't result in expected extraction of files base.css & base-desktop.css
Even though there is no visual indication of the strings not being equal we can confirm that they're not by comparing them:
if (opts.output.path) { root.walkAtRules('media', atRule => { const query = atRule.params; const queryname = opts.queries[query] || (opts.extractAll && _.kebabCase(query)); const test = 'screen and (min-width: 1024px)'; console.log(query.localeCompare(test)); // = -1
Removing the space between min-width: and 1024px seems to do the trick:
queries: { "screen and (min-width:1024px)": "desktop" }
I had a similar issue and it was because cssnano was compressing my CSS earlier in the pipeline, if anyone else stumbles onto this issue then check you don't have a minifier/compressor stripping spaces,
Specifying extractAll to false and using this query in postcss.config.js
against this css rule (base.css):
doesn't result in expected extraction of files base.css & base-desktop.css
Even though there is no visual indication of the strings not being equal we can confirm that they're not by comparing them:
Removing the space between min-width: and 1024px seems to do the trick: