custom-properties no longer applied after upgrade to CRA2

[bdefore]

From @bdefore on October 2, 2018 12:48

After updating to the new CRA2, I'm no longer seeing custom properties applied. Not sure if the issue resides in postcss-present-env or react-app-rewire-postcss.

My configuration in react-app-rewired is unchanged from:

  const variables = require('./src/css/variables.json')
  const mediaQueries = require('./src/css/media-queries.json')

  config = rewirePostcss(config, {
    plugins: () => [
      // postcssPresetEnv(/* allow postcss.config.js to configure */)
      postcssPresetEnv({
        stage: 0,
        features: {
          'custom-media-queries': { extensions: mediaQueries },
          'custom-properties': {
            preserve: false,
            variables: variables
          }
        }
      })
    ]
  })

  // with the following line, custom properties works with ^5.3.0 but not ^6.0.8. without this line, using CRA2 built in CSS Modules support, does not work at all (strange?)
  config = rewireCssModules(config, env) 

The relevant deltas in my dependencies are:

    "postcss-preset-env": "^6.0.8" (up from ^5.3.0)
    "react-app-rewire-postcss": "^2.0.0" (up from ^1.0.2)
    "react-scripts": "2.0.3" (up from ^1.1.5)

(I have left react-app-rewired unchanged at ^1.6.2)

Maybe relevant: https://github.com/csstools/react-app-rewire-postcss/issues/4

Copied from original issue: csstools/postcss-preset-env#84

[bdefore]

Forgot to mention, I have also been using https://github.com/codebandits/react-app-rewire-css-modules for CSS Modules support and my calls to var(--variableName) are made within files with module.css extension. I'll add the configuration line to the initial comment above.

This functionality has been newly been bundled in with CRA2 but does not appear to cooperate with custom properties. Along with upgrading the other dependencies, postcss-preset-env of ^5.3.0 functions as expected but ^6.0.8 does not.

[bdefore]

Also, with ^5.3.0 while it does work locally, it did not appear to work properly in a production deploy. CRA2 appears to chunk stylesheets now, although I'm not sure if that's related.

[bdefore]

From @jonathantneal on October 2, 2018 18:39

We need to move this issue over to https://github.com/csstools/react-app-rewire-postcss as Create React App 2 is not something you can configure, AFAIK, while the features you are looking to use probably still require React App Rewire PostCSS.

Also, I don’t know how CRA2 integration works, so I will probably need help.

[jonathantneal]

I would love to crack this. Does the CSS Modules rewire work?

[bdefore]

@jonathantneal with the latest of CRA2 unfortunately not really. per https://github.com/csstools/react-app-rewire-postcss/issues/5#issuecomment-426391775

[bdefore]

talked out a bit of the issue here with @jonathantneal and it looks like the postcss loader config is not being updated by the rewire, potentially because webpack 4's config API has changed. i've set up a sample project here that attempts to provide a minimal surface for diagnosis: https://github.com/bdefore/rewired-custom-properties-cra2

[jonathantneal]

Psst. I have a working version of this plugin with CRA2. Updates coming soon.

[jonathantneal]

@bdefore, I need to ensure the new solution works in CRA1, so I’m just trying to figure out how to spin up a CRA 1 app. Turns out this doesn’t work:

npx create-react-app@1.5.2 test-cra1

[jonathantneal]

Resolved by https://github.com/csstools/react-app-rewire-postcss/pull/6