Package Exports

postcss-lab-function

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-lab-function) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostCSS Lab Function

PostCSS Lab Function lets you use lab and lch color functions in CSS, following the CSS Color specification.

:root {
  --firebrick: lab(40 56.6 39);
  --firebrick-a50: lch(40 68.8 34.5 / 50%);
}

/* becomes */

:root {
  --firebrick: rgb(178, 34, 34);
  --firebrick-a50: rgba(178, 34, 34, .5);
}

Usage

Add PostCSS Lab Function to your build tool:

npm install postcss-lab-function --save-dev

Node

Use PostCSS Lab Function to process your CSS:

import postcssLabFunction from 'postcss-lab-function';

postcssLabFunction.process(YOUR_CSS, /* processOptions */, /* pluginOptions */);

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use PostCSS Lab Function as a plugin:

import postcss from 'gulp-postcss';
import postcssLabFunction from 'postcss-lab-function';

postcss([
  postcssLabFunction(/* pluginOptions */)
]).process(YOUR_CSS);

Webpack

Add PostCSS Loader to your build tool:

npm install postcss-loader --save-dev

Use PostCSS Lab Function in your Webpack configuration:

import postcssLabFunction from 'postcss-lab-function';

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          { loader: 'postcss-loader', options: {
            ident: 'postcss',
            plugins: () => [
              postcssLabFunction(/* pluginOptions */)
            ]
          } }
        ]
      }
    ]
  }
}

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use PostCSS Lab Function in your Gulpfile:

import postcss from 'gulp-postcss';
import postcssLabFunction from 'postcss-lab-function';

gulp.task('css', () => gulp.src('./src/*.css').pipe(
  postcss([
    postcssLabFunction(/* pluginOptions */)
  ])
).pipe(
  gulp.dest('.')
));

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use PostCSS Lab Function in your Gruntfile:

import postcssLabFunction from 'postcss-lab-function';

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      use: [
       postcssLabFunction(/* pluginOptions */)
      ]
    },
    dist: {
      src: '*.css'
    }
  }
});

Options

preserve

The preserve option determines whether the original functional color notation is preserved. By default, it is not preserved.

postcssImageSetFunction({ preserve: true })

:root {
  --firebrick: lab(40 56.6 39);
  --firebrick-a50: lch(40 68.8 34.5 / 50%);
}

/* becomes */

:root {
  --firebrick: rgb(178, 34, 34);
  --firebrick: lab(40 56.6 39);
  --firebrick-a50: rgba(178, 34, 34, .5);
  --firebrick-a50: lch(40 68.8 34.5 / 50%);
}