extractAll query mismatch

[nicolasdelfino]

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

[philwolstenholme]

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,