Big update!Introducing GitHub Bot Commands. Learn more
Socket
Log inBook a demo

postcss-color-functional-notation

Package Overview
Dependencies
1
Maintainers
2
Versions
17
Issues
File Explorer

Advanced tools

postcss-color-functional-notation

Use space and slash separated color notation in CSS

    4.2.4latest

Version published
Maintainers
2
Weekly downloads
6,872,980
decreased by-10.01%

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 CLIWebpackCreate React AppGulpGrunt

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: 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%); }

Keywords

FAQs

What is postcss-color-functional-notation?

Use space and slash separated color notation in CSS

Is postcss-color-functional-notation popular?

The npm package postcss-color-functional-notation receives a total of 6,496,091 weekly downloads. As such, postcss-color-functional-notation popularity was classified as popular.

Is postcss-color-functional-notation well maintained?

We found that postcss-color-functional-notation demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.It has 2 open source maintainers collaborating on the project.

Last updated on 08 Jul 2022

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 Socket
Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc