{"id":18302035,"url":"https://github.com/thread/css-modules-elm-types-loader","last_synced_at":"2025-04-05T14:31:22.286Z","repository":{"id":51550949,"uuid":"131829514","full_name":"thread/css-modules-elm-types-loader","owner":"thread","description":"A webpack loader that takes CSS modules and produces an Elm module with a type alias for the classes defined.","archived":true,"fork":false,"pushed_at":"2021-05-11T08:54:05.000Z","size":1211,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-03-28T09:09:27.532Z","etag":null,"topics":[],"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/thread.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":"2018-05-02T09:35:58.000Z","updated_at":"2024-05-14T13:19:26.000Z","dependencies_parsed_at":"2022-08-21T17:20:13.873Z","dependency_job_id":null,"html_url":"https://github.com/thread/css-modules-elm-types-loader","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/thread%2Fcss-modules-elm-types-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thread%2Fcss-modules-elm-types-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thread%2Fcss-modules-elm-types-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thread%2Fcss-modules-elm-types-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thread","download_url":"https://codeload.github.com/thread/css-modules-elm-types-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247352603,"owners_count":20925299,"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":[],"created_at":"2024-11-05T15:17:52.533Z","updated_at":"2025-04-05T14:31:19.584Z","avatar_url":"https://github.com/thread.png","language":"JavaScript","readme":"# css-modules-elm-types-loader\n\nA webpack loader that takes CSS modules and produces an Elm module with a type alias for the classes defined.\n\n_This module was inspired by and taken from the [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader), so credit for the approach and codebase goes to that project. We've updated the code to output Elm based files, rather than TypeScript._\n\n## Usage\n\n```\nyarn add @teamthread/css-modules-elm-types-loader\n```\n\nThis module replaces the `css-loader`, so you should update your webpack config:\n\n```js\n// before\nloader: 'css-loader'\n// after\nloader: '@teamthread/css-modules-elm-types-loader'\n```\n\n## File naming\n\nGiven a file with this CSS at the path shown:\n\n```css\n/* path: /app/LikedItems/liked_items.module.scss */\n.likedItems {\n  color: red\n}\n\n.likedItemsHeader {\n  color: blue\n}\n```\n\nThis plugin will generate the following Elm file:\n\n```elm\n-- /app/LikedItems/Styles.elm\n\nmodule LikedItems.Styles exposing (Styles)\n\ntype alias Styles = {\n    likedItems: String\n    ,likedItemsHeader: String\n}\n```\n\nThis has been created to suit how we're loading our CSS with JavaScript and applying it to Elm (via flags). We'd love to make this plugin more generic and useful to all; so please feel free to open an issue with thoughts on how we could improve this.\n\n\n## Options\n\nAny loader options are passed through to `css-loader`.\n\nThe options that this module supports are:\n\n- `runElmFormat [default: false]` this means the resulting Elm files will be run through elm-format. If this is turned on, it is expected that `yarn elm-format` will work, so ensure that `elm-format` is installed to your project.\n\n## Changelog\n\n__2 May 2018__\n\n- First release.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthread%2Fcss-modules-elm-types-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthread%2Fcss-modules-elm-types-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthread%2Fcss-modules-elm-types-loader/lists"}