babel-plugin-csstag
v0.2.1
Published
Babel plugin for compiling CSS Modules in csstag's tagged templates to actual styles for production.
Downloads
9
Maintainers
Readme
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 thancss
(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.