SassNinja / postcss-extract-media-query

PostCSS plugin to extract all media query from CSS and emit as separate files.
MIT License
130 stars 20 forks source link

extractAll query mismatch #25

Open nicolasdelfino opened 4 years ago

nicolasdelfino commented 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"
} 
philwolstenholme commented 4 years ago

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,