{"id":15022387,"url":"https://github.com/teabyii/babel-plugin-postcss-css-modules","last_synced_at":"2025-10-23T15:31:50.753Z","repository":{"id":34634162,"uuid":"179986067","full_name":"teabyii/babel-plugin-postcss-css-modules","owner":"teabyii","description":"Babel CSS Modules by PostCSS","archived":false,"fork":false,"pushed_at":"2022-12-03T05:30:14.000Z","size":1555,"stargazers_count":3,"open_issues_count":9,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-10-14T04:52:43.149Z","etag":null,"topics":["babel","babel-plugin","css-modules","postcss","transform"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/teabyii.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}},"created_at":"2019-04-07T15:34:55.000Z","updated_at":"2023-09-01T10:09:43.000Z","dependencies_parsed_at":"2022-09-20T07:50:28.769Z","dependency_job_id":null,"html_url":"https://github.com/teabyii/babel-plugin-postcss-css-modules","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/teabyii/babel-plugin-postcss-css-modules","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teabyii%2Fbabel-plugin-postcss-css-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teabyii%2Fbabel-plugin-postcss-css-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teabyii%2Fbabel-plugin-postcss-css-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teabyii%2Fbabel-plugin-postcss-css-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/teabyii","download_url":"https://codeload.github.com/teabyii/babel-plugin-postcss-css-modules/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teabyii%2Fbabel-plugin-postcss-css-modules/sbom","scorecard":{"id":871296,"data":{"date":"2025-08-11","repo":{"name":"github.com/teabyii/babel-plugin-postcss-css-modules","commit":"9024b2470968f1efe3e67d978a5fa8e50d86b29e"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.3,"checks":[{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/8 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 12 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"56 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm","Warn: Project is vulnerable to: GHSA-2j2x-2gpw-g8fm","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-4q6p-r6v2-jvc5","Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44","Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695","Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-g6ww-v8xp-vmwg","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-6fw4-hr69-g3rv","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-4g88-fppr-53pp","Warn: Project is vulnerable to: GHSA-4jqc-8m5r-9rpr","Warn: Project is vulnerable to: GHSA-3f95-r44v-8mrg","Warn: Project is vulnerable to: GHSA-28xr-mwxg-3qc8","Warn: Project is vulnerable to: GHSA-9p95-fxvg-qgq2","Warn: Project is vulnerable to: GHSA-9w5j-4mwv-2wj8","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw","Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh","Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-24T04:18:08.435Z","repository_id":34634162,"created_at":"2025-08-24T04:18:08.435Z","updated_at":"2025-08-24T04:18:08.435Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280532109,"owners_count":26346352,"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","status":"online","status_checked_at":"2025-10-22T02:00:06.515Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-modules","postcss","transform"],"created_at":"2024-09-24T19:57:52.668Z","updated_at":"2025-10-23T15:31:50.302Z","avatar_url":"https://github.com/teabyii.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Babel CSS Modules by PostCSS\n\n[![NPM version][npm-badge]][npm-url]\n[![Build status][travis-badge]][travis-url]\n[![Coverage Status][coverage-badge]][coverage-url]\n[![JavaScript Style Guide][standard-badge]][standard-url]\n[![Commitizen Friendly][commitizen-badge]][commitizen-url]\n\nBabel Plugin to enjoy css module \u0026 process CSS file via [PostCSS](postcss)\n\n```js\nimport styles from './styles';\n```\n\n```css\n.example { color: cyan; }\n```\n\nInto an object that has properties mirroring the style names:\n\n```js\nvar styles = {\"example\": \"_example_amfqe_1\"};\n```\n\nForked from: [babel-plugin-transform-postcss][transform-postcss] \n\nAnd Why: https://github.com/wbyoung/babel-plugin-transform-postcss/issues/89  \n\nYes, I need to keep `import/require` declaration in some case when I make public components on npm which is used in project with [create-react-app][create-react-app]. Thanks to [babel-plugin-transform-postcss][transform-postcss].\n\n## Usage\n\nInstall the transform as well as `postcss` and any PostCSS plugins you want to use:\n\n```bash\nnpm install --save-dev \\\n  babel-plugin-postcss-css-modules \\\n  postcss \\\n  postcss-modules\n```\n\nAdd the transform to your babel configuration, i.e. `.babelrc`:\n\n```json\n{\n  \"presets\": [\n    [\"env\", { \"targets\": { \"node\": \"current\" }}]\n  ],\n  \"plugins\": [\n    \"postcss-css-modules\"\n  ]\n}\n```\n\nCreate a [`postcss.config.js`][postcss-load-config]:\n\n```js\nmodule.exports = (ctx) =\u003e ({\n  plugins: [\n    require('postcss-modules')({\n      getJSON: ctx.extractModules || (() =\u003e {}),\n    }),\n  ],\n});\n```\n\nYou can also specify a location to load your `postcss.config.js` from in the options in your Babel configuration, i.e. `.babelrc`:\n```json\n{\n  \"plugins\": [\n    [\"postcss-css-modules\", {\n      \"config\": \"configuration/postcss.config.js\",\n      \"keep\": true,\n      \"from\": \"./src\",\n      \"to\": \"./dist\", // support multi target, just ['./dist', './build']\n    }]\n  ]\n}\n```\n\nUse `\"keep\": true` to keep `import/require` declaration. `from \u0026 to` should be given when need to output css file, they can be absolute path or relative path with `root` (default to `process.cwd()`).\n\nBy default we look for `.css` files, but you can also specify the extensions we should look for:\n```json\n{\n  \"plugins\": [\n    [\"postcss-css-modules\", {\n      \"config\": \"configuration/postcss.config.js\",\n      \"extensions\": [\".scss\"]\n    }]\n  ]\n}\n```\n\n## Details\n\nThe transform will transform all imports \u0026 require statements that have a `.css` extension and run them through `postcss`. To determine the PostCSS config, it uses [`postcss-load-config`][postcss-load-config] with [additional context values](#postcss-load-config-context). One of those config values, [`extractModules`](#extractmodules_-any-modules-object) should be invoked in order to define the value of the resulting import.\n\nNo CSS is actually included in the resulting JavaScript. \n\nI recommend to use `\"keep\": true` in this plugin's options to keep `import/requre` declaration that your webpack can also bundle css file easily. However, webpack also should handle css file transform with the same `postcss.config.js`.\n\n\u003e Notes: Without webpack, when you just use babel-cli with this plugin, you should set form \u0026 to options to make sure css file output.\n\nWithout `\"keep\": true`, It is expected that you transform your CSS using the same `postcss.config.js` file as the one used by this transform.\n\nFinally, it's worth noting that this transform also adds a comment to the generated code indicating the related CSS file so that it can be processed by other tools, i.e. [`relateify`][relateify].\n\n### PostCSS Load Config Context\n\n#### `extractModules(_: any, modules: object)`\n\nThis option is a function that may be passed directly on to [`postcss-modules`][postcss-modules] as the [`getJSON` argument][postcss-modules-get-json]. Other uses, while unlikely, are permittable, as well.\n\nThe function accepts two arguments. The transform uses only the second value passed to the function. That value is the object value that replaces the `import`/`require`.\n\n## Cache\n\nThis module caches the results of the compilation of CSS files and stores the cache in a directory under `/tmp/bppcm-UNIQUE_ID`. The cache is only invalidated when the CSS file contents change and not when the `postcss.config.js` file changes (due to limitations at the time of implementation). Try removing the cache if you're not seeing expected changes.\n\n## License\n\nThis project is distributed under the MIT license.\n\n[postcss]: http://postcss.org/\n[postcss-cli]: https://github.com/postcss/postcss-cli\n[postcss-modules]: https://github.com/css-modules/postcss-modules\n[postcss-modules-get-json]: https://github.com/css-modules/postcss-modules#saving-exported-classes\n[postcss-load-config]: https://github.com/michael-ciniawsky/postcss-load-config\n[relateify]: https://github.com/wbyoung/relateify\n[webpack]: http://webpack.js.org\n\n[npm-url]: https://npmjs.org/package/babel-plugin-postcss-css-modules\n[npm-badge]: http://img.shields.io/npm/v/babel-plugin-postcss-css-modules.svg?style=flat\n[travis-url]: https://travis-ci.org/teabyii/babel-plugin-postcss-css-modules\n[travis-badge]: http://img.shields.io/travis/teabyii/babel-plugin-postcss-css-modules.svg?style=flat\n[coverage-url]: https://coveralls.io/github/teabyii/babel-plugin-postcss-css-modules\n[coverage-badge]: http://img.shields.io/coveralls/teabyii/babel-plugin-postcss-css-modules.svg?style=flat\n[standard-url]: https://standardjs.com\n[standard-badge]: https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat\n[commitizen-url]: http://commitizen.github.io/cz-cli/\n[commitizen-badge]: https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat\n[create-react-app]: https://github.com/facebook/create-react-app\n[transform-postcss]: https://github.com/wbyoung/babel-plugin-transform-postcss \n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteabyii%2Fbabel-plugin-postcss-css-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteabyii%2Fbabel-plugin-postcss-css-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteabyii%2Fbabel-plugin-postcss-css-modules/lists"}