Type-safe use of css custom-property in Vite

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