search

gavinmcfarland / flex-gap-polyfill

A PostCSS plugin to emulate flex gap using margins
https://gavinmcfarland.github.io/flex-gap-polyfill/
Creative Commons Zero v1.0 Universal
143 stars 6 forks source link

Using with Nuxt.js #33

Closed frufrufrufrufru closed 3 years ago

frufrufrufrufru commented 3 years ago

Hi! How it can be used with Nuxt.js?

I found this, but there is only an example of adding a plugin. Or am I missing something?

So how can I do something like this?

postcss([
    flexGapPolyfill(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
gavinmcfarland commented 3 years ago

Hi, in theory I think it should work like this. I've not used it with Nuxt.js myself so let me know how you get on.

Install postcss and flex-gap-polyfill as a dev dependency.

npm install postcss flex-gap-polyfill --save-dev

Then configure nuxt.config.js like this

// nuxt.config.js
export default {
  build: {
    postcss: {
      plugins: {
        'flex-gap-polyfill': {},
      },
      // ...
    }
  }
}
frufrufrufrufru commented 3 years ago

Oh, I've already done that and it doesn't work. 😢

By the way, PostCSS keeps sending warns:

WARN  You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
gavinmcfarland commented 3 years ago

You know what I vaguely remember getting something like that when I did a fresh install of Nuxt.js a few months ago with another plugin. I'll investigate see if I can figure anything out. Are you able to try another PostCSS plugin and let me know if it does the same thing?

frufrufrufrufru commented 3 years ago

Ok, I tried it with postcss-responsive-type and it doesn't seem to work either.

But the most interesting thing is that it tries to use this module because I got an exception:

ERROR Cannot find module 'postcss-responsive-type'

So I installed that npm i postcss-responsive-type --save-dev and got the same output again:

WARN  You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.
gavinmcfarland commented 3 years ago

I can see other people reporting similar issues with webpack. https://github.com/webpack-contrib/postcss-loader/issues/405

I'm looking for possible causes. Will let you know if I find anything.

gavinmcfarland commented 3 years ago

I'm at a loss at the moment as to how to fix it. It seems like it could be an issue with different frameworks migrating to PostCSS 8. If you find anything let me know, I'll do the same.

frufrufrufrufru commented 3 years ago

Ok, I'll try to find something. I will try to roll back to an older version of PostCSS, who knows.

frufrufrufrufru commented 3 years ago

I installed the previous version (7) of PostCSS and it looks like it works!

frufrufrufrufru commented 3 years ago

I installed the previous version (7) of PostCSS and it looks like it works!

But not with postcss-gap:

Error: PostCSS plugin postcss-gap requires PostCSS 8.

gavinmcfarland commented 3 years ago

Hi, after doing some investigation I've found that Nuxt.js still requires PostCSS 7 as a dependency and I'm pretty sure this is causing the issue. I've tried manually upgrading to PostCSS 8 but this causes issues with Nuxt.js. As a temporary fix for now, you could rollback flex-gap-polyfill to version 1.0.4 this was before I updated to PostCSS 8.

npm install flex-gap-polyfill@1.0.4 --save-dev
frufrufrufrufru commented 3 years ago

Yes, thanks, it works! I'll wait for the update.

Apparently I found another bug, I will open a new issue.

homerjam commented 3 years ago

Maybe this helps https://github.com/nuxt/postcss8

frufrufrufrufru commented 3 years ago

https://github.com/nuxt/postcss8

@h0merjam, thank you, it works! It works, but not with flex-gap-polyfill 😢, @limitlessloop, for some reason I'm getting this:


> test@1.0.0 dev C:\Users\i\Projects\test
> nuxt

i Listening on: http://localhost:3000/
i Preparing project for development
i Initial build may take a while
i Discovered Components: .nuxt/components/readme.md
√ Builder initialized
√ Nuxt files generated
i Compiling Server
i Compiling Client
√ Server: Compiled with some errors in 6.00s
√ Client: Compiled with some errors in 6.73s
Module build failed (from 
./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
TypeError: parse is not a function
    at C:\Users\i\Projects\test\components\Feature\Feature.vue:1:1
    at 
C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:326:13
    at Array.forEach (<anonymous>)
    at rewriteMargin 
(C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:308:16)
    at 
C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:599:13
    at 
C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\co
ntainer.js:115:18
    at 
C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\co
ntainer.js:74:18
    at Root.each 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:60:16)
    at Root.walk 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:71:17)
    at Root.walkRules 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:113:19)
    at Object.Once 
(C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:531:12)
    at LazyResult.runOnRoot 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\l
azy-result.js:301:23)
    at LazyResult.runAsync 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\l
