css-ts v1.0.0
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.
- 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.
4 years ago