Package Exports

postcss-functions

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (postcss-functions) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

postcss-functions

PostCSS plugin for exposing JavaScript functions.

Installation

npm install --save-dev postcss postcss-functions

Usage

import fs from 'fs';
import postcss from 'postcss';
import functions from 'postcss-functions';

const options = {
    //options
};

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

postcss()
  .use(functions(options))
  .process(css)
  .then((result) => {
    const output = result.css;
  });

Example of a function call:

body {
  prop: foobar();
}

Options

`functions`

Type: Object

An object containing functions. The function name will correspond with the object key.

Example:

import postcssFunctions from 'postcss-functions';
import { fromString, fromRgb } from 'css-color-converter';

function darken(value, frac) {
  const darken = 1 - parseFloat(frac);
  const rgba = fromString(value).toRgbaArray();
  const r = rgba[0] * darken;
  const g = rgba[1] * darken;
  const b = rgba[2] * darken;
  return fromRgb([r,g,b]).toHexString();
}

postcssFunctions({
  functions: { darken }
});

.foo {
  /* make 10% darker */
  color: darken(blue, 0.1);
}

Hey, what happened to `glob`?

Versions prior to 4.0.0 had a globbing feature built in, but I've since decided to remove this feature from postcss-functions. This means one less dependency and a smaller package size. For people still interested in this feature, you are free to pair postcss-functions with the globbing library of your choice and pass the imported JavaScript files to the functions option as described above.