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

postcss-lab-function

Package Overview
Dependencies
2
Maintainers
2
Versions
20
Issues
File Explorer

Advanced tools

postcss-lab-function

Use lab() and lch() color functions in CSS

    4.2.1latest

Version published
Maintainers
2
Weekly downloads
5,581,666
decreased by-23.26%

Weekly downloads

Readme

Source

PostCSS Lab Function PostCSS Logo

npm version CSS Standard Status Build Status Discord

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

.color-lab { color: lab(40% 56.6 39); } .color-lch { color: lch(40% 68.735435 34.568626); } /* becomes */ .color { color: rgb(179, 35, 35); color: color(display-p3 0.64331 0.19245 0.16771); } .color-lch { color: rgb(179, 35, 35); color: color(display-p3 0.64331 0.19245 0.16771); }

Usage

Add PostCSS Lab Function to your project:

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

Use it as a PostCSS plugin:

const postcss = require('postcss'); const postcssLabFunction = require('postcss-lab-function'); postcss([ postcssLabFunction(/* pluginOptions */) ]).process(YOUR_CSS /*, processOptions */);

PostCSS Lab Function 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.

postcssLabFunction({ preserve: true }) .color { color: lab(40% 56.6 39); } /* becomes */ .color { color: rgb(179, 35, 35); color: color(display-p3 0.64331 0.19245 0.16771); color: lab(40% 56.6 39); }

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.

postcssLabFunction({ enableProgressiveCustomProperties: false }) :root { --firebrick: lab(40% 56.6 39); } /* becomes */ :root { --firebrick: rgb(178, 34, 34); /* will never be used, not even in older browser */ --firebrick: color(display-p3 0.64331 0.19245 0.16771); /* will never be used, not even in older browser */ --firebrick: lab(40% 56.6 39); }

subFeatures

displayP3

The subFeatures.displayP3 option determines if color(display-p3 ...) is used as a fallback.
By default, it is enabled.

display-p3 can display wider gamut colors than rgb on some devices.

postcssOKLabFunction({ subFeatures: { displayP3: false } }) .color { color: lab(40% 56.6 39); } /* becomes */ .color { color: rgb(179, 35, 35); color: lab(40% 56.6 39); }

Out of gamut colors

Depending on the browser implementation out of gamut colors may be clipped, resulting in a different color.
Fallback values generated by PostCSS Lab Function are always mapped to a close alternative in sRGB.

When setting preserve to true the original values will be used by some browsers and these may be clipped.
Certain browsers will have an incorrect color if this occurs.

If the plugin detects out of gamut colors it will emit a warning :

"lch(95% 210 285)" is out of gamut for "display-p3". When "preserve: true" is set this will lead to unexpected results in some browsers.

To resolve this warning you can use a color that is in gamut for display-p3.

This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/tree/main/css-color-4. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).

Keywords

FAQs

What is postcss-lab-function?

Use lab() and lch() color functions in CSS

Is postcss-lab-function popular?

The npm package postcss-lab-function receives a total of 4,646,901 weekly downloads. As such, postcss-lab-function popularity was classified as popular.

Is postcss-lab-function well maintained?

We found that postcss-lab-function 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