moxystudio/react-app-rewire-css-modules-extensionless

Enables CSS modules without any special extension for CRA apps using react-app-rewired

react-app-rewire-css-modules-extensionless

Adds CSS modules for CRA apps without requiring the .modules.css extension, using react-app-rewired.

This rewire is similar to react-app-rewire-css-modules with two differences:

• Doesn't require .modules.css extension for CSS files in src/ the source folder.
• Doesn't force you to install and use the sass-loader
• Setups jest

Installation

$ npm install --save-dev react-app-rewire-css-modules-extensionless

Usage

In the config-overrides.js you created for react-app-rewired add this code:

module.exports = {
    webpack: (config, env) => {
        config = require('react-app-rewire-css-modules-extensionless').webpack(config, env, { /* options */ });
        // The line below is equivalent
        // config = require('react-app-rewire-css-modules-extensionless')(config, env, { /* options */ });

        // You may apply other rewires as well

        return config;
    },
    jest: (config) => {
        config = require('react-app-rewire-css-modules-extensionless').jest(config);

        // You may apply other rewires as well

        return config;
    },
};

If you are using the compose utility of react-app-rewired:

const { compose } = require('react-app-rewired');

module.exports = {
    webpack: compose(
        require('react-app-rewire-css-modules-extensionless').webpack({ /* options */ })
        // The line below is equivalent
        require('react-app-rewire-css-modules-extensionless')({ /* options */ })
        // ... other rewires
    ),
    jest: compose(
        require('react-app-rewire-css-modules-extensionless').jest()
        // ... other rewires
    ),
};

Available options:

Name	Description	Type	Default
test	The loader test pattern	string/RegExp	/\.css$/
include	The loader include condition	string/Array/RegExp/Function	src folder
exclude	The loader exclude condition	string/Array/RegExp/Function
localIdentName	The localIdentName option to pass to the css-loader	string	[hash:base64:5]! for production, [name]__[local]___[hash:base64:5]! otherwise

If you modify include and exclude to point to packages in node_modules, it's advised to use fs.realpathSync so that it plays well with packages linked with npm link. Alternatively, you may disable resolve.symlinks in your webpack configuration.

Tests

$ npm test
$ npm test -- --watch # during development

License

MIT License

react-app-rewire-css-modules-extensionless's Issues

Global style loading method

Hi, I'm curious if this plugin can also load global styles (without having to wrap selectors with :global(*) in a CSS module file)? If so, I'd really like to know how it does this? Aka., how can you test for / differentiate between the following:

CSS module:
import styles from './style.css'

Global style:
import './style.css'

I apologize if this addresses features not encapsulated by your library. In many ways this is a feature request (could be cool to add to the roadmap). Also, it would be fantastic if this plugin played well with react-app-rewire-preload-plugin, as to create several CSS bundles and load them in from the server as needed (another feature request).

Thanks for taking the time to reading this over!

Css Modules Server Side Rendering

Hi,
How can i make css modules load on server side rendering. Right now it like the class name is being removed

module.exports = function override(config, env){
config = require('react-app-rewire-css-modules-extensionless').webpack(config, env,{
localIdentName: '[local]___[hash:base64:5]',
exclude : /styles/
});

return config
}