Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/activeguild/css-custom-property-extractor
Extract css custom properties as constant values that can be used in JS.
https://github.com/activeguild/css-custom-property-extractor
css css-custom-property extract typescript
Last synced: 27 days ago
JSON representation
Extract css custom properties as constant values that can be used in JS.
- Host: GitHub
- URL: https://github.com/activeguild/css-custom-property-extractor
- Owner: activeguild
- License: mit
- Created: 2022-12-18T13:40:18.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-01T13:16:10.000Z (over 1 year ago)
- Last Synced: 2024-10-11T22:04:32.741Z (about 1 month ago)
- Topics: css, css-custom-property, extract, typescript
- Language: TypeScript
- Homepage:
- Size: 730 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
css-custom-property-extractor
## Intro
- Parse css custom properties and output typescript files.By importing the output typescript files
,custom properties can be used type-safely in various libraries.
- Supports `css` and `sass` and `less`.
- If you are in a vite environment, use the `css-preprocessoroptions` in `vite.config`.
## Usage
1. Install as `devDependencies`
```shell
npm i -D css-custom-property-extractor
```
2. For example.
Parsing [./samples/scss/bootstrap.scss](./samples/scss/bootstrap.scss) outputs the following typescript file.
```shell
npx ccpe -i ./samples/scss/bootstrap.scss
```
```ts
/**
* #0d6efd;
*/
export const bsBlue = "var(--bs-blue)"
/**
* #6610f2;
*/
export const bsIndigo = "var(--bs-indigo)"
/**
* #6f42c1;
*/
export const bsPurple = "var(--bs-purple)"
...
```
3. Import and use the output typescript file.
## Command options
| option | description |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| -o \ | output path. |
| -i,--include | include path (glob pattern). (default \*_/_.?(css \| scss \| sass \| less)) |
| -e,--exclude | exclude path (glob pattern). |
| -v,--vite | Specify the relative path to vite.config.
Read the [css-preprocessoroptions](https://vitejs.dev/config/shared-options.html#css-preprocessoroptions) property from `vite.config`. (default false) |