{"id":14990559,"url":"https://github.com/cultureamp/elm-css-modules-loader","last_synced_at":"2025-08-21T05:32:45.060Z","repository":{"id":20713011,"uuid":"90698172","full_name":"cultureamp/elm-css-modules-loader","owner":"cultureamp","description":"Reference CSS modules in Elm source files with Webpack","archived":false,"fork":false,"pushed_at":"2025-06-24T13:34:55.000Z","size":517,"stargazers_count":72,"open_issues_count":4,"forks_count":12,"subscribers_count":56,"default_branch":"master","last_synced_at":"2025-07-29T22:13:18.815Z","etag":null,"topics":["css","css-modules","elm","elm-lang","webpack","webpack-loader"],"latest_commit_sha":null,"homepage":null,"language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cultureamp.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-05-09T03:25:28.000Z","updated_at":"2025-07-04T11:16:28.000Z","dependencies_parsed_at":"2024-01-15T05:28:22.206Z","dependency_job_id":"e736a4cd-c817-4783-8b33-210b025f701e","html_url":"https://github.com/cultureamp/elm-css-modules-loader","commit_stats":{"total_commits":90,"total_committers":9,"mean_commits":10.0,"dds":0.6666666666666667,"last_synced_commit":"44861f05251c87ece18ce97369933016262c3b62"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"purl":"pkg:github/cultureamp/elm-css-modules-loader","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cultureamp%2Felm-css-modules-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cultureamp%2Felm-css-modules-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cultureamp%2Felm-css-modules-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cultureamp%2Felm-css-modules-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cultureamp","download_url":"https://codeload.github.com/cultureamp/elm-css-modules-loader/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cultureamp%2Felm-css-modules-loader/sbom","scorecard":{"id":312634,"data":{"date":"2025-08-11","repo":{"name":"github.com/cultureamp/elm-css-modules-loader","commit":"abb394b33028ab5c8ad8f13a50a6e091937d8f91"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.8,"checks":[{"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":"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":"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":"Code-Review","score":2,"reason":"Found 4/20 approved changesets -- score normalized to 2","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":"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":"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":"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":"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":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: BSD 3-Clause \"New\" or \"Revised\" License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"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":"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":"Branch-Protection","score":6,"reason":"branch protection is not maximal on development and all release branches","details":["Info: 'allow deletion' disabled on branch 'master'","Info: 'force pushes' disabled on branch 'master'","Warn: required approving review count is 1 on branch 'master'","Warn: codeowners review is required - but no codeowners file found in repo","Warn: no status checks found to merge onto branch 'master'","Info: PRs are required in order to make changes on 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 14 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":"73 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-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx","Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-hr2v-3952-633q","Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2","Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3","Warn: Project is vulnerable to: MAL-2023-462","Warn: Project is vulnerable to: GHSA-xf7w-r453-m56c","Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq","Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm","Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546","Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574","Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm","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-fvqr-27wr-82fm","Warn: Project is vulnerable to: GHSA-pp57-mqmh-44h7","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-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-6g33-f262-xjp4","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-2m39-62fm-q8r3","Warn: Project is vulnerable to: GHSA-mf6x-7mm4-x2g7","Warn: Project is vulnerable to: GHSA-j44m-qm6p-hp7m","Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9","Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-g7q5-pjjr-gqvp","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","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-17T23:27:24.073Z","repository_id":20713011,"created_at":"2025-08-17T23:27:24.073Z","updated_at":"2025-08-17T23:27:24.073Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271430815,"owners_count":24758379,"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-08-21T02:00:08.990Z","response_time":74,"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":["css","css-modules","elm","elm-lang","webpack","webpack-loader"],"created_at":"2024-09-24T14:20:22.572Z","updated_at":"2025-08-21T05:32:44.658Z","avatar_url":"https://github.com/cultureamp.png","language":"Elm","readme":"# CSS Modules for Elm\n\nA [Webpack][webpack] loader that enables you to reference CSS modules in Elm\nsource files.\n\nHat tip to NoRedInk and its [elm-assets-loader][elm-assets-loader], which\nformed the technical basis for this package.\n\n## Overview\n\nStart with a CSS file that can be imported by Webpack using\n[css-loader][css-loader]:\n\n```css\n.something {\n  ⋮\n}\n\n.anotherThing {\n  ⋮\n}\n```\n\nIn any Elm module, reference this stylesheet and the classes you want to use in\nit:\n\n```elm\nmodule Main exposing (..)\n\nimport CssModules exposing (css)\n\n\nstyles =\n    css \"./stylesheet.css\" -- relative to main Elm source directory\n        { something = \"something\" -- string value should match CSS class name \n        , anotherThing = \"anotherThing\"\n        }\n```\n\nThen use the returned functions to use the class names in your view:\n\n```elm\nview : Html Msg\nview =\n    div\n        [ styles.class .something ]\n        [ text \"this is a div\"]\n```\n\n**Note:** the `.something` syntax may be confusing at first. This is just standard Elm syntax for a function that reaches into a record and returns the value of the `something` key. Because the Elm compiler will only let you reference class names that exist in your CSS Module declaration, you get a bit of type safety to guard against typing mistakes.\n\n## Why does this exist?\n\nWe wanted to use the same style sheets for the standard components in our\napplication (buttons, form fields, etc.) across two different implementations\nof these components ([React][react] and [Elm][elm]). We love the namespacing and\ncomposition features of [CSS Modules][css-modules]; this project seeks to make\nthem usable within Elm views.\n\n**Note:** [elm-css][elm-css] is the de facto standard for writing styles for\nHTML interfaces written in Elm. If you are working on an all-Elm application,\nyou should probably use that.\n\n## How to use\n\nTo get this working, you need to set up a combination of a Webpack loader and\nand Elm package.\n\n### Webpack Loader\n\nAdd the `elm-css-modules-loader` NPM package to your project, then configure\nWebpack to chain it with [elm-webpack-loader][elm-webpack-loader]:\n\n#### Webpack 2+\n\n```javascript\nmodule.exports = {\n  ⋮\n  module: {\n    rules: [\n      {\n        test: /\\.elm$/,\n        use: [\n          {\n            loader: 'elm-css-modules-loader',\n          },\n          {\n            loader: 'elm-webpack',\n          }\n        ],\n      },\n      ⋮\n    ],\n  },\n};\n```\n\n#### Webpack 1.x\n\n```javascript\nmodule.exports = {\n  ⋮\n  module: {\n    loaders: [\n      {\n        test: /\\.elm$/,\n        loaders: [\n          'elm-css-modules-loader',\n          'elm-webpack',\n        ],\n      },\n      ⋮\n    ],\n  },\n};\n```\n\nNote the following configuration options are available for the loader. If you’re\nusing the original version of this package, the defaults should work fine.\n\n`package` – (default: `cultureamp/elm-css-modules-loader`) The Elm package in\nwhich the `CssModule` type is defined. If you forked the Elm package for your\nown development, you’ll need to specify the full package name that you have\nreleased it under with this option.\n\n`module` – (default: `CssModules`) The name of the Elm module in which the\n`tagger` function is defined.\n\n`tagger` – (default: `css`) The name of the Elm factory function that is used\nto declare CssModules in your code.\n\n**Note:** Don't set `noParse` on .elm files. Otherwise, the JavaScript `require`s that this loader adds to your compiled Elm modules won't be processed by Webpack.\n\n### Elm Package\n\nInstall the `cultureamp/elm-css-modules-loader` package in your Elm project,\nthen use the `CssModule` constructor for referencing CSS modules.\n\n## Under the hood\n\nLet’s walk through what happens when this Elm code is processed by Webpack:\n\n```elm\nstyles =\n    css \"./stylesheet.css\"\n        { something = \"something\"\n        , anotherThing = \"anotherThing\"\n        }\n```\n\nThis will be compiled to JavaScript by elm-webpack-loader:\n\n```js\nvar user$project$Styles$styles = A2(\n  cultureamp$elm_css_modules_loader$CssModules$css,\n  './stylesheet.css',\n  {\n    aC: 'something',\n    aD: 'anotherThing'\n  }\n);\n```\n\nelm-css-modules-loader replaces the hard-coded JSON object with a `require` of your stylesheet:\n\n```js\nvar user$project$Styles$styles = A2(\n  cultureamp$elm_css_modules_loader$CssModules$css,\n  './stylesheet.css',\n  {\n    aC: require('./stylesheet.css')[\"something\"],\n    aD: require('./stylesheet.css')[\"anotherThing\"]\n  }\n);\n```\n\nwebpack parses this `require` call, processes the stylesheet with css-loader, and replaces the `require` with a reference to the CSS module:\n\n```js\nvar user$project$Styles$styles = A2(\n  cultureamp$elm_css_modules_loader$CssModules$css,\n  './stylesheet.css',\n  {\n    aC: __webpack_require__(42)[\"something\"],\n    aD: __webpack_require__(42)[\"anotherThing\"]\n  }\n);\n```\n\nThe CSS module loaded by `__webpack_require__(42)` contains the actual class names that your Elm app will now consume:\n\n```js\n42:\nfunction(module, exports) {\n  module.exports = {\n    something: 'something-abc123',\n    anotherThing: 'anotherThing-abc123'\n  };\n}\n```\n\n[css-loader]: https://www.npmjs.com/package/css-loader\n[css-modules]: https://github.com/css-modules/css-modules\n[elm]: http://elm-lang.org\n[elm-assets-loader]: https://github.com/NoRedInk/elm-assets-loader\n[elm-css]: https://github.com/rtfeldman/elm-css\n[elm-webpack-loader]: https://www.npmjs.com/package/elm-webpack-loader\n[react]: https://facebook.github.io/react/\n[webpack]: https://webpack.js.org\n\n## Changelog\n\nOur release history is tracked on the [Github Releases page](https://github.com/cultureamp/elm-css-modules-loader/releases).\n\nNote that the NPM package and the Elm package will have different version numbers, as changes to the Elm API may happen indepently of changes to the NPM API, and Elm does not allow you to bump the version number without changes to the Elm API. When viewing the releases page, NPM releases are tagged with a \"v\" - `v2.1.0`. While Elm releases are tagged with no leading \"v\" - `2.0.3`.\n\nFor release history prior to 2.0.2, you can view our [old CHANGELOG](https://github.com/cultureamp/elm-css-modules-loader/blob/6afcae3f61439f9a0f05cb84bb6a1aea2f1acd81/CHANGELOG.md)\n.\n\n---\n\nElm CSS Modules Loader is maintained by the Front End Capability Team at Culture Amp.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcultureamp%2Felm-css-modules-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcultureamp%2Felm-css-modules-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcultureamp%2Felm-css-modules-loader/lists"}