/postcss-opposite

Primary LanguageJavaScriptMIT LicenseMIT

postcss-opposite Travis Build Status

opposite() transforms top and bottom, right and left, center, ltr and rtl.

Install

npm i --save-dev postcss-opposite

Usage

var fs = require('fs');
var postcss = require('postcss');
var customProperties = require('postcss-custom-properties');
var opposite = require('postcss-opposite');

var css = fs.readFileSync('input.css', 'utf8');

var output = postcss()
  .use(customProperties())
  .use(opposite())
  .process(css)
  .css;

PostCSS

/* input.css */
$direction: opposite(left);

body {
  direction: opposite(ltr);
  float: $direction;
  margin-$(direction): 1em;
  text-align: opposite(center);
}

Compiled CSS

/* output.css */

body {
  direction: rtl;
  float: right;
  margin-right: 1em;
  test-align: center;
}

Contributing

Make a branch, npm test often, submit a new pull when it passes.

git clone https://github.com/stephenway/postcss-opposite.git
git checkout -b patch-1
npm i
npm test

Resources