search

art-bazhin / babel-plugin-postcss-template-literals

Process tagged template literals with PostCSS
MIT License
5 stars 0 forks source link

readme

babel-plugin-postcss-template-literals

build status dependencies status

Babel plugin for running PostCSS on tagged template literals at build time. Based on babel-plugin-csjs-postcss by Ryan Tsao.

Plugin Options

Option [default value] Meaning
tag ['css'] A tag that marks literals for processing
replace Tag replacement. Set an empty string if you want to remove the tag
plugins PostCSS plugins
options PostCSS options

Autoprefixer Example

npm i babel-plugin-postcss-template-literals autoprefixer --save-dev

Before:

css`

.foo {
  transform: ${foo};
}

`;

After:

css`

.foo {
  -webkit-transform: ${ foo };
          transform: ${ foo };
}

`;

.babelrc

{
  "plugins": [["postcss-template-literals", {
    "plugins": ["autoprefixer"]
  }]]
}

Advanced Configuration

Before:

cssTag`

.foo {
  transform: ${foo};
}

`;

After:

newCssTag`

.foo {
  -webkit-transform: ${ foo };
          transform: ${ foo };
}

`;

.babelrc

{
  "plugins": [["postcss-template-literals", {
    "tag": "cssTag",
    "replace": "newCssTag",
    "plugins": [["autoprefixer", {"browsers": ["last 2 versions"]}]]
  }]]
}