# css-to-ts > css-to-ts takes a css file and outputs a TypeScript file with an exported string containing a content of your css file. Latest version **1.0.1** (published 2017-11-08) · MIT license · 0 weekly downloads ## Install ```sh npm install css-to-ts pnpm add css-to-ts yarn add css-to-ts bun add css-to-ts ``` Provides the command `css-to-ts`. ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.1 | | Published | 2017-11-08 | | First published | 2017-04-11 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 8 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | SimplrJS | | Maintainers | quatrodev, simplrjs | | Keywords | SimplrJS, css, Cascading, Style, Sheets, ts, Typescript, css-to-ts | ## Links - npm: https://www.npmjs.com/package/css-to-ts - Repository: https://github.com/SimplrJS/css-to-ts - Issues: https://github.com/SimplrJS/css-to-ts/issues - npm.io page: https://npm.io/package/css-to-ts ## Dependencies (8) - [yargs](https://npm.io/package/yargs.md) ^7.1.0 - [globby](https://npm.io/package/globby.md) ^6.1.0 - [chokidar](https://npm.io/package/chokidar.md) ^1.6.1 - [fs-extra](https://npm.io/package/fs-extra.md) ^4.0.2 - [@types/yargs](https://npm.io/package/@types/yargs.md) ^6.6.0 - [@types/globby](https://npm.io/package/@types/globby.md) ^6.1.0 - [@types/chokidar](https://npm.io/package/@types/chokidar.md) ^1.7.3 - [@types/fs-extra](https://npm.io/package/@types/fs-extra.md) ^4.0.3 ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 1.0.1 (latest) — 2017-11-08 - 1.0.0 — 2017-11-06 - 1.0.0-beta.1 — 2017-11-04 - 0.1.0 — 2017-10-31 - 0.1.0-beta.9 — 2017-04-13 - 0.1.0-beta.8 — 2017-04-13 - 0.1.0-beta.7 — 2017-04-12 - 0.1.0-beta.6 — 2017-04-12 - 0.1.0-beta.5 — 2017-04-12 - 0.1.0-beta.4 — 2017-04-11 - 0.1.0-beta.3 — 2017-04-11 - 0.1.0-beta.2 — 2017-04-11 - 0.1.0-beta — 2017-04-11 ## README # css-to-ts Compiles css files to importable TypeScript files. ## Installation ```sh npm install css-to-ts -g ``` Global installation is not necessary. You can install this package with: ```sh npm install css-to-ts ``` and use it with [`npm-scripts`](https://docs.npmjs.com/misc/scripts). ## Features - Takes css files and output TypeScript files with exported string containing content of your css file. - CLI tool for watching and files compilation. - Works with [node-glob](https://github.com/isaacs/node-glob) pattern. ## Command line ### Usage ```sh css-to-ts -h ``` ### Arguments | Argument | Type | Default | Description | |-------------------------------|-----------|---------------------------|-------------------------------------------------------------------------------| | -h, --help | boolean | `false` | Show help. | | -v, --version | boolean | `false` | Show current version. | | --rootDir | string | `./` | Specifies the root directory of input files. | | --outDir | string | `./` | Redirect output structure to the directory. | | --outExt | string | `ts` | Specifies extension of output TypeScript file. | | --pattern | string | `**/*.css` | Files glob pattern. | | -w, --watch | boolean | `false` | Watch for changes of input files. | | --prefix | string | | Prefix added to output file name. | | --suffix | string | | Suffix added to output file name. | | --delimiter | string | `-` | Specifies delimiter for prefix and suffix. Required if one of these are set. | | --removeSource | boolean | `false` | Remove all source files specified by glob pattern. | | --header | string | | Specifies header comment in generated TS file. | | --cwd | string | `process.cwd()` | Specifies current working directory. | | --exclude | array | `["**/node_modules/**"]` | Specifies an array of globs to exclude. | | --varName | string | | Specifies name of variable to be exported in TypeScript file. | | --varType | string | `const` | Specifies type of variable to be exported in TypeScript file. | ## Example ```sh css-to-ts --rootDir "./src" --outDir "./dist" --pattern "*.css" --header "File generated with css-to-ts" ``` Input file `./src/orange.css`: ```css .orange { color: orange; border: 1px solid yellow; } ``` Generated `./dist/orange.ts`: ```ts // File generated with css-to-ts export const Orange = `.orange { color: orange; border: 1px solid yellow; }`; ``` ## API ### `ConvertCssToTs(stringifiedCss: string, variableName: string, headerComment?: string, varType: VarType = VarType.Const): string` Takes stringified css and outputs TypeScript code with exported string containing content of your css file. Usage: ```ts import { ConvertCssToTs } from "css-to-ts"; ``` | Argument | Type | Required | Description | |-------------------|--------|----------|-----------------------------------------------------------| | `stringifiedCss` | string | * | Stringified css to be exported in TypeScript file. | | `variableName` | string | * | Name of variable to be exported in TypeScript file. | | `headerComment` | string | | Comment placed in the top of exported TypeScript file. | | `varType` | string | | Type of variable to be exported in TypeScript file. | ```ts export enum VarType { Var = "var", Let = "let", Const = "const" } ``` ### `new CssToTsConverter(outputDir, outputFileName, cssDir, cssFileName, varName, header, removeSource, varType)` Compiles css files to importable TypeScript files. Usage: ```ts import { CssToTsConverter } from "css-to-ts"; const converter = new CssToTsConverter( outputDir, outputFileName, cssDir, cssFileName, varName, header, removeSource ); try { await converter.Convert(); } catch(error) { console.error(error); } ``` | Constructor argument | Type | Required | Description | |-----------------------|-----------|-----------|---------------------------------------------------------------| | `outputDir` | string | * | Directory of output file. | | `outputFileName` | string | * | Name of output file. | | `cssDir` | string | * | Directory of css file. | | `cssFileName` | string | * | File name of css file. | | `varName` | string | * | Name of variable to be exported in TypeScript file. | | `header` | string | | Comment placed in the top of exported TypeScript file. | | `removeSource` | boolean | | Should css file be deleted after TypeScript file emitted. | | `varType` | VarType | | Type of variable to be exported in TypeScript file. | ## License Released under the [MIT license](LICENSE). --- _Source: https://npm.io/package/css-to-ts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._