css-to-ts

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.