@groooves/typed-css-modules
v0.6.4
Published
Creates .d.ts files from CSS Modules .css files
Downloads
4
Readme
typed-css-modules
Creates TypeScript definition files from CSS Modules .css files.
If you have the following css,
/* styles.css */
@value primary: red;
.myClass {
color: primary;
}
typed-css-modules creates the following .d.ts files from the above css:
/* styles.css.d.ts */
declare const styles: {
readonly "primary": string;
readonly "myClass": string;
};
export = styles;
So, you can import CSS modules' class or variable into your TypeScript sources:
/* app.ts */
import * as styles from './styles.css';
console.log(`<div class="${styles.myClass}"></div>`);
console.log(`<div style="color: ${styles.primary}"></div>`);
CLI
npm install -g typed-css-modules
And exec tcm <input directory>
command.
For example, if you have .css files under src
directory, exec the following:
tcm src
Then, this creates *.css.d.ts
files under the directory which has original .css file.
(your project root)
- src/
| myStyle.css
| myStyle.css.d.ts [created]
output directory
Use -o
or --outDir
option.
For example:
tcm -o dist src
(your project root)
- src/
| myStyle.css
- dist/
| myStyle.css.d.ts [created]
file name pattern
By the default, this tool searches **/*.css
files under <input directory>
.
If you can customize glob pattern, you can use --pattern
or -p
option.
Note the quotes around the glob to -p
(they are required, so that your shell does not perform the expansion).
tcm -p 'src/**/*.icss' .
watch
With -w
or --watch
, this CLI watches files in the input directory.
camelize CSS token
With -c
or --camelCase
, kebab-cased CSS classes(such as .my-class {...}
) are exported as camelized TypeScript varibale name(export const myClass: string
).
You can pass --camelCase dashes
to only camelize dashes in the class name. Since version 0.27.1
in the
webpack css-loader
. This will keep upperCase class names intact, e.g.:
.SomeComponent {
height: 10px;
}
becomes
export const SomeComponent: string;
See also webpack css-loader's camelCase option.
API
npm install typed-css-modules
import DtsCreator from 'typed-css-modules';
let creator = new DtsCreator();
creator.create('src/style.css').then(content => {
console.log(content.tokens); // ['myClass']
console.log(content.formatted); // 'export const myClass: string;'
content.writeFile(); // writes this content to "src/style.css.d.ts"
});
class DtsCreator
DtsCreator instance processes the input CSS and create TypeScript definition contents.
new DtsCreator(option)
You can set the following options:
option.rootDir
: Project root directory(default:process.cwd()
).option.searchDir
: Directory which includes target*.css
files(default:'./'
).option.outDir
: Output directory(default:option.searchDir
).option.camelCase
: Camelize CSS class tokens.option.EOL
: EOL (end of line) for the generatedd.ts
files. Possible values'\n'
or'\r\n'
(default:os.EOL
).
create(filepath, contents) => Promise(dtsContent)
Returns DtsContent
instance.
filepath
: path of target .css file.contents
(optional): the CSS content of thefilepath
. If set, DtsCreator uses the contents instead of the original contents of thefilepath
.
class DtsContent
DtsContent instance has *.d.ts
content, final output path, and function to write file.
writeFile(postprocessor) => Promise(dtsContent)
Writes the DtsContent instance's content to a file. Returns the DtsContent instance.
postprocessor
(optional): a function that takes the formatted definition string and returns a modified string that will be the final content written to the file.You could use this, for example, to pass generated definitions through a formatter like Prettier, or to add a comment to the top of generated files:
dtsContent.writeFile( definition => `// Generated automatically, do not edit\n${definition}` )
tokens
An array of tokens retrieved from input CSS file.
e.g. ['myClass']
contents
An array of TypeScript definition expressions.
e.g. ['export const myClass: string;']
.
formatted
A string of TypeScript definition expression.
e.g.
export const myClass: string;
messageList
An array of messages. The messages contains invalid token information.
e.g. ['my-class is not valid TypeScript variable name.']
.
outputFilePath
Final output file path.
Remarks
If your input CSS file has the followng class names, these invalid tokens are not written to output .d.ts
file.
/* TypeScript reserved word */
.while {
color: red;
}
/* invalid TypeScript variable */
/* If camelCase option is set, this token will be converted to 'myClass' */
.my-class{
color: red;
}
/* it's ok */
.myClass {
color: red;
}
Example
There is a minimum example in this repository example
folder. Clone this repository and run cd example; npm i; npm start
.
Or please see https://github.com/Quramy/typescript-css-modules-demo. It's a working demonstration of CSS Modules with React and TypeScript.
License
This software is released under the MIT License, see LICENSE.txt.