Package Exports

postcss-color-functional-notation

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

Readme

PostCSS Color Functional Notation

PostCSS Color Functional Notation lets you use space and slash separated color notation in CSS, following the CSS Color specification.

:root {
  --firebrick: rgb(178 34 34);
  --firebrick-a50: color: rgb(70% 13.5% 13.5% / 50%);
  --firebrick-hsl: color: hsla(0 68% 42%);
  --firebrick-hsl-a50: color: hsl(0 68% 42% / 50%);
}

/* becomes */

:root {
  --firebrick: rgb(178, 34, 34);
  --firebrick-a50: color: rgba(178, 34, 34, .5);
  --firebrick-hsl: color: hsl(0, 68%, 42%);
  --firebrick-hsl-a50: color: hsla(0, 68%, 42%, .5);
}

Usage

Add PostCSS Color Functional Notation to your build tool:

npm install postcss-color-functional-notation --save-dev

Node

Use PostCSS Color Functional Notation to process your CSS:

import postcssColorFunctionalNotation from 'postcss-color-functional-notation';

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

PostCSS

Add PostCSS to your build tool:

npm install postcss --save-dev

Use PostCSS Color Functional Notation as a plugin:

import postcss from 'gulp-postcss';
import postcssColorFunctionalNotation from 'postcss-color-functional-notation';

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

Webpack

Add PostCSS Loader to your build tool:

npm install postcss-loader --save-dev

Use PostCSS Color Functional Notation in your Webpack configuration:

import postcssColorFunctionalNotation from 'postcss-color-functional-notation';

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

Gulp

Add Gulp PostCSS to your build tool:

npm install gulp-postcss --save-dev

Use PostCSS Color Functional Notation in your Gulpfile:

import postcss from 'gulp-postcss';
import postcssColorFunctionalNotation from 'postcss-color-functional-notation';

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

Grunt

Add Grunt PostCSS to your build tool:

npm install grunt-postcss --save-dev

Use PostCSS Color Functional Notation in your Gruntfile:

import postcssColorFunctionalNotation from 'postcss-color-functional-notation';

grunt.loadNpmTasks('grunt-postcss');

grunt.initConfig({
  postcss: {
    options: {
      use: [
       postcssColorFunctionalNotation(/* 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: rgb(178 34 34);
  --firebrick-a50: color: rgb(70% 13.5% 13.5% / 50%);
  --firebrick-hsl: color: hsla(0 68% 42%);
  --firebrick-hsl-a50: color: hsl(0 68% 42% / 50%);
}

/* becomes */

:root {
  --firebrick: rgb(178, 34, 34);
  --firebrick: rgb(178 34 34);
  --firebrick-a50: color: rgba(178, 34, 34, .5);
  --firebrick-a50: color: rgb(70% 13.5% 13.5% / 50%);
  --firebrick-hsl: color: hsl(0, 68%, 42%);
  --firebrick-hsl: color: hsla(0 68% 42%);
  --firebrick-hsl-a50: color: hsla(0, 68%, 42%, .5);
  --firebrick-hsl-a50: color: hsl(0 68% 42% / 50%);
}