{"_id":"@abendi/typed-css-modules","name":"@abendi/typed-css-modules","dist-tags":{"latest":"0.8.0"},"versions":{"0.8.0":{"name":"@abendi/typed-css-modules","version":"0.8.0","description":"Creates .d.ts files from CSS Modules .css files","main":"lib/index.js","types":"lib/index.d.ts","scripts":{"clean":"rimraf lib/","build":"npm run clean && tsc && chmod +x lib/cli.js","prettier":"prettier \"*.{md,js,json.yml,yaml}\" \"{src,test}/**/*\"","format":"npm run prettier -- --write","lint":"npm run prettier -- --check","test":"jest","test:watch":"jest --watch","test:ci":"jest --coverage","prepublish":"npm run build","_postinstall":"husky install","prepublishOnly":"pinst --disable","postpublish":"pinst --enable"},"bin":{"tcm":"lib/cli.js"},"repository":{"type":"git","url":"git+https://github.com/abendi/typed-css-modules.git"},"keywords":["css-modules","typescript"],"author":{"name":"quramy"},"license":"MIT","engines":{"node":">=12.0.0"},"dependencies":{"@types/css-modules-loader-core":"^1.1.0","camelcase":"^6.0.0","chalk":"^4.0.0","chokidar":"^3.4.0","css-modules-loader-core":"^1.1.0","glob":"^7.1.2","is-there":"^4.4.2","mkdirp":"^1.0.0","yargs":"^15.4.1"},"devDependencies":{"@types/glob":"7.1.4","@types/jest":"27.0.2","@types/mkdirp":"1.0.2","@types/node":"14.17.18","@types/yargs":"15.0.4","husky":"7.0.2","jest":"27.2.5","pinst":"2.1.6","prettier":"2.4.1","pretty-quick":"3.1.1","ts-jest":"27.0.5","typescript":"4.4.3"},"jest":{"transform":{"^.+\\.ts$":"ts-jest"},"testRegex":"(test/.*|(src/.*\\.test))\\.ts$","testPathIgnorePatterns":["/node_modules/","\\.d\\.ts$","lib/","example/","coverage/"],"moduleFileExtensions":["js","ts","json"]},"gitHead":"a9030402c10163127a249e341821768cd841b042","bugs":{"url":"https://github.com/abendi/typed-css-modules/issues"},"homepage":"https://github.com/abendi/typed-css-modules#readme","_id":"@abendi/typed-css-modules@0.8.0","_nodeVersion":"14.17.6","_npmVersion":"6.14.15","dist":{"integrity":"sha512-jhVZg7a8YFADxn3juOQSKKVgExp29uZHuW8yussbNJ2ZNnhx/AQpOeTwUKNEQQJxQtWX2uZkHVNqbq4wXX2taA==","shasum":"25db43924ead81ef716e92046a8f78b57651e241","tarball":"https://registry.npmjs.org/@abendi/typed-css-modules/-/typed-css-modules-0.8.0.tgz","fileCount":24,"unpackedSize":47075,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrfTawOXgDXW7NmzYGZc7NDdSASMp4PBPoW6tWisYKTQIhAL3lGQByq/bcYalELpFc/vyekWpVCQOC+hohA3gjVzq0"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXIXsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmot7RAAiCjMd7hcYsrR8x1ZhMYlbUVN/AzqmOy7xPKJNRgL3nxR16N8\r\nDEieQCXyidUiqbyjETW38Dq73kXiGuYaVJv2iyVlbZzPwbJUjRVL2d+tH7YX\r\nDOUbYG3I1Y+qaqziYzj69LEBXTpRUQ02ilGv6Fwl2cL5tbq2Ruaeof4x4iNU\r\nH7SXBL+BwbAyBv9Pbo8PIUXqhPiqpujjeCougaKDzzgpsvw5Ng8RJCULERyZ\r\n9Pj6/aZJRxIjXMK5BDSliXahUtkCq7VVmD7ZdoAfDqKbBdo08CiUECqFAFGo\r\n5fnWDR1jj8eBIa7COTS/Fr1xh0N9lfxd78dAbsU13hHh4SF6Mz2PX2rPYk98\r\nL/7cuXNYvcnWLGNJAQOZ3QXphzyyz8+iZk6WhKh2PAzrw8En9ODGoR/bpCWY\r\nDUJCXvxFwcK5xJaVFfUySS4X+ZmyCWizlibjZxdbneZVnnyfokXpqKShI8XR\r\nAYajTQ0wwuzlMMDR49vwL9ifbBpakgMTQGnyTQ7wvG5MvET28I3gfvWHklqt\r\nESdktk5mwJ6IK0W3trKdT3LnTx74s59OIC2qwsCl3d5zPDBMfhu0/5vbJIxP\r\nW3S2LoqgStxuoq1N1SWBIhPhYcCBec5xQc1lEOep7hEqF0vdVvSLfwYdF23V\r\nOaT3RTo459dX7Sxe9YqNvces36XeJ7b6teY=\r\n=pMwo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"abendi","email":"arvobendi@hotmail.com"},"directories":{},"maintainers":[{"name":"abendi","email":"arvobendi@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/typed-css-modules_0.8.0_1650230763916_0.36786632830607546"},"_hasShrinkwrap":false}},"time":{"created":"2022-04-17T21:26:03.856Z","0.8.0":"2022-04-17T21:26:04.302Z","modified":"2022-04-17T21:26:04.438Z"},"maintainers":[{"name":"abendi","email":"arvobendi@hotmail.com"}],"description":"Creates .d.ts files from CSS Modules .css files","homepage":"https://github.com/abendi/typed-css-modules#readme","keywords":["css-modules","typescript"],"repository":{"type":"git","url":"git+https://github.com/abendi/typed-css-modules.git"},"author":{"name":"quramy"},"bugs":{"url":"https://github.com/abendi/typed-css-modules/issues"},"license":"MIT","readme":"# typed-css-modules\n\nCreates TypeScript definition files from [CSS Modules](https://github.com/css-modules/css-modules) .css files.\n\n> NOTE: this is fork of https://github.com/Quramy/typed-css-modules\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(`<div class=\"${styles.myClass}\"></div>`);\nconsole.log(`<div style=\"color: ${styles.primary}\"></div>`);\n```\n\n## CLI\n\n```sh\nnpm install -g abendi/typed-css-modules\n```\n\nAnd exec `tcm <input directory>` 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 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 the default, this tool searches `**/*.css` files under `<input directory>`.\nIf you can customize 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/**/*.icss' .\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 varibale 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## 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 => {\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 create 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.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) => 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 file.\n\n#### `writeFile(postprocessor) => 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 => `// Generated automatically, do not edit\\n${definition}`);\n  ```\n\n#### `tokens`\n\nAn array of tokens retrieved from 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 expression.\n\ne.g.\n\n```ts\nexport const myClass: string;\n```\n\n#### `messageList`\n\nAn array of messages. The messages contains 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","readmeFilename":"README.md"}