https://github.com/daun/icss-js
Share style tokens between (S)CSS and JS
https://github.com/daun/icss-js
icss js scss style-tokens
Last synced: about 2 months ago
JSON representation
Share style tokens between (S)CSS and JS
- Host: GitHub
- URL: https://github.com/daun/icss-js
- Owner: daun
- License: mit
- Created: 2020-07-27T14:57:04.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2025-06-13T16:13:53.000Z (about 1 year ago)
- Last Synced: 2025-10-21T17:41:33.947Z (8 months ago)
- Topics: icss, js, scss, style-tokens
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ICSS-JS
Helpers for sharing style tokens between (S)CSS and JS.
Useful for:
- re-using named breakpoints
- synchronising transition durations
- defining global color themes
Requirements:
- Valid [ICSS exports](https://github.com/css-modules/icss#export)
- A JS bundler that supports CSS modules
This package won't do the heavy lifting of configuring your bundler to output
CSS modules. Rather, it provides a few helpers for streamlining the whole
import/export business.
## Install
```bash
npm install icss-js
```
## Usage
### Exporting data from CSS
Use ICSS [export statements](https://github.com/css-modules/icss#export):
```css
:export {
transitionDuration: 500;
mainColor: purple;
}
```
### Exporting data from SCSS
ICSS exports are flat by nature. Exporting complex SASS data structures like
lists and maps requires an intermediate step. We'll use the `icss-export`
function to convert those to JSON that can later be parsed by the JS helpers.
```scss
@import "icss-js/src/icss-export.scss";
$breakpoints: (small: 420px, medium: 768px, large: 1024px);
:export {
breakpoints: icss-export($breakpoints);
}
```
### Importing data into JS
Import your stylesheet as a CSS module, then pass the exports into the provided
helper function to receive a valid JS object.
```js
import parseIcssExports from 'icss-js'
import cssExports from './styles/main.scss'
const {
breakpoints,
transitionDuration
} = parseIcssExports(cssExports)
console.log(breakpoints) // { "small": 420, "medium": 768 }
console.log(transitionDuration) // 500
```
## License
[MIT License](https://opensource.org/licenses/MIT) © Philipp Daun