{"id":13533229,"url":"https://github.com/Craga89/babel-plugin-codemod-react-css-modules","last_synced_at":"2025-04-01T21:32:02.056Z","repository":{"id":137928813,"uuid":"168228004","full_name":"Craga89/babel-plugin-codemod-react-css-modules","owner":"Craga89","description":"Converts React components using imported CSS stylesheets to equivalent CSS Modules syntax.","archived":false,"fork":false,"pushed_at":"2019-01-29T22:07:26.000Z","size":150,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-02T20:33:01.859Z","etag":null,"topics":["babel","babel-codemod","babel-plugin","babel-plugin-codemod","codemod","codemods","javascript","react","reactjs","typescript"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Craga89.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2019-01-29T21:01:39.000Z","updated_at":"2023-06-03T06:15:11.000Z","dependencies_parsed_at":"2024-01-14T01:08:03.989Z","dependency_job_id":"dc199b60-83f7-46b7-9065-dd947ca45ce6","html_url":"https://github.com/Craga89/babel-plugin-codemod-react-css-modules","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Craga89%2Fbabel-plugin-codemod-react-css-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Craga89%2Fbabel-plugin-codemod-react-css-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Craga89%2Fbabel-plugin-codemod-react-css-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Craga89%2Fbabel-plugin-codemod-react-css-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Craga89","download_url":"https://codeload.github.com/Craga89/babel-plugin-codemod-react-css-modules/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246713296,"owners_count":20821870,"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","babel-codemod","babel-plugin","babel-plugin-codemod","codemod","codemods","javascript","react","reactjs","typescript"],"created_at":"2024-08-01T07:01:17.823Z","updated_at":"2025-04-01T21:32:01.671Z","avatar_url":"https://github.com/Craga89.png","language":"TypeScript","funding_links":[],"categories":["Frameworks"],"sub_categories":["React.js"],"readme":"# babel-plugin-codemod-react-css-modules\n\nConverts React components using imported CSS stylesheets to equivalent CSS Modules syntax.\n\n## Example\n\nGiven this (simpilified) CSS file and React component:\n\n```css\n/* button.css */\n.button {\n\tflex: 1;\n\tbackground-color: #eee;\n\tcolor: #222;\n}\n```\n\n```ts\n/* button.tsx */\nimport \"./button.css\";\n\nexport default ({ children }) =\u003e \u003cdiv className=\"button\"\u003e{children}\u003c/div\u003e;\n```\n\nIt will product the following, _modified_ component:\n\n```ts\n/* button.tsx */\nimport * as styles from \"./button.css\";\n\nexport default ({ children }) =\u003e (\n\t\u003cdiv className={styles[\"button\"]}\u003e{children}\u003c/div\u003e\n);\n```\n\n## Usage\n\nRunning the following command will `codemod` all files in `dir/` (**Make sure they're checked into source control!**):\n\n```bash\nnpx codemod -p babel-plugin-codemod-react-css-modules dir/\n```\n\nYou can also pass options to the plugin like so\n\n```bash\nnpx codemod \\\n\t-p babel-plugin-codemod-react-css-modules \\\n\t-o react-css-modules='{ \"importIdentifier\": \"css\" }' \\\n\tpath/to/file\n```\n\nOr store them in a file e.g. `options.json` and reference them using the `@` syntax:\n\n```bash\nnpx codemod \\\n\t-p babel-plugin-codemod-react-css-modules \\\n\t-o react-css-modules=@options.json \\\n\tpath/to/file\n```\n\nFor a list of valid options see [`src/index.ts:PluginOptions`](/src/index.ts#L9)\n\n## More examples\n\n## FAQ\n\n### It missed some classes in my component?\n\nThe plugin will attempt to convert any string literals specifically that have a value within the list of CSS class names of the imported `.css` file.\n\nIt will also attempt to process strings within variables referenced in the `className` expression e.g. `className={className}` will result in the scoped `className` variable being recursively processed as outlined above.\n\nThis logic is scoped to only affect statements within JSX `className` declarations, which might not pick up 100% of edge cases. In particular, it won't pick up stuff like... `className={\"button--\"+variant}`, since the full class name wouldn't be known until runtime. You'll need to handle this case manually\n\n### It missed some classes in my CSS?\n\nThis plugin uses `postcss` and the `postcss-modules` plugin to get a list of valid CSS class names from the imported `.css` file. If it isn't picking up one of your classes, you might need to include a custom `postcss` plugin to handle your CSS. See below for details.\n\n### It broke all my UI!\n\nYou'll need to modify your `webpack` or other bundling environment to load the CSS files using the `CSS Modules` specification for this to work once the codemod is done.\n\n`css-loader` supports `CSS Modules` out the box, or if you prefer you can use `postcss-loader` and the `postcss-modules` plugin instead.\n\n### Can I pass in custom PostCSS plugins?\n\nYes, the plugin will look for your `postcss.config.js` file (or similar) thanks to it using the `postcss-load-config` module.\n\n### Does it support SCSS/LESS/Preprocessors?\n\nYes, see above.\n\n### Can I customize the name identifier used for the CSS import?\n\nYes, see `PluginOptions` in [`src/index.ts`](/src/index.ts#L9)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCraga89%2Fbabel-plugin-codemod-react-css-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FCraga89%2Fbabel-plugin-codemod-react-css-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FCraga89%2Fbabel-plugin-codemod-react-css-modules/lists"}