postcss-lab-function - npm Package Compare versions

Comparing version 4.0.4 to 4.1.0

CHANGELOG.md

 # Changes to PostCSS Lab Function
 
+### 4.1.0 (minor)
+
+- Add gamut mapping for out of gamut colors.
+- Add conversion to `display-p3` as a wider gamut fallback.
+
+[Read more about out of gamut colors](https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-lab-function/README.md#out-of-gamut-colors)
+
+[Read more about `color(display-p3 0 0 0)`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color())
+
+```css
+.color-lab {
+	color: lab(40% 56.6 39);
+}
+
+/* with a display-p3 fallback : */
+.color {
+	color: rgb(179, 35, 35);
+	color: color(display-p3 0.64331 0.19245 0.16771);
+}
+```
+
 ### 4.0.4 (February 5, 2022)
@@ -4,0 +25,0 @@

dist/index.d.ts

 import type { PluginCreator } from 'postcss';
-/** Transform lab() and lch() functions in CSS. */
-declare const postcssPlugin: PluginCreator<{
-    preserve: boolean;
-}>;
+declare type pluginOptions = {
+    enableProgressiveCustomProperties?: boolean;
+    preserve?: boolean;
+    subFeatures?: {
+        displayP3?: boolean;
+    };
+};
+declare const postcssPlugin: PluginCreator<pluginOptions>;
 export default postcssPlugin;

dist/on-css-function.d.ts

 import type { FunctionNode } from 'postcss-value-parser';
-declare function onCSSFunction(node: FunctionNode): void;
-export default onCSSFunction;
+import { Declaration, Result } from 'postcss';
+export declare function onCSSFunctionSRgb(node: FunctionNode): void;
+export declare function onCSSFunctionDisplayP3(node: FunctionNode, decl: Declaration, result: Result, preserve: boolean): void;

package.json

 {
   "name": "postcss-lab-function",
-  "version": "4.0.4",
+  "version": "4.1.0",
   "description": "Use lab() and lch() color functions in CSS",
@@ -31,3 +31,4 @@ "author": "Jonathan Neal <[e-mail]>",
     "stryker": "stryker run --logLevel error",
-    "test": "node ./test/color/test.mjs && postcss-tape --ci && npm run test:exports",
+    "test": "node .tape.mjs && npm run test:exports",
+    "test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs",
     "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs"
@@ -39,8 +40,5 @@ },
   "dependencies": {
+    "@csstools/postcss-progressive-custom-properties": "^1.1.0",
     "postcss-value-parser": "^4.2.0"
   },
-  "devDependencies": {
-    "postcss": "^8.3.6",
-    "postcss-tape": "^6.0.1"
-  },
   "peerDependencies": {
@@ -57,5 +55,4 @@ "postcss": "^8.4"
     "rgba",
-    "hsl",
-    "hsla",
-    "hwb",
+    "lab",
+    "lch",
     "functional",
@@ -62,0 +59,0 @@ "notation",

README.md

@@ -9,17 +9,25 @@ # PostCSS Lab Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
 
-  [PostCSS Lab Function] lets you use `lab` and `lch` color functions in
-  CSS, following the [CSS Color] specification.
+[PostCSS Lab Function] lets you use `lab` and `lch` color functions in
+CSS, following the [CSS Color] specification.
 
 ```pcss
-:root {
-  --firebrick: lab(40% 56.6 39);
-  --firebrick-a50: lch(40% 68.8 34.5 / 50%);
+.color-lab {
+	color: lab(40% 56.6 39);
 }
 
+.color-lch {
+	color: lch(40% 68.735435 34.568626);
+}
+
 /* becomes */
 
-:root {
-  --firebrick: rgb(178, 34, 34);
-  --firebrick-a50: rgba(178, 34, 34, .5);
+.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);
+}
 ```
@@ -64,5 +72,29 @@
 ```pcss
+.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](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties#readme).
+
+```js
+postcssLabFunction({ enableProgressiveCustomProperties: false })
+```
+
+```pcss
 :root {
-  --firebrick: lab(40% 56.6 39);
-  --firebrick-a50: lch(40% 68.8 34.5 / 50%);
+	--firebrick: lab(40% 56.6 39);
 }
@@ -73,9 +105,56 @@
 :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%);
+	--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.<br>
+By default, it is enabled.
+
+`display-p3` can display wider gamut colors than `rgb` on some devices.
+
+```js
+postcssOKLabFunction({
+	subFeatures: {
+		displayP3: false
+	}
+})
+```
+
+```pcss
+.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.<br>
+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.<br>
+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`.
+
+## Copyright : color conversions
+
+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).
+
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
@@ -82,0 +161,0 @@ [css-url]: https://cssdb.org/#lab-function

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45779

increased by84.68%

Dev dependency count

0

decreased by-100%

Number of package files

20

increased by100%

Lines of code

269

increased by371.93%

Number of lines in readme file

168

increased by88.76%

Worsened metrics

Dependency count

3

increased by50%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@csstools/postcss-progressive-custom-properties@^1.1.0

• + Added@csstools/postcss-progressive-custom-properties@1.3.0(transitive)