# postcss-plugin-utilities

> A list of utilities for creating PostCSS plugins

Latest version **2.2.9** (published 2018-03-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-plugin-utilities
pnpm add postcss-plugin-utilities
yarn add postcss-plugin-utilities
bun add postcss-plugin-utilities
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.9 |
| Published | 2018-03-29 |
| First published | 2017-04-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 36.8 KB |
| Known vulnerabilities | 0 (+7 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Arpad Hegedus |
| Maintainers | arpadhegedus |
| Keywords | util, tools, postcss, framework |

## Links

- npm: https://www.npmjs.com/package/postcss-plugin-utilities
- Repository: https://github.com/arpadHegedus/postcss-plugin-utilities
- Homepage: https://github.com/arpadHegedus/postcss-plugin-utilities#readme
- Issues: https://github.com/arpadHegedus/postcss-plugin-utilities.git/issues
- npm.io page: https://npm.io/package/postcss-plugin-utilities

## Dependencies (5)

- [mathjs](https://npm.io/package/mathjs.md) ^3.16.4
- [postcss](https://npm.io/package/postcss.md) ^6.0.19
- [exact-regex](https://npm.io/package/exact-regex.md) ^1.0.3
- [overwrite-object](https://npm.io/package/overwrite-object.md) ^1.0.5
- [postcss-value-parser](https://npm.io/package/postcss-value-parser.md) ^3.3.0

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@atlaskit/theme](https://npm.io/package/@atlaskit/theme.md) — 402.0K weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads

## Recent versions

- 2.2.9 (latest) — 2018-03-29
- 2.2.8 — 2018-03-28
- 2.2.7 — 2018-03-28
- 2.2.6 — 2018-03-28
- 2.2.5 — 2018-03-28
- 2.2.4 — 2018-03-22
- 2.2.3 — 2018-03-20
- 2.2.2 — 2018-03-12
- 2.2.1 — 2018-03-09
- 2.2.0 — 2018-03-09
- 2.1.1 — 2017-10-11
- 2.1.0 — 2017-10-11
- 2.0.1 — 2017-08-23
- 2.0.0 — 2017-07-04
- 1.0.5 — 2017-04-27
- … 5 more at https://npm.io/package/postcss-plugin-utilities/versions

## README

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

### calc(calculation, values, return_with_units = true)

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
```

### contrastColor(color)

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

### eachSelector(selector, update)

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'
```

### filterObject(values, rules, defaults = null)

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'
    // }
```

### getRGB(color)

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

### getSides(values, rules)

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',
    // }
```

### hexToRGB(hexValue)

Convert a hex color to RGB

### isBezier(value)

Returns true if a value is a valid bezier

### isBorder(value)

Return true if a value is a valid border

### isBoxShadow(value)

Return true if a value is a valid box-shadow

### isColor(value)

Return true if a value is a valid color

### isCursor(value)

Return true if a value is a valid cursor

### isHTML(value)

Return true if a value is a valid HTML element

### isNumber(value)

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

### isProperty(value)

Return true if a value is a valid CSS property

### isRegex(value, regex)

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

### isSizeList(value)

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

### isSize(value)

Return true if a value is a valid CSS size

### isStep(value)

Return true if a value is a valid CSS animation step

### isTextShadow(value)

Return true if a value is a valid text-shadow

### isTime(value)

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

### isTransition(value)

Check if a string is a transition value

### isURL(value)

Return true if a value is a valid CSS URL

### nameToHex(colorName)

Convert a named color to its hex value

### overwrite(valuesObj, defaultObj)

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

### removeNode(node)

Recursively delete nodes

### rgbToHex(rgbValue)

Convert an RGB value to its hex value

### sassFunction(nodes, funcName, func)

Parse a SASS function and call a JS function on it

### sassGetVar(variable, node)

Get the value of a sass variable

### sassHasVar(variable, node)

Check if sass variable exists

---
_Source: https://npm.io/package/postcss-plugin-utilities · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._