{"id":15022395,"url":"https://github.com/birdofpreyru/babel-plugin-react-css-modules","last_synced_at":"2025-09-29T08:31:51.961Z","repository":{"id":40500439,"uuid":"286048638","full_name":"birdofpreyru/babel-plugin-react-css-modules","owner":"birdofpreyru","description":"Transforms styleName to className using compile time CSS module resolution.","archived":false,"fork":true,"pushed_at":"2024-12-24T17:57:12.000Z","size":1868,"stargazers_count":30,"open_issues_count":3,"forks_count":12,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-24T17:59:17.003Z","etag":null,"topics":["babel","css","javascript","modules","plugin","react","web"],"latest_commit_sha":null,"homepage":"https://dr.pogodin.studio/docs/babel-plugin-react-css-modules","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"gajus/babel-plugin-react-css-modules","license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/birdofpreyru.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"birdofpreyru"}},"created_at":"2020-08-08T13:29:36.000Z","updated_at":"2024-12-24T17:56:00.000Z","dependencies_parsed_at":"2023-01-29T01:16:04.024Z","dependency_job_id":null,"html_url":"https://github.com/birdofpreyru/babel-plugin-react-css-modules","commit_stats":null,"previous_names":[],"tags_count":95,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birdofpreyru%2Fbabel-plugin-react-css-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birdofpreyru%2Fbabel-plugin-react-css-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birdofpreyru%2Fbabel-plugin-react-css-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/birdofpreyru%2Fbabel-plugin-react-css-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/birdofpreyru","download_url":"https://codeload.github.com/birdofpreyru/babel-plugin-react-css-modules/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234604488,"owners_count":18859164,"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","css","javascript","modules","plugin","react","web"],"created_at":"2024-09-24T19:57:53.334Z","updated_at":"2025-09-29T08:31:51.955Z","avatar_url":"https://github.com/birdofpreyru.png","language":"JavaScript","funding_links":["https://github.com/sponsors/birdofpreyru"],"categories":[],"sub_categories":[],"readme":"# Babel Plugin: React CSS Modules\n\n[![Latest NPM Release](https://img.shields.io/npm/v/@dr.pogodin/babel-plugin-react-css-modules.svg)](https://www.npmjs.com/package/@dr.pogodin/babel-plugin-react-css-modules)\n[![NPM monthly downloads](https://img.shields.io/npm/dm/@dr.pogodin/babel-plugin-react-css-modules.svg)](https://www.npmjs.com/package/@dr.pogodin/babel-plugin-react-css-modules)\n[![CircleCI](https://dl.circleci.com/status-badge/img/gh/birdofpreyru/babel-plugin-react-css-modules/tree/master.svg?style=shield)](https://app.circleci.com/pipelines/github/birdofpreyru/babel-plugin-react-css-modules)\n[![GitHub Repo stars](https://img.shields.io/github/stars/birdofpreyru/babel-plugin-react-css-modules?style=social)](https://github.com/birdofpreyru/babel-plugin-react-css-modules)\n[![Dr. Pogodin Studio](https://raw.githubusercontent.com/birdofpreyru/babel-plugin-react-css-modules/master/.README/logo-dr-pogodin-studio.svg)](https://dr.pogodin.studio/docs/babel-plugin-react-css-modules)\n\n\n[Babel] plugin for advanced [CSS modules] support in [React]:\n\n- It transforms `styleName` attribute of JSX components into `className` using\n  compile-time CSS module resolution, allowing for a cleaner use of CSS modules\n  in React.\n- For server-side rendering (SSR) scenarios it can replace named stylesheet\n  imports by classname mapping objects, and remove anonymous stylesheet imports.\n\n[![Sponsor](https://raw.githubusercontent.com/birdofpreyru/babel-plugin-react-css-modules/master/.README/sponsor.svg)](https://github.com/sponsors/birdofpreyru)\n\n### [Contributors](https://github.com/birdofpreyru/babel-plugin-react-css-modules/graphs/contributors)\n[\u003cimg width=36 src=\"https://avatars.githubusercontent.com/u/313363?s=36\u0026v=4\" /\u003e](https://github.com/praveenpuglia)\n[\u003cimg width=36 src=\"https://avatars.githubusercontent.com/u/2173299?s=36\u0026v=4\" /\u003e](https://github.com/d-oliveros)\n[\u003cimg width=36 src=\"https://avatars.githubusercontent.com/u/22940470?s=36\u0026v=4\" /\u003e](https://github.com/moonlitusun)\n[\u003cimg width=36 src=\"https://avatars.githubusercontent.com/u/53335451?s=36\u0026v=4\" /\u003e](https://github.com/pturchik)\n[\u003cimg width=36 src=\"https://avatars.githubusercontent.com/u/20144632?s=36\u0026v=4\" /\u003e](https://github.com/birdofpreyru)\n\n## Content\n\n- [Usage examples](#usage-examples)\n- [Installation](#installation)\n  - [React Native](#react-native)\n- [Configuration](#configuration)\n  - [Plugin options](#plugin-options)\n  - [Configurate syntax loaders]\n  - [Custom Attribute Mapping]\n- [Under the hood](#under-the-hood)\n  - [How does it work?](#how-does-it-work)\n  - [Project history](#project-history)\n  - [Migration from `babel-plugin-react-css-modules`](##migration-from-babel-plugin-react-css-modules)\n  - [`css-loader` compatibility](#css-loader-compatibility)\n\n## Usage Examples\n\nAssuming `style.css` in the following examples is compiled as CSS Module.\n\n**Without this plugin**\n```jsx\nimport S from './styles.css';\n\nexport default function Component() {\n  return (\n    \u003cdiv className={S.container}\u003e\n      \u003ch1 className={S.title}\u003eExample\u003c/div\u003e\n      \u003cp styleName={S.text}\u003eSample text paragraph.\u003c/p\u003e\n      \u003cp className={`${S.text} ${S.special}`}\u003e\n        Sample text paragraph with special style.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n**With this plugin**\n```jsx\nimport './styles.css';\n\nexport default function Component() {\n  return (\n    \u003cdiv styleName=\"container\"\u003e\n      \u003ch1 styleName=\"title\"\u003eExample\u003c/div\u003e\n      \u003cp styleName=\"text\"\u003eSample text paragraph.\u003c/p\u003e\n      \u003cp styleName=\"text special\"\u003e\n        Sample text paragraph with special style.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n**With this plugin and multiple stylesheets**\n\nAssuming:\n- Styles `container`, `title`, and `text` are defined in `styles-01.css`.\n- Style `special` is defined in `styles-02.css`.\n- The plugin's `autoResolveMultipleImports` option is enabled (default).\n\n```jsx\nimport './styles-01.css';\nimport './styles-02.css';\n\nexport default function Component() {\n  return (\n    \u003cdiv styleName=\"container\"\u003e\n      \u003ch1 styleName=\"title\"\u003eExample\u003c/div\u003e\n      \u003cp styleName=\"text\"\u003eSample text paragraph.\u003c/p\u003e\n      \u003cp styleName=\"text special\"\u003e\n        Sample text paragraph with special style.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\nIf both files, `styles-01.css` and `styles-02.css` contain styles with the same\nnames, thus making auto resolution impossible, this plugin allows explicit\nstylesheet prefixes:\n```jsx\nimport S1 from './styles-01.css';\nimport S2 from './styles-02.css';\n\nexport default function Component() {\n  return (\n    \u003cdiv styleName=\"S1.container\"\u003e\n      \u003ch1 styleName=\"S1.title\"\u003eExample\u003c/div\u003e\n      \u003cp styleName=\"S1.text\"\u003eSample text paragraph.\u003c/p\u003e\n      \u003cp styleName=\"S1.text S2.special\"\u003e\n        Sample text paragraph with special style.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n**With this plugin and runtime resolution**\n\n```jsx\nimport './styles-01.css';\nimport './styles-02.css';\n\nexport default function Component({ special }) {\n  let textStyle = 'text';\n  if (special) textStyle += ' special';\n\n  return (\n    \u003cdiv styleName=\"container\"\u003e\n      \u003ch1 styleName=\"title\"\u003eExample\u003c/div\u003e\n      \u003cp styleName={textStyle}\u003eSample text paragraph.\u003c/p\u003e\n      \u003cp styleName={textStyle}\u003e\n        Sample text paragraph with special style.\n      \u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\nIn the case when the exact style value is not known at the compile time, like in\nthis example, the plugin will inject necessary code to correctly resolve the\n`styleName` at runtime (which is somewhat less performant, but otherwise works\nfine).\n\n**SSR scenario**\n\nConsider such component, which uses a named stylesheet import in order to use it\nin some other ways, beside simple styling, _e.g._ to also display the classname\nmapping:\n```jsx\nimport S from './style.css';\n\nexport default function Component() {\n  return (\n    \u003cdiv styleName=\"container\"\u003e\n      {JSON.stringify(S)}\n    \u003c/div\u003e\n  )\n}\n```\n\nWhile by default this plugin transforms it into (leaving it to the Webpack's\n**css-loader** to handle `./style.scss` import for the actual CSS bundling,\nand leaving a correct JS in place of it):\n```jsx\nimport S from './style.css';\n\nexport default function Component() {\n  return (\n    \u003cdiv className=\"12345\"\u003e\n      {JSON.stringify(S)}\n    \u003c/div\u003e\n  )\n}\n```\n\nFor server-side environment, if you don't compile server-side code with Webpack,\nyou'll need to replace `./style.css` with valid JS code. That is exactly what\nthis plugin does with `replaceImport` option enabled, it outputs:\n```jsx\nconst S = {\n  container: '12345',\n  // Other stylesheet keys, if any.\n};\n\nexport default function Component() {\n  return (\n    \u003cdiv className=\"12345\"\u003e\n      {JSON.stringify(S)}\n    \u003c/div\u003e\n  )\n}\n```\n\n**CommonJS require() support**\n\nThe plugin works the same with `require('./style.css')` CSS imports.\n\n## Installation\n\n- The core CSS Modules functionality should be enabled and configured elsewhere\n  in your React project:\n  - With [Create React App] see\n    [Adding a CSS Modules Stylesheet](https://create-react-app.dev/docs/adding-a-css-modules-stylesheet).\n  - With bare [Webpack] see\n    [`modules` option of `css-loader`](https://webpack.js.org/loaders/css-loader/#modules).\n  - With other frameworks refer to their documentation.\n\n- Install this plugin as a direct dependency (in edge-cases not allowing for\n  a compile-time `styleName` resolution, the plugin falls back to the runtime\n  resolution).\n  ```\n  npm install --save @dr.pogodin/babel-plugin-react-css-modules\n  ```\n\n- Install Webpack at least as a dev dependency:\n  ```\n  npm install --save-dev webpack\n  ```\n\n- Add the plugin to Babel configuration:\n  ```js\n  {\n    \"plugins\": [\n      [\"@dr.pogodin/react-css-modules\", {\n        // The default localIdentName in \"css-loader\" is \"[hash:base64]\",\n        // it is highly-recommended to explicitly specify the same value\n        // both here, and in \"css-loader\" options, including the hash length\n        // (the last digit in the template below).\n        \"generateScopedName\": \"[hash:base64:6]\"\n\n        // See below for all valid options.\n      }]\n    ]\n  }\n  ```\n\n- The `generateScopedName` option value MUST match `localIdentName` option of\n  `css-loader` to ensure both Webpack and this plugin generate matching class\n  names. The same goes for other options impacting class names\n  (_e.g._ the default length of hashes generated by Webpack, which is used\n  if you don't specify the hash length explicitly in `localIdentName` hash\n  placeholders), and also the actuals version of this plugin and `css-loader`\n  (see [`css-loader` compatibility]).\n\n- _Optional_. `css-loader` is known for eventual minor updates in their default\n  class name generation logic that require counterpart upgrades of this plugin\n  to keep it compatible.\n  [They denied](https://github.com/webpack-contrib/css-loader/issues/1152)\n  to expose the default class name generator for re-used by 3rd party libraries,\n  and suggested to rely on\n  [`getLocalIdent`](https://webpack.js.org/loaders/css-loader/#getlocalident])\n  option if unwanted class name changes due to `css-loader` updates are\n  a problem for a particular project.\n\n  To alleviate this issue, this plugin provides stable default implementation\n  for `getLocalIdent` function (taken from a selected earlier version of\n  `css-loader`). Consider to use it:\n\n  **Within Webpack Config**\n  ```js\n  const { getLocalIdent } = require('@dr.pogodin/babel-plugin-react-css-modules/utils');\n\n  const cssLoaderOptions = {\n    modules: {\n      getLocalIdent,\n      localIdentName: '[path]___[name]__[local]___[hash:base64:6]'\n    }\n  };\n  ```\n\n  **Within Babel Config**\n  ```js\n  const { generateScopedNameFactory } = require('@dr.pogodin/babel-plugin-react-css-modules/utils');\n\n  module.exports = {\n    plugins: [\n      [\"@dr.pogodin/react-css-modules\", {\n        generateScopedName:\n          // The classname template MUST match \"localIdentName\" option value\n          // you passed to \"css-loader\".\n          generateScopedNameFactory(\"[path]___[name]__[local]___[hash:base64:6]\"),\n      }]\n    ]\n  };\n  ```\n\n  In addition to the standard class name template placeholders mentioned in\n  [`css-loader` documentation](https://webpack.js.org/loaders/css-loader/#localidentname)\n  the version of `getLocalIdent()` and `generateScopedName()` provided by this\n  plugin also support `[package]` placeholder. If used, it looks up from CSS\n  file for the closest `package.json` file, takes the package name from it,\n  and inserts it into the class name (this is useful for CSS bundling for\n  libraries).\n\n### React Native\n\nIf you'd like to get this working in React Native, you're going to have to allow\ncustom 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\nwant to change your `.babelrc` (to add this plugin) then you'll want to add the\n`--reset-cache` flag to the end of the package command.\n\n## Configuration\n\n### Plugin Options\n\nThese are valid plugin options. All are optional, but the overall configuration\nshould be compatible with that of `css-loader`, thus defaults may not work for\nyou.\n\n- `context` - **string** - Must match webpack\n  [`context`](https://webpack.js.org/configuration/entry-context/#context)\n  configuration. `css-loader` inherits `context` values from webpack. Other CSS\n  module implementations might use different context resolution logic.\n  Defaults `process.cwd()`.\n- `exclude` - **string** - A RegExp that will exclude otherwise included files\n  _e.g._, to exclude all styles from node_modules: `exclude: 'node_modules'`.\n- `filetypes` - [Configurate syntax loaders] like sugarss, LESS and SCSS,\n  and extra plugins for them.\n- `generateScopedName` - **function | string** - Allows to customize the exact\n  `styleName` to `className` conversion algorithm. For details see\n  [Generating scoped names](https://github.com/css-modules/postcss-modules#generating-scoped-names).\n  Defaults `[path]___[name]__[local]___[hash:base64:5]`.\n\n- `replaceImport` - **boolean** - Replaces / removes stylesheet imports for\n  server-side rendering purposes. [See details below](#server-side-rendering).\n  Defaults **false**.\n\n- `webpackHotModuleReloading` - **boolean** | `\"commonjs\"` - Enables injection\n  of [Hot Module Reloading] code.\n- `handleMissingStyleName` - **string** - Determines what should be done for\n  undefined CSS modules (using a `styleName` for which there is no CSS module\n  defined). Valid values: `\"throw\"`, `\"warn\"`, `\"ignore\"`. Setting this option\n  to `\"ignore\"` is equivalent to setting `errorWhenNotFound: false` in\n  [react-css-modules](https://github.com/birdofpreyru/react-css-modules#errorwhennotfound). Defaults `\"throw\"`.\n- `attributeNames` - [Custom Attribute Mapping]\n- `skip` - **boolean** - Whether to apply plugin if no matching `attributeNames`\n  found in the file. Defaults **false**.\n- [transform] - **function** - If provided, each CSS source loaded by\n  the plugin will be passed through this function, alongside its path,\n  and this plugin's options, and the output of this function will be used\n  in place of the original CSS.\n- `autoResolveMultipleImports` - **boolean** - Allows multiple anonymous imports if\n  `styleName` is only in one of them. Defaults **true**.\n\n### Deprecated Plugin Options\n- ~~`removeImport` - **boolean**~~ - Use `replaceImport` option instead.\n\n### Configurate syntax loaders\n\nTo add support for different CSS syntaxes (e.g. SCSS), perform the following\ntwo steps:\n\n1.  Add the [postcss syntax loader](https://github.com/postcss/postcss#syntaxes)\n    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.\n    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)\n      is added as an extra plugin for demonstration purposes only. It's not\n      needed with [`postcss-scss`](https://github.com/postcss/postcss-scss)\n      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### Hot Module Reloading\nIf you don't know what is Hot Module Reloading (HMR), refer to the\n[Webpack documentation](https://webpack.js.org/concepts/hot-module-replacement).\n\nIf you use HMR in your development setup (you probably should), depending on\nyour particular configuration you might need to enable `webpackHotModuleReloading`\noption of this plugin, or you may need to leave it disabled (default), as other\nloaders / plugins in your Webpack pipeline for CSS may already inject required\nHMR code.\n\nIn case you decide to enable it in this plugin, `webpackHotModuleReloading`\noption may be set equal:\n- **true** - this plugin will inject HMR accept code for each imported CSS\n  module, using `import.meta.webpackHot` (ESM) syntax\n  ([see for details](https://webpack.js.org/api/hot-module-replacement)).\n- `commonjs` string - this plugin will inject HMR accept code using\n  the legacy `module.hot` syntax.\n\nThe default value is **false** - this plugin does not inject HMR accept code.\n\n### transform\n```js\nfunction transform(cssSource, cssSourceFilePath, pluginOptions): string\n```\nThe transform function, if provided as the `transform` option of this plugin,\nwill be called for each loaded CSS source with three arguments:\n- `cssSource` - **string** - The loaded CSS code.\n- `cssSourceFilePath` - **string** - The path of loaded CSS file.\n- `pluginOptions` - **object** - The options set for this plugin.\n\nIt should return a string, the actual CSS code to use.\n\n### Custom Attribute \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\nattribute names.\n\nFor example, the\n[\u0026lt;NavLink\u0026gt;](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md)\ncomponent from [React Router](https://github.com/ReactTraining/react-router)\nhas an `activeClassName` attribute to accept an additional class name. You can\nset `\"attributeNames\": { \"activeStyleName\": \"activeClassName\" }` to transform it.\n\nThe default `styleName` -\u003e `className` transformation **will not** be affected\nby an `attributeNames` value without a `styleName` key. Of course you can use\n`{ \"styleName\": \"somethingOther\" }` to change it, or use `{ \"styleName\": null }`\nto disable it.\n\n### Server-Side Rendering\nIf `replaceImport` flag is set, this plugin will remove or replace original\nstylesheet imports, which is needed for server-side rendering:\n\n```js\n// Anonymous imports are removed from the code:\nimport 'path/to/style.css';\n\n// Default and named imports are replaced in the following manner:\n\n// Before:\nimport styles, {\n  className,\n  otherClassName as alias,\n} from 'path/to/style.css';\n\n// After:\nconst styles = {\n  className: 'generatedClassName',\n  otherClassName: 'otherGeneratedClassName',\n},\nclassName = 'generatedClassName',\nalias = 'otherGeneratedClassName';\n\n// Also this kind of import:\nimport * as style from 'path/to/style.css';\n\n// is replaced by:\nconst style = {\n  className: 'generatedClassName',\n  otherClassName: 'otherGeneratedClassName',\n};\n```\n\n## Under the hood\n\n### How does it work?\n\nThis plugin does the following:\n1.  Builds index of all stylesheet imports per file (imports of files with\n    `.css` or `.scss` extension).\n2.  Uses [postcss](https://github.com/postcss/postcss) to parse the matching\n    CSS files into a lookup of CSS module references.\n3.  Iterates through all\n    [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html)\n    element declarations.\n4.  Parses the `styleName` attribute value into anonymous and named CSS module\n    references.\n5.  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\n      [`jSXExpressionContainer`](https://babeljs.io/docs/en/next/babel-types.html#jsxexpressioncontainer),\n      uses a helper function ([`getClassName`](./src/getClassName.js))\n      to construct the `className` value at the runtime.\n6.  Removes the `styleName` attribute from the element.\n7.  Appends the resulting `className` to the existing `className` value\n    (creates `className` attribute if one does not exist).\n\n### Project history\n\nThis plugin is an up-to-date, well-maintained fork of the original\n[`babel-plugin-react-css-modules`](https://www.npmjs.com/package/babel-plugin-react-css-modules):\n- It generates class names matching current `css-loader` versions (see\n  [`css-loader` compatibility] for details).\n- All dependencies are upgraded to the latest versions.\n- Follow-up maintenance and improvements are performed as necessary.\n\nThe original `babel-plugin-react-css-modules` plugin is largely abandoned by\nits author since March 2019. When an year later updates of `css-loader` and\nWebpack broke dependant projects, with no reaction from\n`babel-plugin-react-css-modules` author on emerging issue reports in GitHub,\nI ([birdofpreyru]) created this fork to ensure stability of my own projects\nrelying on it.\n\nI am banned from commenting in the original project repo since I tried a little\nself-promo, trying to encourage people to switch over to my fork. If you read\nthis, consider to spread the word to encourage more users to move to this fork.\n\n### Migration from `babel-plugin-react-css-modules`\n\n- Prefix plugin name in your Babel config by `@dr.pogodin/` scope, _i.e._:\n  `@dr.pogodin/babel-plugin-react-css-modules` or `@dr.pogodin/react-css-moudles` instead of `babel-plugin-react-css-modules` or `react-css-modules`.\n\n- Be sure to have `webpack` installed (it is a must-to-have peer dependency\n  of this plugin starting from `v6.2.0`).\n\n### `css-loader` compatibility\n\n| `css-loader` versions     | this plugin versions      |\n| ------------------------- | ------------------------- |\n| `7.0.0` \u0026ndash; `7.1.2` (latest) | `6.13.0` \u0026ndash; `6.13.5` (latest)         |\n| `6.7.1` \u0026ndash; `6.11.0`  | `6.7.0` \u0026ndash; `6.12.0`  |\n| `6.5.0` \u0026ndash; `6.7.0`   | `6.5.1` \u0026ndash; `6.6.1`   |\n| `6.4.0`                   | `6.4.0` \u0026ndash; `6.4.1`   |\n| `6.0.0` \u0026ndash; `6.3.0`   | `6.2.1` \u0026ndash; `6.3.1`   |\n| `5.2.5` \u0026ndash; `5.2.7`   | `6.1.1`                   |\n| `5.2.4`                   | `6.1.0`                   |\n| `5.1.3` \u0026ndash; `5.2.3`   | `6.0.11` / `6.1.0`\u003csup\u003e(1)\u003c/sup\u003e  |\n| `5.0.0` \u0026ndash; `5.1.2`   | `6.0.7` \u0026ndash; `6.0.11`  |\n| `4.2.0` \u0026ndash; `4.3.0`   | `6.0.3` \u0026ndash; `6.0.6`   |\n| \u0026le; `3.6.0`              | [original plugin](https://www.npmjs.com/package/babel-plugin-react-css-modules)  |\n\n\u003csup\u003e1) There might be some corner-case differences in class name transformation between these versions of `css-loader` and this plugin, but most probably they won't break compatibility for most users.\u003c/sup\u003e\n\n\u003c!-- Reusable links --\u003e\n\n[Babel]: https://babeljs.io\n[birdofpreyru]: https://github.com/birdofpreyru\n[CSS modules]: https://github.com/css-modules/css-modules\n[Create React App]: https://create-react-app.dev\n[React]: https://reactjs.org\n[Webpack]: https://webpack.js.org\n\n[Hot Module Reloading]: #hot-module-reloading\n[FiletypesConfiguration]: #filetypesconfiguration\n[GenerateScopedNameConfiguration]: #generatescopednameconfiguration\n[Configurate syntax loaders]: #configurate-syntax-loaders\n[Custom Attribute Mapping]: #custom-attribute-mapping\n[`css-loader` compatibility]: #css-loader-compatibility\n[transform]: #transform\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbirdofpreyru%2Fbabel-plugin-react-css-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbirdofpreyru%2Fbabel-plugin-react-css-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbirdofpreyru%2Fbabel-plugin-react-css-modules/lists"}