Huge news!Announcing our $20M Series A led by Andreessen Horowitz.Learn more
Socket
Socket
Log inDemoInstall

postcss-color-functional-notation

Package Overview
Dependencies
6
Maintainers
3
Versions
24
Issues
File Explorer

Advanced tools

Install Socket

Protect your apps from supply chain attacks

Install

postcss-color-functional-notation

Use space and slash separated color notation in CSS

    6.0.2latest
    GitHub
    npm

Version published
Maintainers
3
Weekly downloads
5,751,616
decreased by-6.99%

Weekly downloads

Readme

Source

PostCSS Color Functional Notation PostCSS Logo

NPM Version CSS Standard Status Build Status Discord

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: rgb(70% 13.5% 13.5% / 50%);
  --firebrick-hsl: hsla(0 68% 42%);
  --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
}

/* becomes */

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

Usage

Add PostCSS Color Functional Notation to your project:

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

Use PostCSS Color Functional Notation to process your CSS:

const postcss = require('postcss');
const postcssColorFunctionalNotation = require('postcss-color-functional-notation');

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

PostCSS Color Functional Notation runs in all Node environments, with special instructions for:

NodePostCSS CLIWebpackGulpGrunt

Options

preserve

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

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

/* becomes */

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

enableProgressiveCustomProperties

The enableProgressiveCustomProperties option determines whether the original notation is wrapped with @supports when used in Custom Properties. By default, it is enabled.

⚠️ We only recommend disabling this when you set preserve to false or if you bring your own fix for Custom Properties. See what the plugin does in its README.

postcssColorFunctionalNotation({ enableProgressiveCustomProperties: false })

Keywords

FAQs

Last updated on 09 Oct 2023

Did you know?

Socket installs a GitHub app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install
SocketSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc