{"id":13534162,"url":"https://github.com/gajus/babel-plugin-react-css-modules","last_synced_at":"2025-04-11T03:28:48.162Z","repository":{"id":43040966,"uuid":"75456498","full_name":"gajus/babel-plugin-react-css-modules","owner":"gajus","description":"Transforms styleName to className using compile time CSS module resolution.","archived":false,"fork":false,"pushed_at":"2022-08-10T18:36:58.000Z","size":309,"stargazers_count":2048,"open_issues_count":70,"forks_count":162,"subscribers_count":15,"default_branch":"master","last_synced_at":"2024-10-29T15:23:15.198Z","etag":null,"topics":["babel-plugin","css-modules","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gajus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"gajus","patreon":"gajus"}},"created_at":"2016-12-03T06:31:31.000Z","updated_at":"2024-09-22T16:32:29.000Z","dependencies_parsed_at":"2022-08-12T10:11:21.747Z","dependency_job_id":null,"html_url":"https://github.com/gajus/babel-plugin-react-css-modules","commit_stats":null,"previous_names":[],"tags_count":51,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Fbabel-plugin-react-css-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Fbabel-plugin-react-css-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Fbabel-plugin-react-css-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Fbabel-plugin-react-css-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gajus","download_url":"https://codeload.github.com/gajus/babel-plugin-react-css-modules/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248335147,"owners_count":21086524,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel-plugin","css-modules","react"],"created_at":"2024-08-01T07:01:27.187Z","updated_at":"2025-04-11T03:28:48.140Z","avatar_url":"https://github.com/gajus.png","language":"JavaScript","readme":"# babel-plugin-react-css-modules\n\n[![Travis build status](http://img.shields.io/travis/gajus/babel-plugin-react-css-modules/master.svg?style=flat-square)](https://travis-ci.org/gajus/babel-plugin-react-css-modules)\n[![NPM version](http://img.shields.io/npm/v/babel-plugin-react-css-modules.svg?style=flat-square)](https://www.npmjs.org/package/babel-plugin-react-css-modules)\n[![Canonical Code Style](https://img.shields.io/badge/code%20style-canonical-blue.svg?style=flat-square)](https://github.com/gajus/canonical)\n[![Gitter](https://img.shields.io/gitter/room/babel-plugin-react-css-modules/Lobby.svg?style=flat-square)](https://gitter.im/babel-plugin-react-css-modules/Lobby)\n[![Twitter Follow](https://img.shields.io/twitter/follow/kuizinas.svg?style=social\u0026label=Follow)](https://twitter.com/kuizinas)\n\n\u003e # Looking for maintainers\n\u003e\n\u003e This project is not actively maintained by the original author. However, I am happy to nominate new maintainers.\n\u003e If you wish to contribute to `babel-plugin-react-css-modules`, please begin by raising PRs that fix existing issues.\n\u003e PRs must pass CI/CD tests, include tests (if they change behavior or fix a bug), and include documentation.\n\n\u003cimg src='./.README/babel-plugin-react-css-modules.png' height='150' /\u003e\n\nTransforms `styleName` to `className` using compile time [CSS module](#css-modules) resolution.\n\nIn contrast to [`react-css-modules`](https://github.com/gajus/react-css-modules), `babel-plugin-react-css-modules` has a lot smaller performance overhead (0-10% vs +50%; see [Performance](#performance)) and a lot smaller size footprint (less than 2kb vs 17kb react-css-modules + lodash dependency).\n\n* [CSS Modules](#css-modules)\n* [Difference from `react-css-modules`](#difference-from-react-css-modules)\n* [Performance](#performance)\n* [How does it work?](#how-does-it-work)\n* [Conventions](#conventions)\n  * [Anonymous reference](#anonymous-reference)\n  * [Named reference](#named-reference)\n* [Configuration](#configuration)\n  * [Configurate syntax loaders](#configurate-syntax-loaders)\n  * [Custom Attribute Mapping](#custom-attribute-mapping)\n* [Installation](#installation)\n  * [React Native](#react-native)\n  * [Demo](#demo)\n* [Example transpilations](#example-transpilations)\n  * [Anonymous `styleName` resolution](#anonymous-stylename-resolution)\n  * [Named `styleName` resolution](#named-stylename-resolution)\n  * [Runtime `styleName` resolution](#runtime-stylename-resolution)\n* [Limitations](#limitations)\n* [Have a question or want to suggest an improvement?](#have-a-question-or-want-to-suggest-an-improvement)\n* [FAQ](#faq)\n  * [How to migrate from react-css-modules to babel-plugin-react-css-modules?](#how-to-migrate-from-react-css-modules-to-babel-plugin-react-css-modules)\n  * [How to reference multiple CSS modules?](#how-to-reference-multiple-css-modules)\n  * [How to live reload the CSS?](#hot-to-live-reload-the-css)\n\n## CSS Modules\n\n[CSS Modules](https://github.com/css-modules/css-modules) are awesome! If you are not familiar with CSS Modules, it is a concept of using a module bundler such as [webpack](http://webpack.github.io/docs/) to load CSS scoped to a particular document. CSS module loader will generate a unique name for each CSS class at the time of loading the CSS document ([Interoperable CSS](https://github.com/css-modules/icss) to be precise). To see CSS Modules in practice, [webpack-demo](https://css-modules.github.io/webpack-demo/).\n\nIn the context of React, CSS Modules look like this:\n\n```js\nimport React from 'react';\nimport styles from './table.css';\n\nexport default class Table extends React.Component {\n  render () {\n    return \u003cdiv className={styles.table}\u003e\n      \u003cdiv className={styles.row}\u003e\n        \u003cdiv className={styles.cell}\u003eA0\u003c/div\u003e\n        \u003cdiv className={styles.cell}\u003eB0\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e;\n  }\n}\n\n```\n\nRendering the component will produce a markup similar to:\n\n```js\n\u003cdiv class=\"table__table___32osj\"\u003e\n  \u003cdiv class=\"table__row___2w27N\"\u003e\n    \u003cdiv class=\"table__cell___1oVw5\"\u003eA0\u003c/div\u003e\n    \u003cdiv class=\"table__cell___1oVw5\"\u003eB0\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n```\n\nand a corresponding CSS file that matches those CSS classes.\n\nAwesome!\n\nHowever, there are several disadvantages of using CSS modules this way:\n\n* You have to use `camelCase` CSS class names.\n* You have to use `styles` object whenever constructing a `className`.\n* Mixing CSS Modules and global CSS classes is cumbersome.\n* Reference to an undefined CSS Module resolves to `undefined` without a warning.\n\n`babel-plugin-react-css-modules` automates loading of CSS Modules using `styleName` property, e.g.\n\n```js\nimport React from 'react';\nimport './table.css';\n\nexport default class Table extends React.Component {\n  render () {\n    return \u003cdiv styleName='table'\u003e\n      \u003cdiv styleName='row'\u003e\n        \u003cdiv styleName='cell'\u003eA0\u003c/div\u003e\n        \u003cdiv styleName='cell'\u003eB0\u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e;\n  }\n}\n\n```\n\nUsing `babel-plugin-react-css-modules`:\n\n* You are not forced to use the `camelCase` naming convention.\n* You do not need to refer to the `styles` object every time you use a CSS Module.\n* There is clear distinction between global CSS and CSS modules, e.g.\n\n  ```js\n  \u003cdiv className='global-css' styleName='local-module'\u003e\u003c/div\u003e\n  ```\n\n\u003c!--\n* You are warned when `styleName` refers to an undefined CSS Module ([`errorWhenNotFound`](#errorwhennotfound) option).\n* You can enforce use of a single CSS module per `ReactElement` ([`allowMultiple`](#allowmultiple) option).\n--\u003e\n\n## Difference from `react-css-modules`\n\n[`react-css-modules`](https://github.com/gajus/react-css-modules) introduced a convention of using `styleName` attribute to reference [CSS module](https://github.com/css-modules/css-modules). `react-css-modules` is a higher-order [React](https://facebook.github.io/react/) component. It is using the `styleName` value to construct the `className` value at the run-time. This abstraction frees a developer from needing to reference the imported styles object when using CSS modules ([What's the problem?](https://github.com/gajus/react-css-modules#whats-the-problem)). However, this approach has a measurable performance penalty (see [Performance](#performance)).\n\n`babel-plugin-react-css-modules` solves the developer experience problem without impacting the performance.\n\n## Performance\n\nThe important metric here is the \"Difference from the base benchmark\". \"base\" is defined as using React with hardcoded `className` values. The lesser the difference, the bigger the performance impact.\n\n\u003e Note:\n\u003e This benchmark suite does not include a scenario when `babel-plugin-react-css-modules` can statically construct a literal value at the build time.\n\u003e If a literal value of the `className` is constructed at the compile time, the performance is equal to the base benchmark.\n\n|Name|Operations per second (relative margin of error)|Sample size|Difference from the base benchmark|\n|---|---|---|---|\n|Using `className` (base)|9551 (±1.47%)|587|-0%|\n|`react-css-modules`|5914 (±2.01%)|363|-61%|\n|`babel-plugin-react-css-modules` (runtime, anonymous)|9145 (±1.94%)|540|-4%|\n|`babel-plugin-react-css-modules` (runtime, named)|8786 (±1.59%)|527|-8%|\n\n\u003e Platform info:\n\u003e\n\u003e * Darwin 16.1.0 x64\n\u003e * Node.JS 7.1.0\n\u003e * V8 5.4.500.36\n\u003e * NODE_ENV=production\n\u003e * Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz × 8\n\nView the [./benchmark](./benchmark).\n\nRun the benchmark:\n\n```bash\ngit clone git@github.com:gajus/babel-plugin-react-css-modules.git\ncd ./babel-plugin-react-css-modules\nnpm install\nnpm run build\ncd ./benchmark\nnpm install\nNODE_ENV=production ./test\n```\n\n## How does it work?\n\n1. Builds index of all stylesheet imports per file (imports of files with `.css` or `.scss` extension).\n1. Uses [postcss](https://github.com/postcss/postcss) to parse the matching CSS files into a lookup of CSS module references.\n1. Iterates through all [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) element declarations.\n1. Parses the `styleName` attribute value into anonymous and named CSS module references.\n1. Finds the CSS class name matching the CSS module reference:\n    * If `styleName` value is a string literal, generates a string literal value.\n    * If `styleName` value is a [`jSXExpressionContainer`](https://babeljs.io/docs/en/next/babel-types.html#jsxexpressioncontainer), uses a helper function ([`getClassName`](./src/getClassName.js)) to construct the `className` value at the runtime.\n1. Removes the `styleName` attribute from the element.\n1. Appends the resulting `className` to the existing `className` value (creates `className` attribute if one does not exist).\n\n## Configuration\n\nConfigure the options for the plugin within your `.babelrc` as follows:\n\n```json\n{\n  \"plugins\": [\n    [\"react-css-modules\", {\n      \"option\": \"value\"\n    }]\n  ]\n}\n\n```\n\n### Options\n\n|Name|Type|Description|Default|\n|---|---|---|---|\n|`context`|`string`|Must match webpack [`context`](https://webpack.js.org/configuration/entry-context/#context) configuration. [`css-loader`](https://github.com/webpack/css-loader) inherits `context` values from webpack. Other CSS module implementations might use different context resolution logic.|`process.cwd()`|\n|`exclude`|`string`|A RegExp that will exclude otherwise included files e.g., to exclude all styles from node_modules `exclude: 'node_modules'`|\n|`filetypes`|`?FiletypesConfigurationType`|Configure [postcss syntax loaders](https://github.com/postcss/postcss#syntaxes) like sugarss, LESS and SCSS and extra plugins for them. ||\n|`generateScopedName`|`?GenerateScopedNameConfigurationType`|Refer to [Generating scoped names](https://github.com/css-modules/postcss-modules#generating-scoped-names). If you use this option, make sure it matches the value of `localIdentName` [in webpack config](https://webpack.js.org/loaders/css-loader/#localidentname). See this [issue](https://github.com/gajus/babel-plugin-react-css-modules/issues/108#issuecomment-334351241) |`[path]___[name]__[local]___[hash:base64:5]`|\n|`removeImport`|`boolean`|Remove the matching style import. This option is used to enable server-side rendering.|`false`|\n|`webpackHotModuleReloading`|`boolean`|Enables hot reloading of CSS in webpack|`false`|\n|`handleMissingStyleName`|`\"throw\"`, `\"warn\"`, `\"ignore\"`|Determines what should be done for undefined CSS modules (using a `styleName` for which there is no CSS module defined).  Setting this option to `\"ignore\"` is equivalent to setting `errorWhenNotFound: false` in [react-css-modules](https://github.com/gajus/react-css-modules#errorwhennotfound). |`\"throw\"`|\n|`attributeNames`|`?AttributeNameMapType`|Refer to [Custom Attribute Mapping](#custom-attribute-mapping)|`{\"styleName\": \"className\"}`|\n|`skip`|`boolean`|Whether to apply plugin if no matching `attributeNames` found in the file|`false`|\n|`autoResolveMultipleImports`|`boolean`|Allow multiple anonymous imports if `styleName` is only in one of them.|`false`|\n\nMissing a configuration? [Raise an issue](https://github.com/gajus/babel-plugin-react-css-modules/issues/new?title=New%20configuration:).\n\n\u003e Note:\n\u003e The default configuration should work out of the box with the [css-loader](https://github.com/webpack/css-loader).\n\n#### Option types (flow)\n\n```js\ntype FiletypeOptionsType = {|\n  +syntax: string,\n  +plugins?: $ReadOnlyArray\u003cstring | $ReadOnlyArray\u003c[string, mixed]\u003e\u003e\n|};\n\ntype FiletypesConfigurationType = {\n  [key: string]: FiletypeOptionsType\n};\n\ntype GenerateScopedNameType = (localName: string, resourcePath: string) =\u003e string;\n\ntype GenerateScopedNameConfigurationType = GenerateScopedNameType | string;\n\ntype AttributeNameMapType = {\n  [key: string]: string\n};\n\n```\n\n### Configurate syntax loaders\n\nTo add support for different CSS syntaxes (e.g. SCSS), perform the following two steps:\n\n1. Add the [postcss syntax loader](https://github.com/postcss/postcss#syntaxes) as a development dependency:\n\n  ```bash\n  npm install postcss-scss --save-dev\n  ```\n\n2. Add a `filetypes` syntax mapping to the Babel plugin configuration. For example for SCSS:\n\n  ```json\n  \"filetypes\": {\n    \".scss\": {\n      \"syntax\": \"postcss-scss\"\n    }\n  }\n  ```\n\n  And optionally specify extra plugins:\n\n  ```json\n  \"filetypes\": {\n    \".scss\": {\n      \"syntax\": \"postcss-scss\",\n      \"plugins\": [\n        \"postcss-nested\"\n      ]\n    }\n  }\n  ```\n\n  \u003e NOTE: [`postcss-nested`](https://github.com/postcss/postcss-nested) is added as an extra plugin for demonstration purposes only. It's not needed with [`postcss-scss`](https://github.com/postcss/postcss-scss) because SCSS already supports nesting.\n\n  Postcss plugins can have options specified by wrapping the name and an options object in an array inside your config:\n\n  ```json\n    \"plugins\": [\n      [\"postcss-import-sync2\", {\n        \"path\": [\"src/styles\", \"shared/styles\"]\n      }],\n      \"postcss-nested\"\n    ]\n  ```\n\n\n### Custom Attribute Mapping\n\nYou can set your own attribute mapping rules using the `attributeNames` option.\n\nIt's an object, where keys are source attribute names and values are destination attribute names.\n\nFor example, the [\u0026lt;NavLink\u0026gt;](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md) component from [React Router](https://github.com/ReactTraining/react-router) has a `activeClassName` attribute to accept an additional class name. You can set `\"attributeNames\": { \"activeStyleName\": \"activeClassName\" }` to transform it.\n\nThe default `styleName` -\u003e `className` transformation **will not** be affected by an `attributeNames` value without a `styleName` key. Of course you can use `{ \"styleName\": \"somethingOther\" }` to change it, or use `{ \"styleName\": null }` to disable it.\n\n## Installation\n\nWhen `babel-plugin-react-css-modules` cannot resolve CSS module at a compile time, it imports a helper function (read [Runtime `styleName` resolution](#runtime-stylename-resolution)). Therefore, you must install `babel-plugin-react-css-modules` as a direct dependency of the project.\n\n```bash\nnpm install babel-plugin-react-css-modules --save\n```\n\n\n### React Native\n\nIf you'd like to get this working in React Native, you're going to have to allow custom import extensions, via a `rn-cli.config.js` file:\n\n```js\nmodule.exports = {\n  getAssetExts() {\n    return [\"scss\"];\n  }\n}\n```\n\nRemember, also, that the bundler caches things like plugins and presets. If you want to change your `.babelrc` (to add this plugin) then you'll want to add the `--reset-cache` flag to the end of the package command.\n\n### Demo\n\n```bash\ngit clone git@github.com:gajus/babel-plugin-react-css-modules.git\ncd ./babel-plugin-react-css-modules/demo\nnpm install\nnpm start\n```\n\n```bash\nopen http://localhost:8080/\n```\n\n## Conventions\n\n### Anonymous reference\n\nAnonymous reference can be used when there is only one stylesheet import.\n\nFormat: `CSS module name`.\n\nExample:\n\n```js\nimport './foo1.css';\n\n// Imports \"a\" CSS module from ./foo1.css.\n\u003cdiv styleName=\"a\"\u003e\u003c/div\u003e;\n```\n\n### Named reference\n\nNamed reference is used to refer to a specific stylesheet import.\n\nFormat: `[name of the import].[CSS module name]`.\n\nExample:\n\n```js\nimport foo from './foo1.css';\nimport bar from './bar1.css';\n\n// Imports \"a\" CSS module from ./foo1.css.\n\u003cdiv styleName=\"foo.a\"\u003e\u003c/div\u003e;\n\n// Imports \"a\" CSS module from ./bar1.css.\n\u003cdiv styleName=\"bar.a\"\u003e\u003c/div\u003e;\n```\n\n## Example transpilations\n\n### Anonymous `styleName` resolution\n\nWhen `styleName` is a literal string value, `babel-plugin-react-css-modules` resolves the value of `className` at the compile time.\n\nInput:\n\n```js\nimport './bar.css';\n\n\u003cdiv styleName=\"a\"\u003e\u003c/div\u003e;\n\n```\n\nOutput:\n\n```js\nimport './bar.css';\n\n\u003cdiv className=\"bar___a\"\u003e\u003c/div\u003e;\n\n```\n\n### Named `styleName` resolution\n\nWhen a file imports multiple stylesheets, you must use a [named reference](#named-reference).\n\n\u003e Have suggestions for an alternative behaviour?\n\u003e [Raise an issue](https://github.com/gajus/babel-plugin-react-css-modules/issues/new?title=Suggestion%20for%20alternative%20handling%20of%20multiple%20stylesheet%20imports) with your suggestion.\n\nInput:\n\n```js\nimport foo from './foo1.css';\nimport bar from './bar1.css';\n\n\u003cdiv styleName=\"foo.a\"\u003e\u003c/div\u003e;\n\u003cdiv styleName=\"bar.a\"\u003e\u003c/div\u003e;\n```\n\nOutput:\n\n```js\nimport foo from './foo1.css';\nimport bar from './bar1.css';\n\n\u003cdiv className=\"foo___a\"\u003e\u003c/div\u003e;\n\u003cdiv className=\"bar___a\"\u003e\u003c/div\u003e;\n\n```\n\n### Runtime `styleName` resolution\n\nWhen the value of `styleName` cannot be determined at the compile time, `babel-plugin-react-css-modules` inlines all possible styles into the file. It then uses [`getClassName`](https://github.com/gajus/babel-plugin-react-css-modules/blob/master/src/getClassName.js) helper function to resolve the `styleName` value at the runtime.\n\nInput:\n\n```js\nimport './bar.css';\n\n\u003cdiv styleName={Math.random() \u003e .5 ? 'a' : 'b'}\u003e\u003c/div\u003e;\n\n```\n\nOutput:\n\n```js\nimport _getClassName from 'babel-plugin-react-css-modules/dist/browser/getClassName';\nimport foo from './bar.css';\n\nconst _styleModuleImportMap = {\n  foo: {\n    a: 'bar__a',\n    b: 'bar__b'\n  }\n};\n\n\u003cdiv styleName={_getClassName(Math.random() \u003e .5 ? 'a' : 'b', _styleModuleImportMap)}\u003e\u003c/div\u003e;\n\n```\n\n## Limitations\n\n* [Establish a convention for extending the styles object at the runtime](https://github.com/gajus/babel-plugin-react-css-modules/issues/1)\n\n## Have a question or want to suggest an improvement?\n\n* Have a technical questions? [Ask on Stack Overflow.](http://stackoverflow.com/questions/ask?tags=babel-plugin-react-css-modules)\n* Have a feature suggestion or want to report an issue? [Raise an issues.](https://github.com/gajus/babel-plugin-react-css-modules/issues)\n* Want to say hello to other `babel-plugin-react-css-modules` users? [Chat on Gitter.](https://gitter.im/babel-plugin-react-css-modules)\n\n## FAQ\n\n### How to migrate from react-css-modules to babel-plugin-react-css-modules?\n\nFollow the following steps:\n\n* Remove `react-css-modules`.\n* Add `babel-plugin-react-css-modules`.\n* Configure `.babelrc` (see [Configuration](#configuration)).\n* Remove all uses of the `cssModules` decorator and/or HoC.\n\nIf you are still having problems, refer to one of the user submitted guides:\n\n* [Porting from react-css-modules to babel-plugin-react-css-modules (with Less)](http://www.jjinux.com/2018/04/javascript-porting-from-react-css.html)\n\n### How to reference multiple CSS modules?\n\n`react-css-modules` had an option [`allowMultiple`](https://github.com/gajus/react-css-modules#allowmultiple). `allowMultiple` allows multiple CSS module names in a `styleName` declaration, e.g.\n\n```js\n\u003cdiv styleName='foo bar' /\u003e\n```\n\nThis behaviour is enabled by default in `babel-plugin-react-css-modules`.\n\n### How to live reload the CSS?\n\n`babel-plugin-react-css-modules` utilises webpack [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/#root) (HMR) to live reload the CSS.\n\nTo enable live reloading of the CSS:\n\n* Enable [`webpackHotModuleReloading`](#configuration) `babel-plugin-react-css-modules` configuration.\n* Configure `webpack` to use HMR. Use [`--hot`](https://webpack.js.org/configuration/dev-server/#root) option if you are using `webpack-dev-server`.\n* Use [`style-loader`](https://github.com/webpack/style-loader) to load the style sheets.\n\n\u003e Note:\n\u003e\n\u003e This enables live reloading of the CSS. To enable HMR of the React components, refer to the [Hot Module Replacement - React](https://webpack.js.org/guides/hot-module-replacement/#other-code-and-frameworks) guide.\n\n\u003e Note:\n\u003e\n\u003e This is a [webpack](https://webpack.github.io/) specific option. If you are using `babel-plugin-react-css-modules` in a different setup and require CSS live reloading, raise an issue describing your setup.\n\n### I get a \"Cannot use styleName attribute for style name '`[X]`' without importing at least one stylesheet.\" error\n\nFirst, ensure that you are correctly importing the CSS file following the [conventions](#conventions).\n\nIf you are correctly importing but using different CSS (such as SCSS), this is likely happening because your CSS file wasn't able to be successfully parsed. You need to [configure a syntax loader](#configurate-syntax-loaders).\n\n### I get a \"Could not resolve the styleName '`[X]`' error but the class exists in the CSS included in the browser.\n\nFirst, verify that the CSS is being included in the browser. Remove from `styleName` the reference to the CSS class that's failing and view the page. Search through the `\u003cstyle\u003e` tags that have been added to the `\u003chead\u003e` and find the one related to your CSS module. Copy the code into your editor and search for the class name.\n\nOnce you've verified that the class is being rendered in CSS, the likely cause is that the `babel-plugin-react-css-modules` is unable to find your CSS class in the parsed code. If you're using different CSS (such as SCSS), verify that you have [configured a syntax loader](#configurate-syntax-loaders).\n\nHowever, if you're using a syntaxes such as [`postcss-scss`](https://github.com/postcss/postcss-scss) or [`postcss-less`](https://github.com/webschik/postcss-less), they do not compile down to CSS. So if you are programmatically building a class name (see below), webpack will be able to generate the rendered CSS from SCSS/LESS, but `babel-plugin-react-css-modules` will not be able to parse the SCSS/LESS.\n\nA SCSS example:\n\n```scss\n$scales: 10, 20, 30, 40, 50;\n\n@each $scale in $scales {\n  .icon-#{$scale} {\n    width: $scale;\n    height: $scale;\n  }\n  }\n```\n\n`babel-plugin-react-css-modules` will not receive `icon-10` or `icon-50`, but `icon-#{$scale}`. That is why you receive the error that `styleName` `\"icon-10\"` cannot be found.\n","funding_links":["https://github.com/sponsors/gajus","https://patreon.com/gajus"],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgajus%2Fbabel-plugin-react-css-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgajus%2Fbabel-plugin-react-css-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgajus%2Fbabel-plugin-react-css-modules/lists"}