css-ts

Generates TypeScript files (.ts) from (.css) files.

For example given the following css,

/* styles.css */
#myId {
  color: green;
}
.myClass {
  color: blue;
}

css-ts creates the following styles.css.ts file from the above css:

/* styles.css.ts */
export const Styles = {
    'myClass': 'myClass',
    'myId': 'myId'
};
export default Styles;

So, you can import CSS class names and ids into your TypeScript sources:

/* app.ts */
import * as styles from './styles.css';
console.log(`<div class="${styles.myClass}"></div>`);
console.log(`<div id="${styles.myId}"></div>`);

Doing so allows:

• To make sure that typescript and css are in sync since otherwise compilation errors are going to be generated.
• To know where a given css class name or css id is being use.

Install instruction

npm install css-ts

CLI

Use css-ts --help for full list of options

Basic usage

Exec css-ts <search path> [options] command.

1. If search path points to a file, the file will be processed
2. If search path points to a folder, files to process will be looked for using glob pattern (see --pattern).

For example, if you have .css files under src directory, exec the following:

css-ts src

Then, this creates *.css.ts files under the directory which contains original .css files.

(your project root)
- src/
    | myStyle.css
    | myStyle.css.ts [created]

input file name pattern

By default, this tool searches files under <search directory> using the pattern **/*.css.
If you want to customize glob pattern, you can use --pattern option.
Note the quotes around the glob to --pattern (they are required, so that your shell does not perform the expansion).

css-ts . --pattern 'src/**/*.css'

dry-run

A usefull CLI option is --dry-run which allows to validate the results without writing anything to disk.

You may also want to increase verbosity to obtain more detail with -v or --verbose. Every -v increase the verbosity level by 1.

watch

With -w or --watch, this will watch files and process them when needed.

⚖️ License

This software is released under the MIT License, see LICENSE.txt.