Create-react-app: How can I add postcss-cssnext to Create-react-app

[ruchikagamage]

Adding postcss-cssnext to create-react-app and i can see auto Autoprefixer in App.css file

i did use node-sass-chokidar.

can you please tell me is there any other special way to set up those things to get work ?

thanks,

[Timer]

We already transform css files with autoprefixer, however, we do not include postcss-cssnext.
Unfortunately the only way to use postcss-cssnext is to eject, sorry!

[ruchikagamage]

where can i see these autoprefixer css codes ?

[jdrzejb]

It's not ideal solution, but I managed to get postcss working without ejecting.

I'm already using this tip to add sass support to my project:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

I used postcss-cli and added following lines to my package.json scripts:

+  "post-css": "postcss src/styles/bundle.css -o src/styles/compiled.css --use lost",
+  "post-css-watch": "postcss src/styles/bundle.css -o src/styles/compiled.css --use lost -w",
+  "build-css": "node-sass src/ -o src/ && npm run post-css",
    "watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
    "start-js": "react-scripts start",
+  "start": "npm-run-all -p watch-css post-css-watch start-js ",
    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"

Right now it supports only one file, but you can probably extend it to support more files with some config or directory watch.

[Timer]

I'll close this since it's unactionable by us, but @jdrzejb suggested a possible workaround!

[mihhail-lapushkin]

A possible solution from my side:
https://github.com/facebookincubator/create-react-app/issues/2032#issuecomment-302932310

[mikeaustin]

It feels like it's so close, yet so far. I simply ejected, then added:

• require('postcss-cssnext') to postcss-loader plugins

Full config of my module.exports.module.oneOf:

      {
        test: /\.css$/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              // Necessary for external CSS imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              plugins: () => [
+               require('postcss-cssnext'),
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
        ],
      },

I realize create-react-app is not meant to be configurable, but it's so close to being able to create production code.

[andrewodri]

Just to add to what has already been posted by @mihhail-lapushkin and @mikeaustin (whose posts I found especially helpful 🙏):

I was 1) not ready to eject, 2) don't like having a dependency just to add a dependency, and 3) was finding it annoying to keep manually patching.

I did the following:

1. Run npm install --save postcss-cssnext
2. Add this line to the scripts field in package.json
3. Run npm run postinstall

If you are still in the process of trying to shakedown your configuration before ejecting, and you still want your CSS to compile, this will monkey patch the webpack config files in react-scripts whenever you have to install/reinstall your npm modules. (See https://docs.npmjs.com/misc/scripts for more information on how postinstall works if you are not familiar with it 🙂)

[sorenhoyer]

@andrewodri it's postcss-cssnext not postcss-next :)

Other than that, it seems to work - also for the TypeScript version of CRA. However, for the ts version you just need to add-ts in the 2 occurences of react-scripts in the line you mentioned, so it becomes react-scripts-ts.

Thanks

[kylezinter]

@mikeaustin I was doing exactly what you mentioned in terms of ejecting, then adding the require('postcss-cssnext'), and I'm still getting failed to compile due to syntax errors in the css once I start using nesting and such. Did you do anything else to get that plugin working after ejecting? It seems like the webpack config is just ignoring any of the postcss plugins that I add there.

[boslott]

If you are having trouble with using Tailwind and create-react-app without ejecting, this article by Christoph Benjamin Weber is easy to follow and works beautifully. You create a react app, install Tailwind, create a Tailwind config file using the Tailwind CLI, add two lines of code to your package.json, and you are good to go to use the Tailwind classes in your components.

https://wetainment.com/create-react-app-tailwind-css/?code=f9c23c972930392eebfa&code=0863c9acd6bd24e43e30

[pauldiloreto]

@mikeaustin

plugins: () => [
               require('postcss-cssnext'),
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],

I believe postcss-cssnext includes autoprefixer, so you can pass those browser options through to postcss-cssnext and those settings will propagate. So you can remove autoprefixer from the webpack config altogether and make it a little more DRY.

Source: http://cssnext.io/usage/

Here is the corresponding section of my ejected webpack config from [email protected]:

{
                loader: require.resolve('postcss-loader'),
                options: {
                  // Necessary for external CSS imports to work
                  // https://github.com/facebookincubator/create-react-app/issues/2677
                  ident: 'postcss',
                  plugins: () => [
                    require('postcss-flexbugs-fixes'),
                    require('postcss-cssnext')({
                      browsers: [
                        '>1%',
                        'last 4 versions',
                        'Firefox ESR',
                        'not ie < 9', // React doesn't support IE8 anyway
                      ],
                      flexbox: 'no-2009',
                    }),
                  ],
                },

Someone please correct me if I'm mistaken!

[MattyBalaam]

@andrewodri I had loads of problems getting your solution to work on OSX , but changing to using [[:space:]] instead of \s worked for me.

"postinstall": "sed -i.bak \"s/[[:space:]]require('postcss-flexbugs-fixes')/require('postcss-cssnext'),require('postcss-flexbugs-fixes')/g\" node_modules/react-scripts/config/webpack.config.dev.js && sed -i.bak \"s/[[:space:]]require('postcss-flexbugs-fixes')/require('postcss-cssnext'),require('postcss-flexbugs-fixes')/g\" node_modules/react-scripts/config/webpack.config.prod.js",

[httpJunkie]

I have included a link to a project I created because I wanted a starting point for my react apps that used PostCSS, Autoprefixer, etc.. as well I wanted some basic flex-box styles to help with layout. Would love to know if it helps.

https://github.com/httpJunkie/flexbox-post-css-react-app

[gaearon]

We now include postcss-preset-env by default.
https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

[endel]

It would be great to support loading the PostCSS config from user's postcss.config.js. I think some pieces should be customizable, besides having most configurations opinionated.

[patricklafrance]

@endel you could do it with craco without ejecting from CRA

Here's a recipe on how to do it:

https://github.com/sharegate/craco/tree/master/recipes/use-a-post-css-config-file

Hope it helps!

[pacorampas]

We now include postcss-preset-env by default.
https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

I upgraded to CRA2 to use postcss. I would like to use nesting operator. It is in stage 0 of postcss:
https://preset-env.cssdb.org/features#stage-3

I made a test but unfortunately doesn't work. Linter warn me of an error and it isn't working in browser.

Example of usage:

article {
  color: red;
  & p {
    color: #333;
  }
}

Any idea?

[patricklafrance]

@pacorampas you can easily enable nesting with craco without ejecting from CRA.

Here's a recipe on how to do it with craco: https://github.com/sharegate/craco/tree/master/recipes/use-a-post-css-config-file

Hope it helps!