azy-result.js:355:26)
    at async Object.loader 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss-loade
r\dist\index.js:95:14)

 @ 
./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/@nuxt/postcss8/
node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/
lib/loaders/stylePostLoader.js!./node_modules/@nuxt/postcss8/node_modules/postcs
s-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??r
ef--7-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./components/F
eature/Feature.vue?vue&type=style&index=0&lang=scss& 4:14-439 15:3-20:5 
16:22-447
 @ ./components/Feature/Feature.vue?vue&type=style&index=0&lang=scss&
 @ ./components/Feature/Feature.vue
 @ ./.nuxt/components/plugin.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js 
(webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlay
Styles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

Module build failed (from 
./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
TypeError: parse is not a function
    at C:\Users\i\Projects\test\components\Footer\Footer.vue:7:1
    at 
C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:326:13
    at Array.forEach (<anonymous>)
    at rewriteMargin 
(C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:308:16)
    at 
C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:599:13
    at 
C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\co
ntainer.js:115:18
    at 
C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\co
ntainer.js:74:18
    at Root.each 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:60:16)
    at Root.walk 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:71:17)
    at Root.walkRules 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:113:19)
    at Object.Once 
(C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:531:12)
    at LazyResult.runOnRoot 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\l
azy-result.js:301:23)
    at LazyResult.runAsync 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\l
azy-result.js:355:26)
    at async Object.loader 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss-loade
r\dist\index.js:95:14)

 @ 
./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/@nuxt/postcss8/
node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/
lib/loaders/stylePostLoader.js!./node_modules/@nuxt/postcss8/node_modules/postcs
s-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??r
ef--7-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./components/F
ooter/Footer.vue?vue&type=style&index=0&lang=scss& 4:14-438 15:3-20:5 16:22-446
 @ ./components/Footer/Footer.vue?vue&type=style&index=0&lang=scss&
 @ ./components/Footer/Footer.vue
 @ ./.nuxt/components/plugin.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js 
(webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlay
Styles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

Module build failed (from 
./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
TypeError: parse is not a function
    at C:\Users\i\Projects\test\components\Header\Header.vue:1:1
    at 
C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:326:13
    at Array.forEach (<anonymous>)
    at rewriteMargin 
(C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:308:16)
    at 
C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:599:13
    at 
C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\co
ntainer.js:115:18
    at 
C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\co
ntainer.js:74:18
    at Root.each 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:60:16)
    at Root.walk 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:71:17)
    at Root.walkRules 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:113:19)
    at Object.Once 
(C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:531:12)
    at LazyResult.runOnRoot 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\l
azy-result.js:301:23)
    at LazyResult.runAsync 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\l
azy-result.js:355:26)
    at async Object.loader 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss-loade
r\dist\index.js:95:14)

 @ 
./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/@nuxt/postcss8/
node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/
lib/loaders/stylePostLoader.js!./node_modules/@nuxt/postcss8/node_modules/postcs
s-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??r
ef--7-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./components/H
eader/Header.vue?vue&type=style&index=0&lang=scss& 4:14-438 15:3-20:5 16:22-446
 @ ./components/Header/Header.vue?vue&type=style&index=0&lang=scss&
 @ ./components/Header/Header.vue
 @ ./.nuxt/components/plugin.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js 
(webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlay
Styles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

Module build failed (from 
./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
TypeError: parse is not a function
    at C:\Users\i\Projects\test\components\Main\Main.vue:1:1
    at 
C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:326:13
    at Array.forEach (<anonymous>)
    at rewriteMargin 
(C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:308:16)
    at 
C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:599:13
    at 
C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\co
ntainer.js:115:18
    at 
C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\co
ntainer.js:74:18
    at Root.each 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:60:16)
    at Root.walk 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:71:17)
    at Root.walkRules 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:113:19)
    at Object.Once 
(C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:531:12)
    at LazyResult.runOnRoot 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\l
