css-to-ts

Compiles css files to importable TypeScript files.

Installation

npm install css-to-ts -g

Global installation is not necessary. You can install this package with:

npm install css-to-ts

and use it with npm-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 pattern.

Command line

Usage

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

css-to-ts --rootDir "./src" --outDir "./dist" --pattern "*.css" --header "File generated with css-to-ts"

Input file ./src/orange.css:

.orange {
    color: orange;
    border: 1px solid yellow;
}

Generated ./dist/orange.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:

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. |

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:

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.