babel-plugin-jsonify-css

Installation

$ yarn add --dev babel-plugin-jsonify-css

Usage

Add jsonify-css to the plugins section of your .babelrc:

{ "plugins": ["jsonify-css"] }

After setting the project, you may import CSS files like so:

// .css files now conveniently expose all styles as js objects
import styles, {
  rule,
  media,
  keyframes,
  fontFace,
  charset,
  raw
} from 'some-package/foo.css';
 
// If you are using glamor, you can easily generate styles like so
import { css } from 'glamor';
const className = css(styles);
 
// Don't forget any custom fonts or animations :)
const fonts = fontFace.map(x => css.fontFace(x));
const animations = keyframes.reduce((a, [name, timeline]) => {
  a[name] = css.keyframe(timeline);
  return a;
}, {});

License

MIT License