{"_id":"@beisen/typed-css-modules","_rev":"5-c1e2f286d43f262d5c7fafafb98ca009","name":"@beisen/typed-css-modules","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@beisen/typed-css-modules","version":"1.0.0","description":"Creates .d.ts files from CSS Modules .css files","main":"index.js","scripts":{"build":"babel -d lib src","test":"jest","test:watch":"jest --watch","test:ci":"jest --coverage","prepublish":"npm run build"},"bin":{"tcm":"lib/cli.js"},"repository":{"type":"git","url":"git+https://github.com/Quramy/typed-css-modules.git"},"keywords":["css-modules","typescript"],"author":{"name":"quramy"},"license":"MIT","dependencies":{"camelcase":"^4.1.0","chalk":"^2.1.0","chokidar":"^2.1.2","css-modules-loader-core":"^1.1.0","glob":"^7.1.2","is-there":"^4.4.2","mkdirp":"^0.5.1","yargs":"^8.0.2"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-env":"^2.4.1","babel-jest":"^22.4.3","jest":"^23.6.0","regenerator-runtime":"^0.11.1"},"jest":{"transform":{}},"bugs":{"url":"https://github.com/Quramy/typed-css-modules/issues"},"homepage":"https://github.com/Quramy/typed-css-modules#readme","_id":"@beisen/typed-css-modules@1.0.0","_nodeVersion":"8.10.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-wWhxVPHH6hQCMJ59A4eeWsx8thhvy54RNJjFYH6WZOi2v3gle/qOBOhIQGE6Ioz8GJ0cGLgzyPprybGocvU5AA==","shasum":"343b32d87e63b3b63d412a7987d7c7b5609d09f6","tarball":"https://registry.npmjs.org/@beisen/typed-css-modules/-/typed-css-modules-1.0.0.tgz","fileCount":22,"unpackedSize":29255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc05baCRA9TVsSAnZWagAAy6IP/iqVEBOkGS236rqrAt8x\n9UyyqSYkVduEKcFpmSKaBgkoKRqAQjd+G0ufsdj2AP9vupzaiBYsLm1z7DGt\nqbmBmSZdWqYPQnkzZXaoRr7Q50W70VWOaMvC+lOazPrcvpAQRqmjGeTI1eKN\nOrjlxDm+vlAJIEBB4phb4LcTWV5ACE6TP9kXNXKFpqzSB7sqAvSzE9TpQwLA\nMsDwnwTQBt7kuIGTM9KTwHlayeQc5Sofn7mO5ifg4bB1w2Q/52h7qK62yzrh\n0oJPZCjUQMvJiMrf+GXocrUMPnyq9XbmrEEwcNhnFoCSKOu2700EkCTRc9Oy\nMfAfWuGLCpBoV0SyYQNLWkkySkF25udQTLNX0P+We7a/KfS9TQ2F6keDuTDp\nWQ3Vcjzvlnej+tYRAkDqtGjSu1iKvCeLVwdnmcUziQSJ6D9PmauD2YKzfTo8\nVvkkxO1CHNB99CBtqd2MTpsxh6h3pNbkpJGEk0YXx+C4qCvWEMgISAkoR/2V\n58dDfR5CUM8FvYUbIxwAklrmFYuDNqTAhnth4aNfV7oguFezJjzrrmQdzvbA\nReiVY328yB8rMaCW3YwtJj7Thg3q4dEinsRKOjJKaICQdVUftFoeI0mhdp89\nDwW6/7wrVkHpJj9qhQYkNwoMkfhv3WhwEc3vfZgPlXP5tT2fGlHX1U4G98ZF\nili6\r\n=A+X7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFJWdFfxxgAB8eS98XovmUDKWbSo4CZFFdDGcdEOhu2/AiA6OJkKAALxDeJ+ymdHxBVVX9NUny7xmJeiYwfC6vOP2A=="}]},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"},{"name":"lgm","email":"it1011@qq.com"},{"name":"neozw","email":"lihegaozhong@gmail.com"}],"_npmUser":{"name":"beisencorp","email":"ci@beisen.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/typed-css-modules_1.0.0_1557370586107_0.2463112019239957"},"_hasShrinkwrap":false},"1.0.1":{"name":"@beisen/typed-css-modules","version":"1.0.1","description":"Creates .d.ts files from CSS Modules .css files","main":"index.js","scripts":{"build":"babel -d lib src","test":"jest","test:watch":"jest --watch","test:ci":"jest --coverage","prepublish":"npm run build"},"bin":{"tcm":"lib/cli.js"},"repository":{"type":"git","url":"git+https://github.com/Quramy/typed-css-modules.git"},"keywords":["css-modules","typescript"],"author":{"name":"quramy"},"license":"MIT","dependencies":{"camelcase":"^4.1.0","chalk":"^2.1.0","chokidar":"^2.1.2","css-modules-loader-core":"^1.1.0","glob":"^7.1.2","is-there":"^4.4.2","mkdirp":"^0.5.1","yargs":"^8.0.2"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-env":"^2.4.1","babel-jest":"^22.4.3","jest":"^23.6.0","regenerator-runtime":"^0.11.1"},"jest":{"transform":{}},"bugs":{"url":"https://github.com/Quramy/typed-css-modules/issues"},"homepage":"https://github.com/Quramy/typed-css-modules#readme","_id":"@beisen/typed-css-modules@1.0.1","_nodeVersion":"8.10.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-KEX/IbZWl1TRNQqLD6Va8OcGZXrigPQb/sZPgwKQ8sdjdLvMRTGswKVXZ6JkQR/zQojADvP/yBS04RScnH8CbA==","shasum":"a87e6e137ea8546fa51a61faf3e958b8d2c0c794","tarball":"https://registry.npmjs.org/@beisen/typed-css-modules/-/typed-css-modules-1.0.1.tgz","fileCount":22,"unpackedSize":29366,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc05nKCRA9TVsSAnZWagAAejgP/RqoaerPL2r7b/RwqE60\n7sfrnKK12KrjlN/+DPFOYuQXeSgkIVL8xYIeJtUrYM423dmzXpFV4hVIt/WV\nYvHcjx8o5XlNWZ5lD0lFbXtRieYBPsXKZcej+NF0hCLUiHni67OcTqCKqwA8\nGF4BSS2rABRO9Lm/n1szhN0E6MIBlT6PMNwiP9pWb51rRmatJ7FNv/4AHmWv\nJY6o70RmIqbiIzzFkoIZwXjQZ0qPjRsr8wPo2xwwIv+uhLAc7L+wAO5pALV9\nOJ/IQPN5yemkraD0RV6PCb6jlfLhiIb39zx1bhcNlACwml9N4O+Qhx7A5aQs\nOaqT3ilYYq3PNZa/gas7LigUPPQJJtBbOdZ50RGeAk5Tu+5yEsja3upaISCx\nBOeCo9dNJJZlb54OyGtkEkcEf0ZFRpx8zabGawC2pfJMB5jIz/ertzpzulLK\nXQRRJS/Z7A7YZ7ITPpTey+l3/VK028glT7/2UEOTdmR1cIU1YG0Gl1YLi3V/\njnfxfVdhi1jJfVK+2QLwitwS8JHMz0U2gml53MCuETtjvRDfpmsD44zZOtjZ\nkv2htvcvLNJlGtVgt4JZ3/blBwXgGTgSHq1Lhl4MBNq1tYvMq8gOsZBRdEXG\nErTDnYFSxu7RUEMvKgy3Z7nMrc/5Lat0krriAzu0N8uDdyEnGPVBkwfv4/NL\nciRd\r\n=rolm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDF6TNAv765tIvJbDxWnVUoiZ0MMy7cZ/Upj420ApP4hgIhAKM0FPNlGBgr/UEFmIgV+2ezhU9T9yhHJXQRGmci2yb8"}]},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"},{"name":"lgm","email":"it1011@qq.com"},{"name":"neozw","email":"lihegaozhong@gmail.com"}],"_npmUser":{"name":"beisencorp","email":"ci@beisen.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/typed-css-modules_1.0.1_1557371337412_0.23308155286590293"},"_hasShrinkwrap":false},"1.0.2":{"name":"@beisen/typed-css-modules","version":"1.0.2","description":"Creates .d.ts files from CSS Modules .css files","main":"index.js","scripts":{"build":"babel -d lib src","test":"jest","test:watch":"jest --watch","test:ci":"jest --coverage","prepublish":"npm run build"},"bin":{"tcm":"lib/cli.js"},"repository":{"type":"git","url":"git+https://github.com/Quramy/typed-css-modules.git"},"keywords":["css-modules","typescript"],"author":{"name":"quramy"},"license":"MIT","dependencies":{"camelcase":"^4.1.0","chalk":"^2.1.0","chokidar":"^2.1.2","css-modules-loader-core":"^1.1.0","glob":"^7.1.2","is-there":"^4.4.2","mkdirp":"^0.5.1","yargs":"^8.0.2"},"devDependencies":{"babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-env":"^2.4.1","babel-jest":"^22.4.3","jest":"^23.6.0","regenerator-runtime":"^0.11.1"},"jest":{"transform":{}},"bugs":{"url":"https://github.com/Quramy/typed-css-modules/issues"},"homepage":"https://github.com/Quramy/typed-css-modules#readme","_id":"@beisen/typed-css-modules@1.0.2","_nodeVersion":"8.10.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-wCIZhXdKWAI+D8m5Bg9J9btwKNQs4qDds1D4uQ/9b0ZlcZN7DIIXIUdOAHCwEIpEkSPDbqlSkJCuU7PUDw+qZw==","shasum":"c169c8cc2a8c6beb0b0056b450f07c1510c87394","tarball":"https://registry.npmjs.org/@beisen/typed-css-modules/-/typed-css-modules-1.0.2.tgz","fileCount":22,"unpackedSize":29503,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc06DBCRA9TVsSAnZWagAAUc8P/0mCnF6jFk9IW5AzBAr9\nWvGPmr28lBu0jvtSE2BDdclVtf+qfp8Hb+Tg7s0RdEbQHaKrksTm9eq7Uhk/\n69BoEvqoUZkv7F8weUIEGBsYvoT2QVJJ/sfEtJxcPZaZeXPbZRFjHfcIDvoH\n+xvNNpjPi9uSt2GqGppVkno9QZqsGccZ9TTDnkNdFCeOc3wJz3lUGFM7fE5n\nMgx/+F7wDL9D/wEkg2mBP1FRjsH17QwQ4paj0ar71IW4N1NIoXyHhoEsh4WE\nk2EL9b20A7Ha4+rbcQO50PVLUnRULKC1lZ6Hkoaduze+fb26J0vjRY5Y7XUb\nwlA2u2sfa1G1eVbTlfGPms4vbBS6IO5G0mvY3gx9xMREX+hlA1pcLL3/f0kq\nUL8ExTsSIjLMPxK6LT8ULgsLp6KBV+tnSDqniIfT6VZ9GYN/y7ngeNvlloP3\nYF3x/jrktkiK4Z0iRUWNZ9c9lOKu+7KXP9EWEXA5oK05K+Q9rYqeMUWVg2q1\nG3QQo4vokgvqbA/9UuqX/gNz5eBDdFVpSvd3hRJr28Y+VkFliYh84VvHNVWL\nrz7glXJEWfabM/GeiHtuf+TCk6NXGBE/pQjQe+aiISqUVPFHXDc6dB7b/be5\nbjzardYGuc7Er2d6HyDHAjgAOC5gIvHNL6RLP3pOUYf1z6cnwxzTWSSfgl8G\nHv7k\r\n=aM55\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHLRkm32L7QnyuOq2wblI1Q7iEjPtDMlXZO6xLKYKmD3AiAr28pDg4DjBPUmdzxReYY1Gx/B1UxukZQwxVIjhrPI4g=="}]},"maintainers":[{"name":"beisencorp","email":"ci@beisen.com"},{"name":"lgm","email":"it1011@qq.com"},{"name":"neozw","email":"lihegaozhong@gmail.com"}],"_npmUser":{"name":"beisencorp","email":"ci@beisen.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/typed-css-modules_1.0.2_1557373120570_0.3595803055282101"},"_hasShrinkwrap":false}},"time":{"created":"2019-05-09T02:56:25.947Z","1.0.0":"2019-05-09T02:56:26.242Z","modified":"2022-04-04T18:19:34.952Z","1.0.1":"2019-05-09T03:08:57.560Z","1.0.2":"2019-05-09T03:38:40.736Z"},"maintainers":[{"email":"albertzhang.pro@gmail.com","name":"albert-zhang"},{"email":"liugenpeng@beisen.com","name":"liugenpeng"},{"email":"ci@beisen.com","name":"beisencorp"},{"email":"it1011@qq.com","name":"lgm"},{"email":"lihegaozhong@gmail.com","name":"neozw"}],"description":"Creates .d.ts files from CSS Modules .css files","homepage":"https://github.com/Quramy/typed-css-modules#readme","keywords":["css-modules","typescript"],"repository":{"type":"git","url":"git+https://github.com/Quramy/typed-css-modules.git"},"author":{"name":"quramy"},"bugs":{"url":"https://github.com/Quramy/typed-css-modules/issues"},"license":"MIT","readme":"# typed-css-modules [![Build Status](https://travis-ci.org/Quramy/typed-css-modules.svg?branch=master)](https://travis-ci.org/Quramy/typed-css-modules) [![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 * as styles from './styles.css';\nconsole.log(`
`);\nconsole.log(`
`);\n```\n\n## CLI\n\n```sh\nnpm install -g typed-css-modules\n```\n\nAnd exec `tcm ` 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\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 ``.\nIf you can customize glob pattern, you can use `--pattern` or `-p` option.\n\n```sh\ntcm -p src/**/*.icss\n```\n\n#### watch\nWith `-w` or `--watch`, this CLI watches files in the input directory.\n\n#### camelize CSS token\nWith `-c` or `--camelCase`, kebab-cased CSS classes(such as `.my-class {...}`) are exported as camelized TypeScript varibale name(`export const myClass: string`).\n\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\nexport const SomeComponent: string;\n```\n\nSee also [webpack css-loader's camelCase option](https://github.com/webpack/css-loader#camelcase).\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\nDtsCreator instance processes the input CSS and create TypeScript definition contents.\n\n#### `new DtsCreator(option)`\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.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)`\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\nDtsContent instance has `*.d.ts` content, final output path, and function to write file.\n\n#### `writeFile() => Promise(dtsContent)`\nWrites the DtsContent instance's content to a file.\n\n* `dtsContent`: the DtsContent instance itself.\n\n#### `tokens`\nAn array of tokens retrieved from input CSS file.\ne.g. `['myClass']`\n\n#### `contents`\nAn array of TypeScript definition expressions.\ne.g. `['export const myClass: string;']`.\n\n#### `formatted`\nA string of TypeScript definition expression.\n\ne.g.\n\n```ts\nexport const myClass: string;\n```\n\n#### `messageList`\nAn array of messages. The messages contains invalid token information.\ne.g. `['my-class is not valid TypeScript variable name.']`.\n\n#### `outputFilePath`\nFinal output file path.\n\n## Remarks\nIf your input CSS file has the followng 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\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\nThis software is released under the MIT License, see LICENSE.txt.\n","readmeFilename":"README.md"}