https://github.com/bwca/package_css-types
Typed css classes!
https://github.com/bwca/package_css-types
Last synced: over 1 year ago
JSON representation
Typed css classes!
- Host: GitHub
- URL: https://github.com/bwca/package_css-types
- Owner: Bwca
- Created: 2020-05-07T18:30:24.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-08-21T18:28:41.000Z (almost 5 years ago)
- Last Synced: 2025-02-15T10:40:01.475Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 502 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Css Types
## What is this package for
The package provides a convenient way to create a typescript enum for css classes in `*.css` and `*.scss` files for later use in typescript or javascript files. It does not require a bundler and can be used on directories or separate files.
## Usage
Install it from npm using your preferred package manager, i.e.:
```
npm install css-types --save-dev
```
Create a custom script in your package.json file:
```
"scripts": {
"css-types": "css-types"
}
```
Then run it:
```
npm run css-types
```
You can also set it to watch mode:
```
"scripts": {
"css-types": "css-types --watch"
}
```
By default `css-types` looks for the `src` directory and walks it, creating typescript enums for every `*.css` and `*.scss` file it finds. To set a different directory for crawling simply pass its relative path:
```
"scripts": {
"css-types": "css-types --watch --directory=src/css"
},
```
## What does it do
It creates a typescript a `*.style.ts` file containing enum with all style classes found in the stylesheet file as enum values `*.css` and `*.scss` file will receive.
For example, provided you have a stylesheet `main.scss` with the following contents:
```
// Hypothetical main.css file.
.content {
color: pink;
.ads {
background: red;
}
}
```
Performing `css-types` command will create `main.style.ts` file with the following enum:
```
export enum Main {
Content = 'content',
Ads = 'ads',
}
```
Now it can be used in `ts`:
```
import { Main } from './css/main.style';
document.getElementById('some-element-id').classList.add(Main.Content);
```
No need to worry about accidental renaming of css class that is used somewhere - as soon as types are updated and enum keys change, it will trigger an error if non-existant css classes are in use somewhere.
## Plans for future
- ~~add --watch flag for auto-updates of typings;~~ added in version 1.1.0.
- add enumeration for IDs;
- add support for LESS.