babel-plugin-csstag

Babel plugin for compiling CSS Modules in csstag's tagged templates to actual styles for production.

You can find examples for webpack and rollup here: https://github.com/sgtpep/csstag/tree/master/babel-plugin-csstag/examples.

Usage with webpack

In webpack.config.js override imports of csstag with a replacement stub script babel-plugin-csstag/csstag:

...
  resolve: {
    alias: {
      csstag: 'babel-plugin-csstag/csstag',
    },
  },
...

In webpack.config.js enable a Babel plugin babel-plugin-csstag:

import babel from 'rollup-plugin-babel';
...
  module: {
    rules: [
      ...
      {
        exclude: /\/node_modules\//,
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            plugins: ['babel-plugin-csstag'],
            presets: ['@babel/env'],
          },
        },
      },
      ...
    ],
  },
...

Usage with rollup

In rollup.config.js override imports of csstag with a replacement stub script node_modules/babel-plugin-csstag/csstag.js (replace an object key csstag with an exact import path that you used in your app, which may also be './node_modules/csstag/index.min.js'):

import alias from 'rollup-plugin-alias';
...
  plugins: [
    ...
    alias({
      csstag: 'node_modules/babel-plugin-csstag/csstag.js',
    }),
    ...
  ],
...

In rollup.config.js enable a Babel plugin babel-plugin-csstag:

import babel from 'rollup-plugin-babel';
...
  plugins: {
    ...
    babel({
      plugins: ['babel-plugin-csstag'],
      presets: ['@babel/env'],
    }),
    ...
  },
...

Options

To pass options add an object with them to your Babel config:

...
plugins: [
  ...
  ['babel-plugin-csstag', { tag: 'custom' }],
  ...
],
...

• tag: A name of a tag function if you used something other than css (default: css).

All other provided options will be passed to csstag as is. They should be the same as ones you used in runtime if any.