search

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

Unknown error, different PostCSS versions #32

Closed ReindDooyeweerd closed 2 years ago

ReindDooyeweerd commented 3 years ago

I tried to implement postcss-extract-media-query inside webpack but i keep running into this error,

Unknown error from PostCSS plugin. Your current PostCSS version is 7.0.35, but postcss-extract-media-query uses 6.0.23. Perhaps this is the source of the error below.

Followed by,

ERROR in ./assets/scss/app.scss friendly-errors 22:07:18 Module build failed (from ./node_modules/postcss-loader/src/index.js): friendly-errors 22:07:18 TypeError: Cannot read property 'syntax' of undefined at /Volumes/SSD/Projects/Purvis/Frontend/assets/scss/app.scss:369:3 at Root.toString (/Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss-syntax/patch-postcss.js:38:67) at /Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss-extract-media-query/index.js:81:63 at /Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/container.js:314:16 at /Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/container.js:139:18 at Root.each (/Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/container.js:105:16) at Root.walk (/Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/container.js:135:17) at Root.walkAtRules (/Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/container.js:312:17) at /Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss-extract-media-query/index.js:75:18 at LazyResult.run (/Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/lazy-result.js:288:14) at LazyResult.run (/Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss-syntax/patch-postcss.js:30:73) at LazyResult.asyncTick (/Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/lazy-result.js:212:26) at LazyResult.asyncTick (/Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/lazy-result.js:225:14) at /Volumes/SSD/Projects/Purvis/Frontend/node_modules/postcss/lib/lazy-result.js:217:17

Last time i tried it everything seemed to work fine (a month or 2 ago) but i didn't finished it (had some PurgeCSS fixes first). This week i wanted to squeeze some extra performance out of my NuxtJS project (especially for mobile) so i picked this one up again but no luck because of the above error.

Probably i'm doing something wrong but i couldn't find anything in the issues (or closed ones) over here.

Related webpack config,

build: { // analyze: true, extend(config, ctx) {}, extractCSS: true, postcss: { plugins: { '@fullhuman/postcss-purgecss': { content: [ './pages/**/*.vue', './layouts/**/*.vue', './components/*.vue', './components/*/*.vue' // Subfolders also ], safelist: { standard: [ /body/, /btn/, /collapse/, /collapsed/, /form-control/, /input-group/, /page-item/, /page-link/, /pagination/, /tooltip/ ], greedy: [/custom-select/] } }, 'postcss-extract-media-query': { extractAll: true } } } }

SassNinja commented 2 years ago

Hi @Vout

I wasn't able to reproduce your error.

However it sounds to an incompatibility issue. I've upgraded all dependencies in https://github.com/SassNinja/postcss-extract-media-query/pull/37 which also includes postcss.

In the course of this postcss has become a peer dependency what will probably solve your problem (you'll have to upgrade your project's postcss version to 8.x though)

So the bottom line is, the next release of my plugin (3.0.0) will fix your problem!