Using global css files with CSS Modules

2
votes

I'm using https://github.com/mxstbr/react-boilerplate for a project, which uses CSS Modules and postCSS for the styles, which is great. However, I also need to have some global CSS files for typography, base components, etc. What is the best practice for how these should be added in? I've looked at using preCSS but not entirely sure how to set it up within webpack, so that it can import these global files into the main stylesheet. I'm new to webpack (come from a Gulp/Grunt background, using Sass) so any help here would be much appreciated.

It would also be great if I could use the variables and mixins defined in these files in the CSS Module files, but unsure if this is possible or advised. I've installed react-css-modules so that I can use styleName to refer to the CSS Module file and className to refer to the global CSS classes.

I know there is the composes: class from '/path/to/file.css'; attribute but I would prefer to have some global files where various utility classes are defined, such as clearfix and error classes, etc. So using react-css-modules, it would look something like this: <div className="clearfix" styleName="app-header">{...}</div>

Again, not sure if this is correct.

I want to stick to best practices as I'm working on an open-source project and want it to be done in the best way possible. Thanks for any advice!

2
cssreactjswebpackpostcsscss-modules

2 Answers

3
votes

css-modules provides :global that can be used to include locally in your code css files that will included globally in application

0
votes

I did come across this problem when I wanted to use a 3rd party library that requires some css files that are directly referenced in the js templates (by class name strings) and css modules were not supported. As I did not want to change the css files by adding :global modifier (because they are 3rd party and might change in the future), I've figure out there is a mode setting in the css-loader that you can use to preserve original names for certain files.

How it works:

There is a mode setting in the in the css-loader that (beside other options) accepts a function. It takes a resourcePath as an argument and returns values local, global and pure. Global keeps all the name as they were defined in the original file, while local uses standard hashing as defined. This is handy for third party libraries that don't work with css modules.

I've written a short function that checks the the resourcePath for modules that should stay global. Seems to work fine for me, the only disadvantage is that I have to write it twice (development and production setting).

Here is the development env example:

{
    loader: 'css-loader',
    options: {
        modules: {
            localIdentName: '[name]_[local]_[hash:base64:6]',
            exportLocalsConvention: 'camelCase',
            mode: (resourcePath) => {
                let globalStyles = ['module-to-stay-global-1', 'module-to-stay-global-2'];
                return globalStyles.some(globalFile => resourcePath.includes(globalFile)) ? 'global' : 'local'
            }
        },
    }
}

Documentation to the mode funtion can be found here: https://github.com/webpack-contrib/css-loader#function-3