Skip to content
GitLab

Fix ICSS syntax in stylesheets

Merged Administrator requested to merge github/fork/thabemmz/master into master

Created by: thabemmz

Context

After upgrading Create React App to v4, the exported SASS variables did not work anymore in my project. This was a known issue for CRA@v4.

Cause of the issue

In CRA@v4, css-loader was upgraded from v3 to v4. In css-loader v4 there was a bug that did not handle ICSS (the syntax within CSS modules used to :import and :export) imports properly. This has been resolved by adding the compileType property in v4.2.0.

In the README of css-loader, there is a whole section about how to configure your setup to support ICSS properly when used together with CSS modules (see here).

What has been done?

  • Pass a compileType to all style rules in Webpack config of CRA. Use icss for non-modules and module for all modules

How to test?

I tested this in my own project, but in the Create-React-App project, I verified this works by doing the following:

  • Ran the project using yarn start
  • Verify the interface of the App template is shown properly
  • Now, within packages/cra-template/template/src, rename App.css to App.module.css, in the class-names replace all kebab-cased classnames to camelcase (for testing purposes)
  • In App.js, change the import to import Styles from './App.module.css'; and replace all classnames with Styles.App-like variant
  • Verify the interface of the App template is shown properly
  • Add a file foo.css with the following content: :export { black: #000000; }
  • In App.js, add the following import: import vars from './foo.css'
  • In App.js, change the <p> on line 10 to <p style={{ color: vars.black }}>
  • Verify the interface of the App template displays the text in black. This confirms the :export syntax is working properly.
  • Now, in your terminal, stop the running project. Then run (cd packages/cra-template && yarn add node-sass) and run yarn start again
  • Rename all .css files within packages/cra-template/template/src to .scss
  • Verify the interface of the App template displays the text in black. This confirms the :export syntax is working properly, even in SCSS 🎉