icss-js

0.1.2 • Public • Published

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:

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: 420pxmedium: 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

Package Sidebar

Install

npm i icss-js

Weekly Downloads

3

Version

0.1.2

License

MIT

Unpacked Size

29.4 kB

Total Files

14

Last publish

Collaborators

  • daun