css-ts
Generates TypeScript files (*.ts) from (*.css) files.
For example given the following css,
/* styles.css */
css-ts creates the following styles.css.ts file from the above css:
/* styles.css.ts */ ;;
So, you can import CSS class names and ids into your TypeScript sources:
/* app.ts */;console.log`<div class=""></div>`;console.log`<div id=""></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.
- If search path points to a file, the file will be processed
- 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.