babel-plugin-postcss-template-literals v1.0.0-alpha.2

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

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