postcss-plugin-utilities

A list of utilities for creating [PostCSS] plugins

[PostCSS]: https://github.com/postcss/postcss
[Gulp]: https://github.com/gulpjs/gulp
[exact-regex]: https://github.com/arpadHegedus/exact-regex.git
[overwrite-object]: https://github.com/arpadHegedus/overwrite-object.git
[mathjs]: http://mathjs.org/

Installation

``
npm install postcss-plugin-utilities
`

Utilities

$3

Do calculations on css (uses [mathjs])

Example:
`js
let util = require('postcss-plugin-utilities'),
width = '1600px',
height = util.calc('x/16*9', width);
// height will be 900px
`

$3

Returns either black or white depending on contrasting a color. Useful for calculating overlay text color for an unknown background-color.

$3

Updates a selector with SASS like syntax

Example:
`js
let util = require('postcss-plugin-utilities'),
selector = 'p, ul, ol',
newSelector = util.eachSelector(selector, '&:before');
// newSelector will be 'p:before, ul:before, ol:before'
`

$3

Go through an array and filter the values as per set rules and falling back to defaults.

Example:
`js
let util = require('postcss-plugin-utilities'),
values = ['20px', 'center', 'black'],
theObject = util.filterObject(values, {
// rules are set up using an object,
// the values being an array of correct values
// or a validation function
align: ['left', 'right', 'center'], // left, right or center are accepted values
blackOrWhite: [(testingValue) => { // a function can be passedin to validate
if(['black', 'white'].indexOf(testingValue) >= 0) { return true; }
return false;
}],
size: [util.isSize], // we can also link in functions for validation
shadow: [util.isBoxShadow]
}, {
// a set of defaults can be passed in as well
size: '30px',
shadow: '1px 1px 1px black'
});
// theObject will result in
// {
// align: 'center',
// blackOrWhite: 'black',
// size: '20px',
// shadow: '1px 1px 1px black'
// }
`

$3

Get an object of RGB and possibly A values from a color string

$3

Wrap filter object and return sides values the same way as margin and padding works in CSS

Example:
`js
let util = require('postcss-plugin-utilities'),
values = ['20px', '10px'],
sides = util.getSides(values, {
'border-top': [util.isSize],
'border-right': [util.isSize],
'border-bottom': [util.isSize],
'border-left': [util.isSize]
});
// sides will equal to
// {
// 'border-top': '20px',
// 'border-right': '10px',
// 'border-bottom': '20px',
// 'border-left': '10px',
// }
``

$3

Convert a hex color to RGB

$3

Returns true if a value is a valid bezier

$3

Return true if a value is a valid border

$3

Return true if a value is a valid box-shadow

$3

Return true if a value is a valid color

$3

Return true if a value is a valid cursor

$3

Return true if a value is a valid HTML element

$3

Return true if a value is a valid number (unitless)

$3

Return true if a value is a valid CSS property

$3

Checks if a value matches a regex (uses [exact-regex])

$3

Return true if a value is a valid CSS size list (eg.: padding, margin)

$3

Return true if a value is a valid CSS size

$3

Return true if a value is a valid CSS animation step

$3

Return true if a value is a valid text-shadow

$3

Return true if a value is a valid time (eg.: 3s)

$3

Check if a string is a transition value

$3

Return true if a value is a valid CSS URL

$3

Convert a named color to its hex value

$3

Merge two arrays with the same properties to be overwritten with values (uses [overwrite-object])

$3

Recursively delete nodes

$3

Convert an RGB value to its hex value

$3

Parse a SASS function and call a JS function on it

$3

Get the value of a sass variable

$3

Check if sass variable exists