{"id":15059750,"url":"https://github.com/zgreen/postcss-elm-modules","last_synced_at":"2025-04-10T05:41:43.025Z","repository":{"id":46933681,"uuid":"96109921","full_name":"zgreen/postcss-elm-modules","owner":"zgreen","description":"Transpile CSS modules to Elm.","archived":false,"fork":false,"pushed_at":"2022-12-06T21:44:06.000Z","size":118,"stargazers_count":8,"open_issues_count":20,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T06:54:38.646Z","etag":null,"topics":["css","css-modules","elm","postcss","postcss-plugin"],"latest_commit_sha":null,"homepage":null,"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/zgreen.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":"2017-07-03T12:45:18.000Z","updated_at":"2025-02-03T08:24:15.000Z","dependencies_parsed_at":"2023-01-24T11:15:56.561Z","dependency_job_id":null,"html_url":"https://github.com/zgreen/postcss-elm-modules","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zgreen%2Fpostcss-elm-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zgreen%2Fpostcss-elm-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zgreen%2Fpostcss-elm-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zgreen%2Fpostcss-elm-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zgreen","download_url":"https://codeload.github.com/zgreen/postcss-elm-modules/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248166268,"owners_count":21058475,"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":["css","css-modules","elm","postcss","postcss-plugin"],"created_at":"2024-09-24T22:47:16.417Z","updated_at":"2025-04-10T05:41:43.001Z","avatar_url":"https://github.com/zgreen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PostCSS Elm Modules\n\n![Travis build status](https://travis-ci.org/zgreen/postcss-elm-modules.svg?branch=master)\n\nTranspile [CSS modules](https://github.com/css-modules/css-modules) to [Elm](http://elm-lang.org/).\n\nThis plugin is useable, but should still be considered a work-in-progress. If you find a bug or have a question, file an issue!\n\n## Install\n```bash\nnpm install --save-dev postcss-elm-modules\n```\nor\n```bash\nyarn add -D postcss-elm-modules\n```\n\n## What does this plugin do?\nThis plugin creates valid Elm modules from CSS modules.\n\nFor example, consider the following CSS module:\n\n### `example.css`\n```css\n.foo {\n  color: tomato\n}\n\n.bar {\n  color: gold\n}\n```\n\nThis plugin will then create an Elm module based on `example.css`, containing a record of the selectors and their locally-scoped versions:\n\n### `Styles.elm`\n\n```elm\n-- Elm CSS Module, generated by postcss-elm-modules\nmodule Styles exposing (styles)\n\n\nstyles =\n    { foo = \"file__foo---2-9NY\"\n    , bar = \"file__bar---7FSOM\"\n    }\n```\n\nYou can then use these selectors much as you would when using CSS modules in JavaScript:\n\n### `Main.elm`\n\n```elm\nmodule Main exposing (..)\n\nimport Html exposing (..)\nimport Html.Attributes exposing (..)\nimport Styles exposing (styles)\n\nmain =\n    h1 [ class (styles.foo ++ \" \" ++ styles.bar) ] [ text \"Hello, World.\" ]\n```\n\n## Plugin arguments\n\nThis plugin takes a single object as an argument, with the following valid properties:\n\n### `cssModules: Object\u003cbool, string\u003e`\n\n- `cssModules.enabled: bool` Enable CSS modules. Default `true`.\n- `cssModules.scopePattern: string` The scoping pattern to use. Default `'[name]__[local]---[hash:base64:5]'`.\n\n### `dir: string`\n\nDirectory where the Elm module will be written. Default `''`.\n\n### `log: bool`\n\nLog the output to console. Default `true`.\n\n### `moduleName: string`\n\nThe name of the Elm module to write. Default `'styles'`.\n\n#### Example PostCSS config\n\n```js\nmodule.exports = {\n  plugins: [require('postcss-elm-modules')({\n    cssModules: {\n      enabled: true,\n      scopePattern: '[name]__[local]---[hash:base64:5]'\n    },\n    dir: '',\n    log: true,\n    moduleName: 'styles'\n  })]\n}\n```\n\n## atRule arguments\n\nYou may optionally set the `moduleName` and `dir` inline, using an atRule. For example:\n\n```css\n@elmModule Foo src;\n.foo {\n  color: tomato\n}\n\n.bar {\n  color: gold\n}\n```\n\nThis will write an Elm module `Foo.elm` at directory `src/`.\n\n## Try it out.\n\nAn example is available in this repo. Use the command `yarn example` or `npm run example` to try it out.\n\n## Justification\n\nIf you prefer authoring your styles in CSS rather than in Elm, and if you prefer the scoped selector approach offered by CSS Modules, consider giving this plugin a try.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzgreen%2Fpostcss-elm-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzgreen%2Fpostcss-elm-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzgreen%2Fpostcss-elm-modules/lists"}