babel-plugin-postcss-template-literals

Babel plugin for running PostCSS on tagged template literals at build time.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
babel-plugin-postcss-template-literals
1.0.0-alpha.25 years ago6 years agoMinified + gzip package size for babel-plugin-postcss-template-literals in KB

Readme

babel-plugin-postcss-template-literals
!build statusbuild-badgebuild-href !dependencies statusdeps-badgedeps-href
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"]}]]
  }]]
}