This plugin transforms CSS declaration values using a custom msu
unit. Instances of this unit are replaced with numbers from a modular scale.
npm install postcss-modular-scale-unit
The ratio and base parameters of your modular scale can be supplied with the --modular-scale
custom property:
--modular-scale: [ratio] [...bases]
Ratio can be supplied as a:
1.5
)3/2
)perfectfifth
)The following are all equivalent:
:root {
--modular-scale: 1.5;
--modular-scale: 3/2;
--modular-scale: perfectfifth;
}
Bases are optional, and can be supplied as one or more numbers greater than or equal to one, defaulting to 1
when omitted. The following results in a scale that looks like this:
:root {
--modular-scale: perfectfifth 1 1.125 1.25;
}
With the --modular-scale
property set, simply append the custom unit to positive or negative integers that correlate with the steps of your scale. The output will be a plain number.
Input:
:root {
--modular-scale: 3/2;
}
.Example {
line-height: 1msu;
font-size: calc(1msu * 1em);
width: calc(-1msu * 100%);
}
Output:
.Example {
line-height: 1.5;
font-size: calc(1.5 * 1em);
width: calc(0.667 * 100%);
}
If needed, see postcss-cssnext or postcss-calc for calc()
handling.
var fs = require('fs')
var postcss = require('postcss')
var modularScaleUnit = require('postcss-modular-scale-unit')
var output = postcss()
.use(modularScaleUnit())
.process(fs.readFileSync('input.css', 'utf8'))
.css
See the PostCSS usage docs docs for more examples.
This plugin is inspired by postcss-modular-scale and postcss-vertical-rhythm. The goal is to provide a way to use modular scale values as if they were native CSS units.