PostCSS 8 Required for Styles Imports

Describe the problem:

When attempting to use the `import “…/styles.css” functionality of a basic Flareact project, the following error is thrown:

 ❯  ~/Documents/Apps/OSS-Projects/Reproducible-Examples-for-Issues/my-project   master±  yarn dev
yarn run v1.22.10
$ flareact dev
🚀 Starting Flareact dev server on http://localhost:8080 ...

[worker] ⚠ ｢copy-webpack-plugin｣: unable to locate '/Users/jn/Documents/Apps/OSS-Projects/Reproducible-Examples-for-Issues/my-project/public' at '/Users/jn/Documents/Apps/OSS-Projects/Reproducible-Examples-for-Issues/my-project/public'
[client] ✖ ｢wdm｣:
[client] ERROR in ./styles.css (./node_modules/css-loader/dist/cjs.js??ref--6-1!./node_modules/postcss-loader/dist/cjs.js??ref--6-2!./node_modules/sass-loader/dist/cjs.js??ref--6-3!./styles.css)
[client] Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
[client] Error: PostCSS plugin postcss-flexbugs-fixes requires PostCSS 8.
[client] Migration guide for end-users:
[client] https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
[client]     at Processor.normalize (/Users/jn/Documents/Apps/OSS-Projects/Reproducible-Examples-for-Issues/my-project/node_modules/postcss/lib/processor.js:153:15)
[client]     at new Processor (/Users/jn/Documents/Apps/OSS-Projects/Reproducible-Examples-for-Issues/my-project/node_modules/postcss/lib/processor.js:56:25)
[client]     at postcss (/Users/jn/Documents/Apps/OSS-Projects/Reproducible-Examples-for-Issues/my-project/node_modules/postcss/lib/postcss.js:55:10)
[client]     at Object.loader (/Users/jn/Documents/Apps/OSS-Projects/Reproducible-Examples-for-Issues/my-project/node_modules/postcss-loader/dist/index.js:94:41)

This issue is due to postcss-flexbugs-fixes having a peer dependency: "postcss": "^8.1.4"

When starting a Flareact project, the yarn installer even warns about this:

 ❯  ~/Documents/Apps/OSS-Projects/Reproducible-Examples-for-Issues/my-project   master±  yarn
yarn install v1.22.10
info No lockfile found.
[1/4] 🔍  Resolving packages...
warning flareact > webpack-dev-server > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning flareact > webpack-dev-server > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning flareact > webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning flareact > webpack > micromatch > snapdragon > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning flareact > webpack > micromatch > snapdragon > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning " > flareact@1.0.1" has incorrect peer dependency "react@^16.13.1".
warning " > flareact@1.0.1" has incorrect peer dependency "react-dom@^16.13.1".
warning "flareact > postcss-flexbugs-fixes@5.0.2" has unmet peer dependency "postcss@^8.1.4".
warning "flareact > postcss-loader@4.1.0" has unmet peer dependency "postcss@^7.0.0 || ^8.0.1".

Link to a minimal reproduction:

https://github.com/calendee/flareact-postcss-issue-98

[calendee]

I’d be happy to make a PR to fix this adding PostCSS 8 as a dependency. However, I’d first like some guidance on where you’d prefer the fix.

1. In the flareact-template project
2. In the main flareact project as a dev dependency in the main project

Please advise.

[calendee]

@iceton Actually… I did. Took me a while to figure out why it wasn’t working. In my actual project generated by the template, I had to do yarn add postcss

I don’t think it’s added by default in the template because many people might not need postcss.

Also, you might not need it either. Perhaps simple CSS modules would do the trick for you?

https://flareact.com/docs/built-in-css-support#css-modules