postcss-closure-mixins

PostCSS plugin for closure stylesheet/GSS mixins

Usage no npm install needed!

<script type="module">
  import postcssClosureMixins from 'https://cdn.skypack.dev/postcss-closure-mixins';
</script>

README

PostCSS Sassy Mixins Build Status

PostCSS plugin for GWT/Google Closure Stylesheets like mixins.

This plugin is based on postcss-sassy-mixins. Since Closure stylesheets feature another, arguably weird, syntax, this plugin changes its at-Rules and variable handling.

Installation

npm install postcss-closure-mixins

Usage

var postcss = require('postcss');
var mixins = require('postcss-closure-mixins');

var options = {
   // options here
};

var output = postcss()
  .use(mixins(options))
  .process(css)
  .css;
@defmixin border-radius(RADIUS) {
  -webkit-border-radius: RADIUS;
     -moz-border-radius: RADIUS;
      -ms-border-radius: RADIUS;
          border-radius: RADIUS;
}

.box { @mixin border-radius(10px); }

Turns into:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}