css-literal-loader

Parse css tagged template literals as CSS files

2 years after

css-literal-loader

A webpack loader for extracting and processing css defined in other files.

"Inline css" that just works with CSS, PostCSS, Less, Sass, or any other css preprocessor, and plays nicely with existing style tooling like extract-text-webpack-plugin.

import React from 'react';

const styles = css`
  .button {
    color: black;
    border: 1px solid black;
    background-color: white;
  }
`;

export default function Button({ children }) {
  return (
    <button className={styles.button}>
      {children}
    </button>
  );
}

When processed, the css block will be extracted and treated as a .css file, taking advantage of any and all of the other loaders configured to handle css.

It even handles statically analyzable interpolations!

const margin = 10;
const height = 50;
const bottom = height + margin;

const styles = css`
  .box {
    height: ${height}px;
    margin-bottom: ${margin}px;
  }

  .footer {
    position: absolute;
    top: ${bottom}px;
  }
`;

Setup

Add the css-literal-loader to JavaScript loader configuration, and whatever you want to handle .css files:

{
  module: {
    loaders: {
      {
        test: /\.css$/,
        loader: 'style!css?modules',
      },
      {
        test: /\.js$/,
        loader: 'babel!css-literal',
      },
    }
  }
}

Options

css-literal-loader accepts a few query options.

  • tagName: (default: 'css') The tag identifier used to locate inline css literals and extract them.
  • extension: (default: '.css') the extension used for extracted "virtual" files. Change to whatever file type you want webpack to process extracted literals as.

Note: css-literal-loader expects uncompiled JavaScript code, If you are using babel to transform tagged template literals, ensure the loader runs before the babel loader.

Related Repositories

riloadr

riloadr

Riloadr - A cross-browser framework-independent responsive images loader written ...

icss

icss

Interoperable CSS — a standard for loadable, linkable CSS ...

babel-plugin-react-css-modules

babel-plugin-react-css-modules

Transforms styleName to className using compile time CSS module resolution. ...

babel-plugin-css-in-js

babel-plugin-css-in-js

A plugin for Babel v6 which transforms inline styles defined in JavaScript modul ...

native-css

native-css

Convert pure CSS to React Style or javascript literal objects. ...


Top Contributors

jquense sullenor taion