Repository files navigation

Creates TypeScript definition files fromCSS 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 */declareconststyles:{readonlyprimary:string;readonlymyClass:string;};export=styles;

So, you can import CSS modules' class or variable into your TypeScript sources:

/* app.ts */importstylesfrom'./styles.css';console.log(`<divpl-s1">${styles.myClass}"></div>`);console.log(`<div></div>`);

npm install -g typed-css-modules

And exectcm <input directory> command.For example, if you have .css files undersrc directory, exec the following:

tcm src

Then, this creates*.css.d.ts files under the directory which has the original .css file.

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

Use-o or--outDir option.

For example:

tcm -o dist src

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

By default, this tool searches**/*.css files under<input directory>.If you can customize the 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/**/*.css'.

With-w or--watch, this CLI watches files in the input directory.

With-l or--listDifferent, list any files that are different than those that would be generated.If any are different, exit with a status code 1.

With-c or--camelCase, kebab-cased CSS classes(such as.my-class {...}) are exported as camelized TypeScript variable name(export const myClass: string).

You can pass--camelCase dashes to only camelize dashes in the class name. Since version0.27.1 in thewebpackcss-loader. This will keep upperCase class names intact, e.g.:

.SomeComponent {height:10px;}

becomes

declareconststyles:{readonlySomeComponent:string;};export=styles;

See alsowebpack css-loader's camelCase option.

With-e or--namedExports, types are exported as named exports as opposed to default exports.This enables support for thenamedExports css-loader feature, required for webpack to tree shake the final CSS (learn morehere).

Use this option in combination withhttps://webpack.js.org/loaders/css-loader/#namedexport andhttps://webpack.js.org/loaders/style-loader/#namedexport (if you usestyle-loader).

When this option is enabled, the type definition changes to support named exports.

NOTE: this option enables camelcase by default.

.SomeComponent {height:10px;}

Standard output:

declareconststyles:{readonlySomeComponent:string;};export=styles;

Named exports output:

exportconstsomeComponent:string;

With-a or--allowArbitraryExtensions, output filenames will be compatible with the "arbitrary file extensions" feature that was introduce in TypeScript 5.0. Seethe docs for more info.

In essence, the*.css.d.ts extension now becomes*.d.css.ts so that you can import CSS modules in projects using ESM module resolution.

npm install typed-css-modules

importDtsCreatorfrom'typed-css-modules';letcreator=newDtsCreator();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"});

DtsCreator instance processes the input CSS and creates TypeScript definition contents.

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.namedExports: Use named exports as opposed to default exports to enable tree shaking. Requiresimport * as style from './file.module.css'; (default:false)
• option.allowArbitraryExtensions: Output filenames that will be compatible with the "arbitrary file extensions" TypeScript feature
• option.EOL: EOL (end of line) for the generatedd.ts files. Possible values'\n' or'\r\n'(default:os.EOL).

ReturnsDtsContent 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.

DtsContent instance has*.d.ts content, final output path, and function to write the file.

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}`);

An array of tokens is retrieved from the input CSS file.e.g.['myClass']

An array of TypeScript definition expressions.e.g.['export const myClass: string;'].

A string of TypeScript definition expressions.

e.g.

exportconstmyClass:string;

An array of messages. The messages contain invalid token information.e.g.['my-class is not valid TypeScript variable name.'].

Final output file path.

If your input CSS file has the following 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;}

There is a minimum example in this repositoryexample folder. Clone this repository and runcd example; npm i; npm start.

Or please seehttps://github.com/Quramy/typescript-css-modules-demo. It's a working demonstration of CSS Modules with React and TypeScript.

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