babel-plugin-postcss-template-literals

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"]}]]
  }]]
}