https://github.com/rspack-contrib/rsbuild-plugin-typed-css-modules

An Rsbuild plugin to generate TypeScript declaration files for CSS Modules
https://github.com/rspack-contrib/rsbuild-plugin-typed-css-modules

rsbuild rsbuild-plugin rspack

Last synced: about 2 months ago
JSON representation

An Rsbuild plugin to generate TypeScript declaration files for CSS Modules

• Host: GitHub
• URL: https://github.com/rspack-contrib/rsbuild-plugin-typed-css-modules
• Owner: rspack-contrib
• License: mit
• Created: 2024-07-15T11:06:37.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-07-15T11:38:55.000Z (2 months ago)
• Last Synced: 2024-07-19T02:54:01.675Z (2 months ago)
• Topics: rsbuild, rsbuild-plugin, rspack
• Language: TypeScript
• Homepage:
• Size: 64.5 KB
• Stars: 3
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-rspack - @rsbuild/plugin-typed-css-modules

README

        
# @rsbuild/plugin-typed-css-modules

An Rsbuild plugin to generate TypeScript declaration files for CSS Modules.



  

   

  

  



## Usage

Install:

```bash

npm add @rsbuild/plugin-typed-css-modules -D

```

Add plugin to your `rsbuild.config.ts`:

```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`:

```tsx title="src/index.ts"

import styles from "./index.module.css";

console.log(styles.pageHeader);

```

```css title="src/index.module.css"

.page-header {

  color: black;

}

```

After building, Rsbuild will generate a `src/index.module.css.d.ts` type declaration file:

```ts title="src/index.module.css.d.ts"

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](/config/output/css-modules#cssmodulesnamedexport) is enabled, the generated type declaration file will only include named exports.

For example:

```css title="index.module.css"

.page {

  color: black;

}

.header {

  color: white;

}

```

The generated types would be:

```ts title="src/index.module.css.d.ts"

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:

```bash

# 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](https://github.com/seek-oss/css-modules-typescript-loader).

## License

[MIT](./LICENSE).