{"id":14990535,"url":"https://github.com/quramy/typed-css-modules","last_synced_at":"2025-04-27T03:56:59.227Z","repository":{"id":3657952,"uuid":"50425317","full_name":"Quramy/typed-css-modules","owner":"Quramy","description":"Creates .d.ts files from CSS Modules .css files","archived":false,"fork":false,"pushed_at":"2025-04-26T14:38:39.000Z","size":1444,"stargazers_count":1083,"open_issues_count":58,"forks_count":70,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-27T03:56:54.473Z","etag":null,"topics":["css-modules","typescript"],"latest_commit_sha":null,"homepage":"","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/Quramy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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":"2016-01-26T11:47:21.000Z","updated_at":"2025-04-26T14:38:05.000Z","dependencies_parsed_at":"2023-01-13T12:40:34.648Z","dependency_job_id":"fd73ad97-c7aa-40ff-a795-1b2aa93fe3e4","html_url":"https://github.com/Quramy/typed-css-modules","commit_stats":{"total_commits":464,"total_committers":33,"mean_commits":14.06060606060606,"dds":0.5495689655172413,"last_synced_commit":"2e7f26d8da0bc9382277c86e5f4db139ac334760"},"previous_names":[],"tags_count":45,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quramy%2Ftyped-css-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quramy%2Ftyped-css-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quramy%2Ftyped-css-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Quramy%2Ftyped-css-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Quramy","download_url":"https://codeload.github.com/Quramy/typed-css-modules/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251085194,"owners_count":21533841,"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-modules","typescript"],"created_at":"2024-09-24T14:20:18.071Z","updated_at":"2025-04-27T03:56:59.207Z","avatar_url":"https://github.com/Quramy.png","language":"TypeScript","readme":"# typed-css-modules [![github actions](https://github.com/Quramy/typed-css-modules/workflows/build/badge.svg)](https://github.com/Quramy/typed-css-modules/actions) [![npm version](https://badge.fury.io/js/typed-css-modules.svg)](http://badge.fury.io/js/typed-css-modules)\n\nCreates TypeScript definition files from [CSS Modules](https://github.com/css-modules/css-modules) .css files.\n\nIf you have the following css,\n\n```css\n/* styles.css */\n\n@value primary: red;\n\n.myClass {\n  color: primary;\n}\n```\n\ntyped-css-modules creates the following .d.ts files from the above css:\n\n```ts\n/* styles.css.d.ts */\ndeclare const styles: {\n  readonly primary: string;\n  readonly myClass: string;\n};\nexport = styles;\n```\n\nSo, you can import CSS modules' class or variable into your TypeScript sources:\n\n```ts\n/* app.ts */\nimport styles from './styles.css';\nconsole.log(`\u003cdiv class=\"${styles.myClass}\"\u003e\u003c/div\u003e`);\nconsole.log(`\u003cdiv style=\"color: ${styles.primary}\"\u003e\u003c/div\u003e`);\n```\n\n## CLI\n\n```sh\nnpm install -g typed-css-modules\n```\n\nAnd exec `tcm \u003cinput directory\u003e` command.\nFor example, if you have .css files under `src` directory, exec the following:\n\n```sh\ntcm src\n```\n\nThen, this creates `*.css.d.ts` files under the directory which has the original .css file.\n\n```text\n(your project root)\n- src/\n    | myStyle.css\n    | myStyle.css.d.ts [created]\n```\n\n#### output directory\n\nUse `-o` or `--outDir` option.\n\nFor example:\n\n```sh\ntcm -o dist src\n```\n\n```text\n(your project root)\n- src/\n    | myStyle.css\n- dist/\n    | myStyle.css.d.ts [created]\n```\n\n#### file name pattern\n\nBy default, this tool searches `**/*.css` files under `\u003cinput directory\u003e`.\nIf you can customize the glob pattern, you can use `--pattern` or `-p` option.\nNote the quotes around the glob to `-p` (they are required, so that your shell does not perform the expansion).\n\n```sh\ntcm -p 'src/**/*.css' .\n```\n\n#### watch\n\nWith `-w` or `--watch`, this CLI watches files in the input directory.\n\n#### validating type files\n\nWith `-l` or `--listDifferent`, list any files that are different than those that would be generated.\nIf any are different, exit with a status code 1.\n\n#### camelize CSS token\n\nWith `-c` or `--camelCase`, kebab-cased CSS classes(such as `.my-class {...}`) are exported as camelized TypeScript variable name(`export const myClass: string`).\n\nYou can pass `--camelCase dashes` to only camelize dashes in the class name. Since version `0.27.1` in the\nwebpack `css-loader`. This will keep upperCase class names intact, e.g.:\n\n```css\n.SomeComponent {\n  height: 10px;\n}\n```\n\nbecomes\n\n```typescript\ndeclare const styles: {\n  readonly SomeComponent: string;\n};\nexport = styles;\n```\n\nSee also [webpack css-loader's camelCase option](https://github.com/webpack/css-loader#camelcase).\n\n#### named exports (enable tree shaking)\n\nWith `-e` or `--namedExports`, types are exported as named exports as opposed to default exports.\nThis enables support for the `namedExports` css-loader feature, required for webpack to tree shake the final CSS (learn more [here](https://webpack.js.org/loaders/css-loader/#namedexport)).\n\nUse this option in combination with https://webpack.js.org/loaders/css-loader/#namedexport and https://webpack.js.org/loaders/style-loader/#namedexport (if you use `style-loader`).\n\nWhen this option is enabled, the type definition changes to support named exports.\n\n_NOTE: this option enables camelcase by default._\n\n```css\n.SomeComponent {\n  height: 10px;\n}\n```\n\n**Standard output:**\n\n```typescript\ndeclare const styles: {\n  readonly SomeComponent: string;\n};\nexport = styles;\n```\n\n**Named exports output:**\n\n```typescript\nexport const someComponent: string;\n```\n\n#### arbitrary file extensions\n\nWith `-a` or `--allowArbitraryExtensions`, output filenames will be compatible with the \"arbitrary file extensions\" feature that was introduce in TypeScript 5.0. See [the docs](https://www.typescriptlang.org/tsconfig#allowArbitraryExtensions) for more info.\n\nIn essence, the `*.css.d.ts` extension now becomes `*.d.css.ts` so that you can import CSS modules in projects using ESM module resolution.\n\n## API\n\n```sh\nnpm install typed-css-modules\n```\n\n```js\nimport DtsCreator from 'typed-css-modules';\nlet creator = new DtsCreator();\ncreator.create('src/style.css').then(content =\u003e {\n  console.log(content.tokens); // ['myClass']\n  console.log(content.formatted); // 'export const myClass: string;'\n  content.writeFile(); // writes this content to \"src/style.css.d.ts\"\n});\n```\n\n### class DtsCreator\n\nDtsCreator instance processes the input CSS and creates TypeScript definition contents.\n\n#### `new DtsCreator(option)`\n\nYou can set the following options:\n\n- `option.rootDir`: Project root directory(default: `process.cwd()`).\n- `option.searchDir`: Directory which includes target `*.css` files(default: `'./'`).\n- `option.outDir`: Output directory(default: `option.searchDir`).\n- `option.camelCase`: Camelize CSS class tokens.\n- `option.namedExports`: Use named exports as opposed to default exports to enable tree shaking. Requires `import * as style from './file.module.css';` (default: `false`)\n- `option.allowArbitraryExtensions`: Output filenames that will be compatible with the \"arbitrary file extensions\" TypeScript feature\n- `option.EOL`: EOL (end of line) for the generated `d.ts` files. Possible values `'\\n'` or `'\\r\\n'`(default: `os.EOL`).\n\n#### `create(filepath, contents) =\u003e Promise(dtsContent)`\n\nReturns `DtsContent` instance.\n\n- `filepath`: path of target .css file.\n- `contents`(optional): the CSS content of the `filepath`. If set, DtsCreator uses the contents instead of the original contents of the `filepath`.\n\n### class DtsContent\n\nDtsContent instance has `*.d.ts` content, final output path, and function to write the file.\n\n#### `writeFile(postprocessor) =\u003e Promise(dtsContent)`\n\nWrites the DtsContent instance's content to a file. Returns the DtsContent instance.\n\n- `postprocessor` (optional): a function that takes the formatted definition string and returns a modified string that will be the final content written to the file.\n\n  You could use this, for example, to pass generated definitions through a formatter like Prettier, or to add a comment to the top of generated files:\n\n  ```js\n  dtsContent.writeFile(definition =\u003e `// Generated automatically, do not edit\\n${definition}`);\n  ```\n\n#### `tokens`\n\nAn array of tokens is retrieved from the input CSS file.\ne.g. `['myClass']`\n\n#### `contents`\n\nAn array of TypeScript definition expressions.\ne.g. `['export const myClass: string;']`.\n\n#### `formatted`\n\nA string of TypeScript definition expressions.\n\ne.g.\n\n```ts\nexport const myClass: string;\n```\n\n#### `messageList`\n\nAn array of messages. The messages contain invalid token information.\ne.g. `['my-class is not valid TypeScript variable name.']`.\n\n#### `outputFilePath`\n\nFinal output file path.\n\n## Remarks\n\nIf your input CSS file has the following class names, these invalid tokens are not written to output `.d.ts` file.\n\n```css\n/* TypeScript reserved word */\n.while {\n  color: red;\n}\n\n/* invalid TypeScript variable */\n/* If camelCase option is set, this token will be converted to 'myClass' */\n.my-class {\n  color: red;\n}\n\n/* it's ok */\n.myClass {\n  color: red;\n}\n```\n\n## Example\n\nThere is a minimum example in this repository `example` folder. Clone this repository and run `cd example; npm i; npm start`.\n\nOr please see [https://github.com/Quramy/typescript-css-modules-demo](https://github.com/Quramy/typescript-css-modules-demo). It's a working demonstration of CSS Modules with React and TypeScript.\n\n## License\n\nThis software is released under the MIT License, see LICENSE.txt.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquramy%2Ftyped-css-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fquramy%2Ftyped-css-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fquramy%2Ftyped-css-modules/lists"}