@rsbuild/plugin-typed-css-modules
v1.0.2
Published
An Rsbuild plugin to generate TypeScript declaration files for CSS Modules.
Downloads
14,567
Readme
@rsbuild/plugin-typed-css-modules
An Rsbuild plugin to generate TypeScript declaration files for CSS Modules.
Usage
Install:
npm add @rsbuild/plugin-typed-css-modules -D
Add plugin to your rsbuild.config.ts
:
// rsbuild.config.ts
import { pluginTypedCSSModules } from "@rsbuild/plugin-typed-css-modules";
export default {
plugins: [pluginTypedCSSModules()],
};
Example
By adding the Typed CSS Modules plugin, Rsbuild will generate TypeScript declaration files for all CSS Modules in the project.
For example, create two files named src/index.ts
and src/index.module.css
:
import styles from "./index.module.css";
console.log(styles.pageHeader);
.page-header {
color: black;
}
After building, Rsbuild will generate a src/index.module.css.d.ts
type declaration file:
interface CssExports {
"page-header": string;
pageHeader: string;
}
declare const cssExports: CssExports;
export default cssExports;
Now when you open the src/index.ts
file, you can see that the styles
object already has an accurate type.
Named Export
If output.cssModules.namedExport is enabled, the generated type declaration file will only include named exports.
For example:
.page {
color: black;
}
.header {
color: white;
}
The generated types would be:
export const page: string;
export const header: string;
Configure Git
In the above example, src/index.module.css.d.ts
is generated by compilation, you can choose to commit them to the Git repository, or you can choose to ignore them in the .gitignore
file:
# Ignore auto generated CSS declarations
*.module.css.d.ts
*.module.sass.d.ts
*.module.scss.d.ts
*.module.less.d.ts
*.module.styl.d.ts
*.module.stylus.d.ts
In addition, if the generated code causes ESLint to report errors, you can also add the above configuration to the .eslintignore
file.
Credits
The loader was forked from seek-oss/css-modules-typescript-loader.
License
MIT.