DEPRECATION NOTICE: next-css-json-loader is deprecated in favor of babel-plugin-jsonify-css. Please use it instead. Thank you!

next-css-json-loader

Installation

$ npm install --save-dev next-css-json-loader

Setup

First you will need to create a next.config.js file:

module.exports = {
  webpack: config => {
    config.module.rules.push({
      test: /\.css$/,
      loader: 'emit-file-loader',
      options: {
        name: 'dist/[path][name].[ext]',
      }
    }, {
      test: /\.css$/,
      loader: 'babel-loader!next-css-json-loader',
    });
    return config;
  },
};

Usage

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;
}, {});

Shout out to next-style-loader for inspiration!

License

MIT License