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:

: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.

@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.

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 © Philipp Daun