styled-jsx/css loader

A loader for webpack that lets you import CSS files as a styled-jsx css-tagged template literal.

Usage

Since version 2.0.1, styled-jsx allows styles to be defined in separate JavaScript modules, by tagging with css any template literal that contain CSS.

This loader allows to go one step further and define styles in separate CSS files, which will be loaded as modules exporting the style sheet as a css-tagged template literal.

In practice, you are now able to write:

import styles from './styles.css';
 
<style jsx>{styles}</style>

Installation

It is assumed that your application already depends on styled-jsx, either directly or through Next.js 4.

The loader is typically added as a dependency (or development dependency) to your application using npm or Yarn.

npm install --save-dev styled-jsx-css-loader

Configuration

The loaded module is intended to be Babel-transformed by styled-jsx. Therefore you will typically pass styled-jsx-css-loader’s output to babel-loader, which must use a configuration that:

• transforms module imports
• includes the styled-jsx/babel plugin

A typical webpack configuration would enable the loader by including a rule similar to this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'babel-loader',
          'styled-jsx-css-loader'
        ]
      }
    ]
  }
};

In the sample config above, styled-jsx-css-loader is used first, and babel-loader then used to enable transformation of the loaded module by styled-jsx.

If you are using Next.js, you need to add its emit-file-loader, and the configuration would reside in a next.config.js file, typically similar to:

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

Credits and acknowledgements

This loader was inspired by raw-loader, and Next.js’ with-global-stylesheet example.

Many thanks to styled-jsx author Giuseppe Gurgone.

License

MIT