postcss-functions

What is postcss-functions?

The postcss-functions npm package allows you to define and use custom functions within your CSS. This can be useful for a variety of tasks such as calculations, transformations, and dynamic value generation.

What are postcss-functions's main functionalities?

Custom Function Definitions

This feature allows you to define custom functions that can be used within your CSS. In the example, a function `calcWidth` is defined to add two pixel values together.

const postcss = require('postcss');
const functions = require('postcss-functions');

const css = `
  .example {
    width: calcWidth(100px, 50px);
  }
`;

const output = postcss([
  functions({
    functions: {
      calcWidth: (value1, value2) => {
        return parseFloat(value1) + parseFloat(value2) + 'px';
      }
    }
  })
]).process(css).css;

console.log(output);

Dynamic Value Generation

This feature allows you to generate dynamic values within your CSS. In the example, a function `dynamicColor` is defined to generate a random color.

const postcss = require('postcss');
const functions = require('postcss-functions');

const css = `
  .example {
    color: dynamicColor();
  }
`;

const output = postcss([
  functions({
    functions: {
      dynamicColor: () => {
        return '#'+Math.floor(Math.random()*16777215).toString(16);
      }
    }
  })
]).process(css).css;

console.log(output);

String Manipulation

This feature allows you to manipulate strings within your CSS. In the example, a function `appendText` is defined to concatenate two strings.

const postcss = require('postcss');
const functions = require('postcss-functions');

const css = `
  .example {
    content: appendText('Hello', ' World');
  }
`;

const output = postcss([
  functions({
    functions: {
      appendText: (text1, text2) => {
        return `'${text1 + text2}'`;
      }
    }
  })
]).process(css).css;

console.log(output);

Other packages similar to postcss-functions

postcss-mixins

The postcss-mixins package allows you to define and use mixins in your CSS. While it doesn't provide custom functions, it offers a way to reuse chunks of CSS code, which can achieve similar results in some cases.

postcss-simple-vars

The postcss-simple-vars package allows you to use variables in your CSS. While it doesn't provide custom functions, it can be used to store and reuse values, which can simplify complex CSS.

postcss-calc

The postcss-calc package allows you to reduce calc() references in your CSS. It doesn't provide custom functions but can simplify mathematical expressions in your CSS.

README

postcss-functions

PostCSS plugin for exposing JavaScript functions.

Installation

npm install postcss-functions

Usage

var fs = require('fs');
var postcss = require('postcss');
var functions = require('postcss-functions');

var options = {
	//options
};

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

postcss()
  .use(functions(options))
  .process(css)
  .then(function (result) {
    var 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:

var color = require('css-color-converter');

require('postcss-functions')({
    functions: {
        darken: function (value, frac) {
           var darken = 1 - parseFloat(frac);
           var rgba = color(value).toRgbaArray();
           var r = rgba[0] * darken;
           var g = rgba[1] * darken;
           var b = rgba[2] * darken;
           return color([r,g,b]).toHexString();
        }
    }
});

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

glob

Type: string|string[]

Loads files as functions based on one or more glob patterns. The function name will correspond with the file name.

Example:

require('postcss-functions')({
	glob: path.join(__dirname, 'functions', '*.js')
});