{"id":13394271,"url":"https://github.com/michalkvasnicak/babel-plugin-css-modules-transform","last_synced_at":"2025-05-16T09:05:55.472Z","repository":{"id":2370944,"uuid":"46361783","full_name":"michalkvasnicak/babel-plugin-css-modules-transform","owner":"michalkvasnicak","description":"Extract css class names from required css module files, so we can render it on server.","archived":false,"fork":false,"pushed_at":"2022-12-06T19:47:00.000Z","size":266,"stargazers_count":326,"open_issues_count":32,"forks_count":54,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-07T08:02:12.466Z","etag":null,"topics":["babel","babel-plugin","css-files","css-modules","extract-css","preprocessor"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/michalkvasnicak.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-17T16:58:41.000Z","updated_at":"2024-07-03T10:09:03.000Z","dependencies_parsed_at":"2022-07-24T22:16:13.715Z","dependency_job_id":null,"html_url":"https://github.com/michalkvasnicak/babel-plugin-css-modules-transform","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michalkvasnicak%2Fbabel-plugin-css-modules-transform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michalkvasnicak%2Fbabel-plugin-css-modules-transform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michalkvasnicak%2Fbabel-plugin-css-modules-transform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michalkvasnicak%2Fbabel-plugin-css-modules-transform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michalkvasnicak","download_url":"https://codeload.github.com/michalkvasnicak/babel-plugin-css-modules-transform/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254501557,"owners_count":22081528,"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-plugin","css-files","css-modules","extract-css","preprocessor"],"created_at":"2024-07-30T17:01:14.471Z","updated_at":"2025-05-16T09:05:50.464Z","avatar_url":"https://github.com/michalkvasnicak.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# babel-plugin-css-modules-transform [![Circle CI](https://circleci.com/gh/michalkvasnicak/babel-plugin-css-modules-transform.svg?style=svg)](https://circleci.com/gh/michalkvasnicak/babel-plugin-css-modules-transform)\n\n**🎉 Babel 6 and Babel 7 compatible**\n\n**⚠️ Babel 7 compatibility added in 1.4.0**\n\nThis Babel plugin finds all `require`s for css module files and replace them with a hash where keys are class names and values are generated css class names.\n\nThis plugin is based on the fantastic [css-modules-require-hook](https://github.com/css-modules/css-modules-require-hook).\n\n## Warning\n\nThis plugin is experimental, pull requests are welcome.\n\n**Do not run this plugin as part of webpack frontend configuration. This plugin is intended only for backend compilation.**\n\n## Example\n\n```css\n/* test.css */\n\n.someClass {\n    color: red;\n}\n```\n\n```js\n// component.js\nconst styles = require('./test.css');\n\nconsole.log(styles.someClass);\n\n// transformed file\nconst styles = {\n    'someClass': 'Test__someClass___2Frqu'\n}\n\nconsole.log(styles.someClass); // prints Test__someClass___2Frqu\n```\n\n## Installation\n\n```console\nnpm install --save-dev babel-plugin-css-modules-transform\n```\n\n**Include plugin in `.babelrc`**\n\n```json\n{\n    \"plugins\": [\"css-modules-transform\"]\n}\n```\n\n**With custom options [css-modules-require-hook options](https://github.com/css-modules/css-modules-require-hook#tuning-options)**\n\n\n```js\n{\n    \"plugins\": [\n        [\n            \"css-modules-transform\", {\n                \"append\": [\n                    \"npm-module-name\",\n                    \"./path/to/module-exporting-a-function.js\"\n                ],\n                \"camelCase\": false,\n                \"createImportedName\": \"npm-module-name\",\n                \"createImportedName\": \"./path/to/module-exporting-a-function.js\",\n                \"devMode\": false,\n                \"extensions\": [\".css\", \".scss\", \".less\"], // list extensions to process; defaults to .css\n                \"generateScopedName\": \"[name]__[local]___[hash:base64:5]\", // in case you don't want to use a function\n                \"generateScopedName\": \"./path/to/module-exporting-a-function.js\", // in case you want to use a function\n                \"generateScopedName\": \"npm-module-name\",\n                \"hashPrefix\": \"string\",\n                \"ignore\": \"*css\",\n                \"ignore\": \"./path/to/module-exporting-a-function-or-regexp.js\",\n                \"preprocessCss\": \"./path/to/module-exporting-a-function.js\",\n                \"preprocessCss\": \"npm-module-name\",\n                \"processCss\": \"./path/to/module-exporting-a-function.js\",\n                \"processCss\": \"npm-module-name\",\n                \"processorOpts\": \"npm-module-name\",\n                \"processorOpts\": \"./path/to/module/exporting-a-plain-object.js\",\n                \"mode\": \"string\",\n                \"prepend\": [\n                    \"npm-module-name\",\n                    \"./path/to/module-exporting-a-function.js\"\n                ],\n                \"extractCss\": \"./dist/stylesheets/combined.css\"\n            }\n        ]\n    ]\n}\n```\n\n## Using a preprocessor\n\nWhen using this plugin with a preprocessor, you'll need to configure it as such:\n\n\n```js\n// ./path/to/module-exporting-a-function.js\nvar sass = require('node-sass');\nvar path = require('path');\n\nmodule.exports = function processSass(data, filename) {\n    var result;\n    result = sass.renderSync({\n        data: data,\n        file: filename\n    }).css;\n    return result.toString('utf8');\n};\n```\n\nand then add any relevant extensions to your plugin config:\n\n```js\n{\n    \"plugins\": [\n        [\n            \"css-modules-transform\", {\n                \"preprocessCss\": \"./path/to/module-exporting-a-function.js\",\n                \"extensions\": [\".css\", \".scss\"]\n            }\n        ]\n    ]\n}\n\n```\n\n## Extract CSS Files\n\nWhen you publish a library, you might want to ship compiled css files as well to\nhelp integration in other projects.\n\nAn more complete alternative is to use\n[babel-plugin-webpack-loaders](https://github.com/istarkov/babel-plugin-webpack-loaders)\nbut be aware that a new webpack instance is run for each css file, this has a\nhuge overhead. If you do not use fancy stuff, you might consider using\n[babel-plugin-css-modules-transform](https://github.com/michalkvasnicak/babel-plugin-css-modules-transform)\ninstead.\n\n\nTo combine all css files in a single file, give its name:\n\n```js\n{\n    \"plugins\": [\n        [\n            \"css-modules-transform\", {\n                \"extractCss\": \"./dist/stylesheets/combined.css\"\n            }\n        ]\n    ]\n}\n```\n\nTo extract all files in a single directory, give an object:\n\n```js\n{\n    \"plugins\": [\n        [\n            \"css-modules-transform\", {\n                \"extractCss\": {\n                    \"dir\": \"./dist/stylesheets/\",\n                    \"relativeRoot\": \"./src/\",\n                    \"filename\": \"[path]/[name].css\"\n                }\n            }\n        ]\n    ]\n}\n```\n\nNote that `relativeRoot` is used to resolve relative directory names, available\nas `[path]` in `filename` pattern.\n\n## Keeping import\n\nTo keep import statements you should set option `keepImport` to *true*. In this way, simultaneously with the converted values, the import will be described as unassigned call expression.\n\n```js\n// before\nconst styles = require('./test.css');\n```\n\n```js\n// after\nrequire('./test.css');\n\nconst styles = {\n    'someClass': 'Test__someClass___2Frqu'\n}\n```\n\n## Alternatives\n\n- [babel-plugin-transform-postcss](https://github.com/wbyoung/babel-plugin-transform-postcss) - which supports async plugins and does not depend on `css-modules-require-hook`.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichalkvasnicak%2Fbabel-plugin-css-modules-transform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichalkvasnicak%2Fbabel-plugin-css-modules-transform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichalkvasnicak%2Fbabel-plugin-css-modules-transform/lists"}