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
- 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
npm install icss-js
Usage
Exporting data from CSS
Use ICSS export statements:
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.
; ; :export
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.
const breakpoints transitionDuration } = console // { "small": 420, "medium": 768 }console // 500
License
MIT License © Philipp Daun