azy-result.js:301:23)
    at LazyResult.runAsync 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\l
azy-result.js:355:26)
    at async Object.loader 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss-loade
r\dist\index.js:95:14)

 @ 
./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/@nuxt/postcss8/
node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/
lib/loaders/stylePostLoader.js!./node_modules/@nuxt/postcss8/node_modules/postcs
s-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??r
ef--7-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./components/M
ain/Main.vue?vue&type=style&index=0&lang=scss& 4:14-436 15:3-20:5 16:22-444
 @ ./components/Main/Main.vue?vue&type=style&index=0&lang=scss&
 @ ./components/Main/Main.vue
 @ ./.nuxt/components/plugin.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js 
(webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlay
Styles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

Module build failed (from 
./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
TypeError: parse is not a function
    at C:\Users\i\Projects\test\components\Menu\Menu.vue:1:1
    at 
C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:326:13
    at Array.forEach (<anonymous>)
    at rewriteMargin 
(C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:308:16)
    at 
C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:599:13
    at 
C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\co
ntainer.js:115:18
    at 
C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\co
ntainer.js:74:18
    at Root.each 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:60:16)
    at Root.walk 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:71:17)
    at Root.walkRules 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:113:19)
    at Object.Once 
(C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:531:12)
    at LazyResult.runOnRoot 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\l
azy-result.js:301:23)
    at LazyResult.runAsync 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\l
azy-result.js:355:26)
    at async Object.loader 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss-loade
r\dist\index.js:95:14)

 @ 
./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/@nuxt/postcss8/
node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/
lib/loaders/stylePostLoader.js!./node_modules/@nuxt/postcss8/node_modules/postcs
s-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??r
ef--7-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./components/M
enu/Menu.vue?vue&type=style&index=0&lang=scss& 4:14-436 15:3-20:5 16:22-444
 @ ./components/Menu/Menu.vue?vue&type=style&index=0&lang=scss&
 @ ./components/Menu/Menu.vue
 @ ./.nuxt/components/plugin.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js 
(webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlay
Styles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

Module build failed (from 
./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js):
TypeError: parse is not a function
    at C:\Users\i\Projects\test\components\Models\Models.vue:1:1
    at 
C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:326:13
    at Array.forEach (<anonymous>)
    at rewriteMargin 
(C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:308:16)
    at 
C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:599:13
    at 
C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\co
ntainer.js:115:18
    at 
C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\co
ntainer.js:74:18
    at Root.each 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:60:16)
    at Root.walk 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:71:17)
    at Root.walkRules 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\c
ontainer.js:113:19)
    at Object.Once 
(C:\Users\i\Projects\test\node_modules\flex-gap-polyfill\dist\index.js:531:12)
    at LazyResult.runOnRoot 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\l
azy-result.js:301:23)
    at LazyResult.runAsync 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss\lib\l
azy-result.js:355:26)
    at async Object.loader 
(C:\Users\i\Projects\test\node_modules\@nuxt\postcss8\node_modules\postcss-loade
r\dist\index.js:95:14)

 @ 
./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/@nuxt/postcss8/
node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/
lib/loaders/stylePostLoader.js!./node_modules/@nuxt/postcss8/node_modules/postcs
s-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??r
ef--7-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./components/M
odels/Models.vue?vue&type=style&index=0&lang=scss& 4:14-438 15:3-20:5 16:22-446
 @ ./components/Models/Models.vue?vue&type=style&index=0&lang=scss&
 @ ./components/Models/Models.vue
 @ ./.nuxt/components/plugin.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js 
(webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlay
Styles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

i Waiting for file changes
i Memory usage: 182 MB (RSS: 304 MB)
i Listening on: http://localhost:3000/
gavinmcfarland commented 3 years ago

Some frameworks seem to be having issues with some dependencies. Does it work if you manually install postcss-values-parser?

npm install --save-dev `postcss-values-parser`
frufrufrufrufru commented 3 years ago

Yes, it helped! Thanks!

gavinmcfarland commented 3 years ago

Ok thanks, I'll look into what's going on with the dependencies, possibly I'm not bundling them correctly.

gavinmcfarland commented 3 years ago

Hey @frufrufrufrufru just wanted to say thanks for all your feedback. I think this should be working now including the dependency issue.