Introduce
When staring with css modules in react, I often encounter situations where custom properties are used.
When staring with css modules in react, I often encounter situations where custom properties are used.
We have released a tool that solves those problems, and we would like to introduce it to you.
If you are using Vite, you can read and use css-preprocessoroptions.
Repo
https://github.com/activeguild/css-custom-property-extractor
Usage
- Install the package.
npm i -D css-custom-property-extractor
- For example. Parsing bootstrap.scss outputs the following typescript file.
npx ccpe -i ./samples/scss/bootstrap.scss
output.
/**
* #0d6efd;
*/
export const bsBlue = "var(--bs-blue)"
/**
* #6610f2;
*/
export const bsIndigo = "var(--bs-indigo)"
/**
* #6f42c1;
*/
export const bsPurple = "var(--bs-purple)"
...
- Import and use the output typescript file.
At the end
We have shown how to bring custom properties into the TS world and use them in type safety.
In addition to this, please read on to find out how to load styles and use classes in a type-safe manner.
https://dev.to/activeguild/i-made-a-typescript-plugin-for-css-modules-that-can-be-used-with-vite-3ofg
https://dev.to/activeguild/type-safe-development-with-vite-x-react-x-css-modules-x-typescript-1ebc
Top comments (0)