{"id":15250455,"url":"https://github.com/asv2001/angular-css-modules-loader","last_synced_at":"2026-01-03T21:03:36.052Z","repository":{"id":57178228,"uuid":"153897497","full_name":"asv2001/angular-css-modules-loader","owner":"asv2001","description":"CSS modules + Angular loader for webpack","archived":false,"fork":false,"pushed_at":"2018-10-22T19:32:20.000Z","size":12,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-25T04:17:45.180Z","etag":null,"topics":["angular","angular2","angular4","angular5","angular6","angular7","css-module","css-modules","loader","typescript","webpack","webpack-contrib","webpack-loader","webpack4"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/angular-css-modules-loader","language":"TypeScript","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/asv2001.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}},"created_at":"2018-10-20T11:13:04.000Z","updated_at":"2023-03-25T20:58:20.000Z","dependencies_parsed_at":"2022-09-03T13:42:10.385Z","dependency_job_id":null,"html_url":"https://github.com/asv2001/angular-css-modules-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/asv2001%2Fangular-css-modules-loader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asv2001%2Fangular-css-modules-loader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asv2001%2Fangular-css-modules-loader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asv2001%2Fangular-css-modules-loader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asv2001","download_url":"https://codeload.github.com/asv2001/angular-css-modules-loader/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243885889,"owners_count":20363644,"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":["angular","angular2","angular4","angular5","angular6","angular7","css-module","css-modules","loader","typescript","webpack","webpack-contrib","webpack-loader","webpack4"],"created_at":"2024-09-29T16:04:55.895Z","updated_at":"2026-01-03T21:03:31.020Z","avatar_url":"https://github.com/asv2001.png","language":"TypeScript","readme":"# angular-css-modules-loader\nCSS modules support for Angular\n\n# Installation\n```\nnpm i --save-dev angular-css-modules-loader\n```\n\n# Usage\nAdd loaders for your `.component.ts` files in `webpack.config.js` rules-section like follows:\n```\n            {\n                test: /\\.tsx?$/,\n                use: [\n                    \"ts-loader?transpileOnly=true\",\n                    \"angular-css-modules-loader\"\n                    \"angular2-template-loader\"\n                ],\n                include: /\\.component\\.ts/\n            },\n\n...\n\n            {\n                test: /\\.css$/,\n                use: [\n                    MiniCssExtractPlugin.loader,\n                    {\n                        loader: \"css-loader\",\n                        options: {\n                            modules: true,\n                            localIdentName: \"[name]__[local]--[hash:base64:5]\"\n                        }\n                    }\n                ],\n                include: /\\.component\\.css/,\n                exclude: /node_modules/,\n            },\n...\n            {\n                test: /\\.scss$/,\n                use: [\n                    MiniCssExtractPlugin.loader,\n                    {\n                        loader: \"css-loader\",\n                        options: {\n                            modules: true,\n                            localIdentName: \"[name]__[local]--[hash:base64:5]\"\n                        }\n                    },\n                    {\n                        loader: \"sass-loader\",\n                        options: {\n                            sourceMap: true\n                        }\n                    }\n                ],\n                include: /\\.component\\.scss/,\n                exclude: /node_modules/,\n            },\n\n```\n\n# How it works?\n\nAll the CSS-module requires and template-requires are groupped together. Loader will replace all occurencies of the `$some-class-name` with CSS-modules' `some-class-name`-match.\n\n\n# Example\n\nIf your angular component structure looks similar to this:\n\nlogin.component.scss:\n\n```\n.login-row + .password-row {\n    margin-top: 10px;\n}\n```\n\nlogin.component.html:\n\n```\n...\n\u003cdiv class=\"row $login-row\"\u003e\n...\n\u003c/div\u003e\n\u003cdiv class=\"row $password-row\"\u003e\n...\n\u003c/div\u003e\n...\n```\n\nlogin.component.ts:\n```\n@Component({\n    selector: \"login\",\n    styleUrls: [\"./login.component.scss\"],\n    templateUrl: \"./login.component.html\",\n})\nexport class LoginComponent {\n    ...\n}\n```\n\nThe transformed `login.component.ts` will look like this:\n\n```\n/* Begin: Replacer function */\ninterface ICssModulesParams {\n    prefix: string;\n    suffix: string;\n}\n\nfunction __escapeRegExp(value: string): string {\n    return value.replace(/[-\\/\\\\^$*+?.()|[\\]{}]/m, \"\\\\$\u0026\");\n}\n\nfunction __replaceCssModules({ prefix, suffix }: ICssModulesParams) {\n    return function (template: string, styles: object[]): string {\n        let result: string = template;\n        styles.forEach((style: object): void =\u003e {\n            for (const [key, value] of Object.entries(style)) {\n                const matchRegExp: RegExp = new RegExp(`${__escapeRegExp(prefix)}\\\\b${__escapeRegExp(key)}\\\\b${__escapeRegExp(suffix)}`, \"gm\");\n                result = result.replace(matchRegExp, value);\n            }\n        });\n        return result;\n    };\n}\n/* End: Replacer function */\n\n....\n\n@Component({\n    selector: \"login\",\n    template: __replaceCssModules({\"prefix\":\"$\",\"suffix\":\"\",unusedHtmlClasses:false,unusedSelectors:false})(require('./login.component.html'), [require('./login.component.scss')]),\n})\nexport class LoginComponent {\n    ...\n}\n```\n\n\nThe replaced `template` will be transformed to something like this:\n\n```\n...\n\u003cdiv class=\"row login-component__login-row--3xPhd\"\u003e\n...\n\u003c/div\u003e\n\u003cdiv class=\"row login-component__password-row--45j3f\"\u003e\n...\n\u003c/div\u003e\n...\n```\n\n\nYou can manage the transformation by providing options to a loader. The following options are available:\n\n| Option            | Type    | Default | Description                 |\n|-------------------|---------|---------|-----------------------------|\n| prefix            | string  | \"$\"     | Class prefix                |\n| suffix            | string  | \"\"      | Class suffix                |\n| unusedHtmlClasses | boolean | false   | Report unused HTML classes  |\n| unusedSelectors   | boolean | false   | Report unused CSS selectors |\n\n\n```\n\"angular-css-modules-loader?prefix=$\u0026suffix=$\u0026unusedHtmlClasses=true\u0026unusedSelectors=true\"\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasv2001%2Fangular-css-modules-loader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasv2001%2Fangular-css-modules-loader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasv2001%2Fangular-css-modules-loader/lists"}