babel-plugin-auto-css-modules

babel-plugin-auto-css-modules

Automatically import same name CSS modules.

Table of Contents

• Installation
• Documentation
• Code of Conduct
• Contributing
• License

Installation

npm

npm install babel-plugin-auto-css-modules

yarn

yarn add babel-plugin-auto-css-modules

Documentation

For any Javascript modules that you want corresponding CSS simply create a CSS file with the extension .css and the same name as your Javascript module in the same directory as your Javascript module. For example if you have a component at foo/bar/Baz.js your corresponding CSS would live at foo/bar/Baz.css.

Then in your Babel configuration include:

const plugins = []

// Omit CSS modules in the test environment as Jest doesn't know how to handle
// them and they provide no value to Jest tests anyways.
if (NODE_ENV !== 'test') {
  plugins.push('babel-plugin-auto-css-modules')
}

module.exports = {
  plugins,
}

This plugin will then automatically inject import statements into your Javascript modules to reference the CSS modules. Given the above example, foo/bar/Baz.js would get import "foo/bar/Baz.css" at the top of the file.

From here you'll need to configure your bundler of choice to handle CSS modules. If you're using Webpack you may want to check out postcss-loader.

Code of Conduct

Please see the code of conduct.

Contributing

Please see the contributing guide.

License

MIT