{"id":14990560,"url":"https://github.com/dropbox/typed-css-modules-webpack-plugin","last_synced_at":"2025-04-13T06:40:21.628Z","repository":{"id":33693126,"uuid":"160397433","full_name":"dropbox/typed-css-modules-webpack-plugin","owner":"dropbox","description":"Generate TypeScript typing declarations for your TypeScript + CSS Modules project.","archived":false,"fork":false,"pushed_at":"2023-08-31T14:31:32.000Z","size":880,"stargazers_count":69,"open_issues_count":21,"forks_count":16,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-03-24T11:06:04.477Z","etag":null,"topics":["css","css-modules","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dropbox.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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}},"created_at":"2018-12-04T17:53:21.000Z","updated_at":"2024-02-23T19:56:02.000Z","dependencies_parsed_at":"2024-06-18T15:25:41.258Z","dependency_job_id":"59cf5e55-7b12-4050-bcb1-d946a213441e","html_url":"https://github.com/dropbox/typed-css-modules-webpack-plugin","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/dropbox%2Ftyped-css-modules-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dropbox%2Ftyped-css-modules-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dropbox%2Ftyped-css-modules-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dropbox%2Ftyped-css-modules-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dropbox","download_url":"https://codeload.github.com/dropbox/typed-css-modules-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248675434,"owners_count":21143763,"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","typescript","webpack"],"created_at":"2024-09-24T14:20:22.727Z","updated_at":"2025-04-13T06:40:21.608Z","avatar_url":"https://github.com/dropbox.png","language":"TypeScript","readme":"⚠️ **This project is no longer maintained! We recommend you use a separate tool to build type definitions from the CSS modules.**\n\n* * *\n\n# typed-css-modules-webpack-plugin ![Node.js CI](https://github.com/dropbox/typed-css-modules-webpack-plugin/workflows/Node.js%20CI/badge.svg)\n\nThis is a Webpack plugin to generate TypeScript typing declarations for a TypeScript + CSS Modules\nproject. The plugin generates `.css.d.ts` file co-located with the corresponding `.css` file before\ncompilation phase so all CSS imports in TypeScript source code type check.\n\nThis plugin is different from [typings-for-css-modules-loader][1] and [dts-css-modules-loader][2] in\nthat it generates the typings **before** loaders process source files during the compilation. That\nmeans your TypeScript loader will type check the **up-to-date** typing definitions of your CSS modules.\n\n# Installation\n\n```\nyarn add --dev typed-css-modules-webpack-plugin\n# Or if you use npm\nnpm install --save-dev typed-css-modules-webpack-plugin\n```\n\n# Usage\n\nA minimal TypeScript + CSS Modules Webpack configuration would look like this:\n\n```javascript\nconst path = require('path');\nconst {TypedCssModulesPlugin} = require('typed-css-modules-webpack-plugin');\n\nmodule.exports = {\n  entry: './src/index.ts',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.tsx?$/,\n        loader: 'ts-loader',\n      },\n      {\n        test: /\\.css$/,\n        use: [\n          'style-loader',\n          // Use CSS Modules\n          {\n            loader: 'css-loader',\n            options: {\n              modules: true,\n            },\n          },\n        ],\n      },\n    ],\n  },\n  // Generate typing declarations for all CSS files under `src/` directory.\n  plugins: [\n    new TypedCssModulesPlugin({\n      globPattern: 'src/**/*.css',\n    }),\n  ],\n};\n```\n\nOther than emitting the JS bundle, the build would produce the side-effect of generating `.css.d.ts`\nfiles for all `.css` files in `src/` directory.\n\n# Options\n\nThe available options for the plugin are:\n\n## `globPattern: string`\n\nThis is the glob pattern used to match CSS Modules in the project. The plugin only generates `.d.ts`\nfor the matching CSS files. See [node-glob](https://github.com/isaacs/node-glob) for the pattern\nsyntax.\n\n## `postCssPlugins?: Plugin[] | (defaults: Plugin[]) =\u003e Plugin[]`\n\nThis field is optional. If specified, the plugin would use the specified PostCSS plugin to transform\nCSS files instead of the default\n[`css-modules-loader-core`](https://github.com/css-modules/css-modules-loader-core) plugins.\n\nIf a function is supplied, it will be called with the default plugin list. This is useful if you\nchain a `postcss-loader` before `css-loader` for some custom transformations. For example:\n\n```javascript\n// In CSS rules\n[\n  // ...\n  {\n    loader: 'css-loader',\n    options: {\n      modules: true,\n      importLoaders: 1,\n    },\n  },\n  // Some PostCSS transformations applied before css-loader\n  {\n    loader: 'postcss-loader',\n    options: {\n      plugins: () =\u003e [require('postcss-theme')({themePath: './theme'})],\n    },\n  },\n];\n```\n\nNow to ensure CSS Modules recognize the custom syntax, we can inject the same transform in the\nplugin options:\n\n```javascript\nnew TypedCSSModulesPlugin({\n  globPattern: '**/*.css',\n  postCssPlugins: defaultPlugins =\u003e [\n    require('postcss-theme')({themePath: './theme'}),\n    ...defaultPlugins,\n  ],\n});\n```\n\n## `camelCase?: boolean`\n\nThis field is optional. When set to `true` the CSS field definitions will be emitted using camel case naming conventions. When `undefined` or `false` the CSS field definitions will be emitted verbatim.\n\n## `rootDir?: string`\n\nThis field is optional. Project root directory (default: `process.cwd()`).\n\n## `searchDir?: string`\n\nThis field is optional. Directory which includes target `*.css` files (default: `'./'`).\n\n## `outDir?: string`\n\nThis field is optional. Output directory (default: `option.searchDir`).\n\n# License\n\nCopyright (c) 2018 Dropbox, Inc.\n\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use this file except in\ncompliance with the License. You may obtain a copy of the License at\n\n```\nhttp://www.apache.org/licenses/LICENSE-2.0\n```\n\nUnless required by applicable law or agreed to in writing, software distributed under the License is\ndistributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\nimplied. See the License for the specific language governing permissions and limitations under the\nLicense.\n\n[1]: https://github.com/Jimdo/typings-for-css-modules-loader\n[2]: https://github.com/Megaputer/dts-css-modules-loader\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdropbox%2Ftyped-css-modules-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdropbox%2Ftyped-css-modules-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdropbox%2Ftyped-css-modules-webpack-plugin/lists"}