rework-expand v0.1.0

rework-expand

A Rework plugin.

Basics

Input css

:expand {
  expand-selector: .w25, .w50, .w75, .w100;
  expand-width: 25%, 50%, 75%, 100%
}

Call plugin

var rework       = require('rework');
var reworkExpand = require('rework-expand');

var newCss = rework('some css here')
  .use(reworkExpand());

Makes

.w25 {
  width: 25%;
}
.w50 {
  width: 50%;
}
.w75 {
  width: 75%;
}
.w100 {
  width: 100%;
}

With rework-vars

var rework       = require('rework');
var reworkVars   = require('rework-var');
var reworkExpand = require('rework-expand');

var newCss = rework('some css here')
  .use(reworkVars())
  .use(reworkExpand());

This

:root {
  --colors: #001f3f, #001f3f, #7FDBFF;
  --color-names: .navy, .blue, .aqua;
}
:expand {
  expand-selector: var(--color-names);
  expand-background-color: var(--colors);
  color: #fff;
}

Makes

.navy {
  background-color: #001f3f;
  color: #fff;
}
.blue {
  background-color: #001f3f;
  color: #fff;
}
.aqua {
  background-color: #7FDBFF;
  color: #fff;
}

Using token replacement

The following tokens are available by default:

• [i] for the array index
• [j] for the array index + 1
• [l] for the array length
• [v] for the value, ie arrayi

Tokens are used before the comma separated list of values (array), and should be followed by a comma.

:root {
  --widths: 25, 50, 75, 100;
}
:expand {
  expand-selector: .width--[v], var(--widths);
  expand-width:  [v]%, var(--widths);
}
:expand {
  expand-selector: .width--[j]of[l], var(--widths);
  expand-width:  [v]%, var(--widths);
}
:expand {
  expand-selector: .width--[i];
  expand-width:  [v]px, var(--widths);
}

Makes

.width--25 {
  width: 25%;
}
.width--50 {
  width: 50%;
}
.width--75 {
  width: 75%;
}
.width--100 {
  width: 100%;
}

.width--1of4 {
  width: 25%;
}
.width--2of4 {
  width: 50%;
}
.width--3of4 {
  width: 75%;
}
.width--4of4 {
  width: 100%;
}

.width--0 {
  width: 25px;
}
.width--1 {
  width: 50px;
}
.width--2 {
  width: 75px;
}
.width--3 {
  width: 100px;
}

Different replacements for the same four tokens can be passed in using an options argument.

var options = {
  i: '<index>',
  j: '<index1>',
  l: '<length>',
  v: '<value>'
}

var newCss = rework('some css here')
  .use(reworkExpand(options));

License

MIT