{"_id":"@skbkontur/typed-css-modules","_rev":"26-2d4e74e3bc859432db3d5df930cd704c","name":"@skbkontur/typed-css-modules","dist-tags":{"latest":"0.4.4"},"versions":{"0.4.4":{"name":"@skbkontur/typed-css-modules","version":"0.4.4","keywords":["css-modules","typescript"],"author":{"name":"quramy"},"license":"MIT","_id":"@skbkontur/typed-css-modules@0.4.4","maintainers":[{"name":"ssamooilov_skbkontur","email":"ssamooilov@skbkontur.ru"},{"name":"t1mmaas","email":"bboytx@gmail.com"},{"name":"tihonove","email":"tihonov.ea@gmail.com"},{"name":"ubitso4","email":"stanislav.kuklin@mail.ru"},{"name":"wkich","email":"nflazzer@gmail.com"}],"homepage":"https://github.com/nanot1m/typed-css-modules#readme","bugs":{"url":"https://github.com/nanot1m/typed-css-modules/issues"},"bin":{"tcm":"lib/cli.js"},"dist":{"shasum":"9927a2bef558aff4af0a86013149f59676133490","tarball":"https://registry.npmjs.org/@skbkontur/typed-css-modules/-/typed-css-modules-0.4.4.tgz","fileCount":26,"integrity":"sha512-Q0CWJeDB3UdXD3/XQD0hahI9qzCUE3g6oThdZ38woQHWft5QY6girU1Ie9JGUw5uvWHCyCyPxjJ9BtB1rJG45A==","signatures":[{"sig":"MEQCIGg0j3E3fA9xWm+w2CEuiq8P+pO+lMvgKp/b7mRsGdMmAiAD+uCoEUrlf0X3ej6G9dkVym3a5OSx2+0YRrVK3H4mrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":129874},"main":"index.js","_from":".","_shasum":"9927a2bef558aff4af0a86013149f59676133490","gitHead":"dd5b5bdd1cc5ee86d81ce537dec9d390fd7d82e4","scripts":{"test":"npm run build && gulp test","build":"gulp compile","watch":"gulp watch","prepublish":"npm run build"},"_npmUser":{"name":"t1mmaas","email":"bboytx@gmail.com"},"repository":{"url":"git+https://github.com/nanot1m/typed-css-modules.git","type":"git"},"_npmVersion":"3.10.10","description":"Creates .d.ts files from CSS Modules .css files","directories":{},"_nodeVersion":"6.13.1","dependencies":{"glob":"^7.1.2","chalk":"^2.1.0","yargs":"^8.0.2","mkdirp":"^0.5.1","chokidar":"^1.6.1","is-there":"^4.4.2","camelcase":"^4.1.0","css-modules-loader-core":"^1.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"gulp":"^3.9.0","assert":"^1.3.0","babel-core":"^6.25.0","gulp-babel":"^7.0.0","gulp-mocha":"^4.3.1","gulp-plumber":"^1.0.1","babel-preset-es2015":"^6.24.1"},"_npmOperationalInternal":{"tmp":"tmp/typed-css-modules_0.4.4_1522226856575_0.10645278775351152","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-03-28T08:47:36.512Z","modified":"2026-01-30T09:50:39.220Z","0.4.4":"2018-03-28T08:47:36.738Z"},"bugs":{"url":"https://github.com/nanot1m/typed-css-modules/issues"},"author":{"name":"quramy"},"license":"MIT","homepage":"https://github.com/nanot1m/typed-css-modules#readme","keywords":["css-modules","typescript"],"repository":{"url":"git+https://github.com/nanot1m/typed-css-modules.git","type":"git"},"description":"Creates .d.ts files from CSS Modules .css files","maintainers":[{"email":"anna.khlutkova@mail.ru","name":"khlutkova"},{"email":"tihonov.ea@gmail.com","name":"tihonove"},{"email":"stanislav.kuklin@mail.ru","name":"ubitso4"},{"email":"pogadaev.e@ya.ru","name":"zhzz"},{"email":"design-system-team@skbkontur.ru","name":"skbkontur-bot"},{"email":"feikfake1@gmail.com","name":"fakefeik"},{"email":"wertyxa@bk.ru","name":"original001"},{"email":"imbalanced47@gmail.com","name":"templeoftemplar"},{"email":"d.omelkov@ya.ru","name":"apocalyp0sys"},{"email":"robottorobato@gmail.com","name":"lossir"},{"email":"dmitrey04@gmail.com","name":"dpeshkin"},{"email":"alex.chabin@gmail.com","name":"nibach"},{"email":"mshatikhin@gmail.com","name":"mshatikhin"}],"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\n## This is a fork of https://github.com/Quramy/typed-css-modules.git\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.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 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 = require('./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 @skbkontur/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.\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#### 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\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\n  console.log(content.formatted);\n  /*\n  declare const styles: {\n    readonly myClass: string;\n  };\n  export = styles;\n  */\n\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\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() => Promise(dtsContent)`\n\nWrites the DtsContent instance's content to a file.\n\n* `dtsContent`: the DtsContent instance itself.\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. `['readonly \"myClass\": string;']`.\n\n#### `formatted`\n\nA string of TypeScript definition expression.\n\ne.g.\n\n```ts\ndeclare const styles: {\n  readonly myClass: string;\n};\nexport = styles;\n```\n\n#### `outputFilePath`\n\nFinal output file path.\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"}