@csstools/postcss-relative-color-syntax 2.0.8 → 2.0.9

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changes to PostCSS Relative Color Syntax
 
+### 2.0.9
+
+_December 31, 2023_
+
+- Updated [`@csstools/css-tokenizer`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer) to [`2.2.3`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer/CHANGELOG.md#223) (patch)
+- Updated [`@csstools/css-parser-algorithms`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms) to [`2.5.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms/CHANGELOG.md#250) (minor)
+- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.5.1`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#151) (patch)
+
 ### 2.0.8
 
 _December 15, 2023_
@@ -17,10 +25,4 @@ _October 9, 2023_
 - Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.4.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#140) (minor)
 - Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.0.2`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#302) (patch)
 
-### 2.0.6
-
-_October 2, 2023_
-
-- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.3.3`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#133) (patch)
-
 [Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-relative-color-syntax/CHANGELOG.md)

package/README.md

@@ -1,6 +1,6 @@
 # PostCSS Relative Color Syntax [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][PostCSS]
 
-[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-relative-color-syntax.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/relative-color-syntax.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
+[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-relative-color-syntax.svg" height="20">][npm-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]<br><br>[<img alt="Baseline Status" src="https://cssdb.org/images/badges-baseline/relative-color-syntax.svg" height="20">][css-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/relative-color-syntax.svg" height="20">][css-url] 
 
 ```bash
 npm install @csstools/postcss-relative-color-syntax --save-dev
@@ -20,6 +20,9 @@ npm install @csstools/postcss-relative-color-syntax --save-dev
 }
 ```
 
+> [!NOTE]
+> We can not dynamically resolve `var()` arguments in relative color syntax, only static values will work.
+
 ## Usage
 
 Add [PostCSS Relative Color Syntax] to your project:

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),s=require("@csstools/css-tokenizer"),r=require("@csstools/css-color-parser"),t=require("@csstools/css-parser-algorithms");function hasFallback(e){const s=e.parent;if(!s)return!1;const r=e.prop.toLowerCase(),t=s.index(e);for(let e=0;e<t;e++){const t=s.nodes[e];if("decl"===t.type&&t.prop.toLowerCase()===r)return!0}return!1}const o=/(rgb|hsl|hwb|lab|lch|oklch|oklab|color)\(\s*?from/i;function hasSupportsAtRuleAncestor(e){let s=e.parent;for(;s;)if("atrule"===s.type){if("supports"===s.name.toLowerCase()&&o.test(s.params))return!0;s=s.parent}else s=s.parent;return!1}const a=/(rgb|hsl|hwb|lab|lch|oklch|oklab|color)\(/i,n=/^(rgb|hsl|hwb|lab|lch|oklch|oklab|color)$/i,l=/from/i,basePlugin=e=>({postcssPlugin:"postcss-relative-color-syntax",Declaration:o=>{const i=o.value;if(!a.test(i))return;if(!l.test(i))return;if(hasFallback(o))return;if(hasSupportsAtRuleAncestor(o))return;const u=s.tokenize({css:i}),c=t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(u),(e=>{if(t.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.Experimental))return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;if(!s.syntaxFlags.has(r.SyntaxFlag.RelativeColorSyntax))return;return r.serializeRGB(s)}})),p=t.stringify(c);if(p===i)return;let f=p;e?.subFeatures.displayP3&&(f=t.stringify(t.replaceComponentValues(t.parseCommaSeparatedListOfComponentValues(u),(e=>{if(t.isFunctionNode(e)&&n.test(e.getName())){const s=r.color(e);if(!s)return;if(s.syntaxFlags.has(r.SyntaxFlag.HasNoneKeywords))return;if(!s.syntaxFlags.has(r.SyntaxFlag.RelativeColorSyntax))return;return r.colorDataFitsRGB_Gamut(s)?r.serializeRGB(s):r.serializeP3(s)}})))),o.cloneBefore({value:p}),e?.subFeatures.displayP3&&f!==p&&o.cloneBefore({value:f}),e?.preserve||o.remove()}});basePlugin.postcss=!0;const postcssPlugin=s=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},s);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-relative-color-syntax",plugins:[e(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;
+"use strict";var s=require("@csstools/postcss-progressive-custom-properties"),e=require("@csstools/css-tokenizer"),t=require("@csstools/css-color-parser"),r=require("@csstools/css-parser-algorithms");function hasFallback(s){const e=s.parent;if(!e)return!1;const t=s.prop.toLowerCase(),r=e.index(s);for(let s=0;s<r;s++){const r=e.nodes[s];if("decl"===r.type&&r.prop.toLowerCase()===t)return!0}return!1}const o=/(rgb|hsl|hwb|lab|lch|oklch|oklab|color)\(\s*?from/i;function hasSupportsAtRuleAncestor(s){let e=s.parent;for(;e;)if("atrule"===e.type){if("supports"===e.name.toLowerCase()&&o.test(e.params))return!0;e=e.parent}else e=e.parent;return!1}const a=/(rgb|hsl|hwb|lab|lch|oklch|oklab|color)\(/i,l=/^(rgb|hsl|hwb|lab|lch|oklch|oklab|color)$/i,n=/from/i,basePlugin=s=>({postcssPlugin:"postcss-relative-color-syntax",Declaration:o=>{const i=o.value;if(!a.test(i)||!n.test(i))return;if(hasFallback(o))return;if(hasSupportsAtRuleAncestor(o))return;const c=e.tokenize({css:i}),u=r.replaceComponentValues(r.parseCommaSeparatedListOfComponentValues(c),(s=>{if(!r.isFunctionNode(s)||!l.test(s.getName()))return;const e=t.color(s);return e&&!e.syntaxFlags.has(t.SyntaxFlag.Experimental)&&!e.syntaxFlags.has(t.SyntaxFlag.HasNoneKeywords)&&e.syntaxFlags.has(t.SyntaxFlag.RelativeColorSyntax)?t.serializeRGB(e):void 0})),p=r.stringify(u);if(p===i)return;let g=p;s?.subFeatures.displayP3&&(g=r.stringify(r.replaceComponentValues(r.parseCommaSeparatedListOfComponentValues(c),(s=>{if(!r.isFunctionNode(s)||!l.test(s.getName()))return;const e=t.color(s);return e&&!e.syntaxFlags.has(t.SyntaxFlag.Experimental)&&!e.syntaxFlags.has(t.SyntaxFlag.HasNoneKeywords)&&e.syntaxFlags.has(t.SyntaxFlag.RelativeColorSyntax)?t.colorDataFitsRGB_Gamut(e)?t.serializeRGB(e):t.serializeP3(e):void 0})))),o.cloneBefore({value:p}),s?.subFeatures.displayP3&&g!==p&&o.cloneBefore({value:g}),s?.preserve||o.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return t.subFeatures=Object.assign({displayP3:!0},t.subFeatures),t.enableProgressiveCustomProperties&&(t.preserve||t.subFeatures.displayP3)?{postcssPlugin:"postcss-relative-color-syntax",plugins:[s(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;

package/dist/index.mjs

@@ -1 +1 @@
-import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e}from"@csstools/css-tokenizer";import{color as r,SyntaxFlag as t,serializeRGB as o,colorDataFitsRGB_Gamut as a,serializeP3 as l}from"@csstools/css-color-parser";import{replaceComponentValues as n,parseCommaSeparatedListOfComponentValues as i,isFunctionNode as c,stringify as u}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const r=s.prop.toLowerCase(),t=e.index(s);for(let s=0;s<t;s++){const t=e.nodes[s];if("decl"===t.type&&t.prop.toLowerCase()===r)return!0}return!1}const p=/(rgb|hsl|hwb|lab|lch|oklch|oklab|color)\(\s*?from/i;function hasSupportsAtRuleAncestor(s){let e=s.parent;for(;e;)if("atrule"===e.type){if("supports"===e.name.toLowerCase()&&p.test(e.params))return!0;e=e.parent}else e=e.parent;return!1}const f=/(rgb|hsl|hwb|lab|lch|oklch|oklab|color)\(/i,b=/^(rgb|hsl|hwb|lab|lch|oklch|oklab|color)$/i,h=/from/i,basePlugin=s=>({postcssPlugin:"postcss-relative-color-syntax",Declaration:p=>{const m=p.value;if(!f.test(m))return;if(!h.test(m))return;if(hasFallback(p))return;if(hasSupportsAtRuleAncestor(p))return;const g=e({css:m}),y=n(i(g),(s=>{if(c(s)&&b.test(s.getName())){const e=r(s);if(!e)return;if(e.syntaxFlags.has(t.Experimental))return;if(e.syntaxFlags.has(t.HasNoneKeywords))return;if(!e.syntaxFlags.has(t.RelativeColorSyntax))return;return o(e)}})),v=u(y);if(v===m)return;let F=v;s?.subFeatures.displayP3&&(F=u(n(i(g),(s=>{if(c(s)&&b.test(s.getName())){const e=r(s);if(!e)return;if(e.syntaxFlags.has(t.HasNoneKeywords))return;if(!e.syntaxFlags.has(t.RelativeColorSyntax))return;return a(e)?o(e):l(e)}})))),p.cloneBefore({value:v}),s?.subFeatures.displayP3&&F!==v&&p.cloneBefore({value:F}),s?.preserve||p.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const r=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return r.subFeatures=Object.assign({displayP3:!0},r.subFeatures),r.enableProgressiveCustomProperties&&(r.preserve||r.subFeatures.displayP3)?{postcssPlugin:"postcss-relative-color-syntax",plugins:[s(),basePlugin(r)]}:basePlugin(r)};postcssPlugin.postcss=!0;export{postcssPlugin as default};
+import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as e}from"@csstools/css-tokenizer";import{color as t,SyntaxFlag as r,serializeRGB as o,colorDataFitsRGB_Gamut as a,serializeP3 as l}from"@csstools/css-color-parser";import{replaceComponentValues as n,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as i,stringify as p}from"@csstools/css-parser-algorithms";function hasFallback(s){const e=s.parent;if(!e)return!1;const t=s.prop.toLowerCase(),r=e.index(s);for(let s=0;s<r;s++){const r=e.nodes[s];if("decl"===r.type&&r.prop.toLowerCase()===t)return!0}return!1}const u=/(rgb|hsl|hwb|lab|lch|oklch|oklab|color)\(\s*?from/i;function hasSupportsAtRuleAncestor(s){let e=s.parent;for(;e;)if("atrule"===e.type){if("supports"===e.name.toLowerCase()&&u.test(e.params))return!0;e=e.parent}else e=e.parent;return!1}const b=/(rgb|hsl|hwb|lab|lch|oklch|oklab|color)\(/i,f=/^(rgb|hsl|hwb|lab|lch|oklch|oklab|color)$/i,h=/from/i,basePlugin=s=>({postcssPlugin:"postcss-relative-color-syntax",Declaration:u=>{const m=u.value;if(!b.test(m)||!h.test(m))return;if(hasFallback(u))return;if(hasSupportsAtRuleAncestor(u))return;const g=e({css:m}),y=n(c(g),(s=>{if(!i(s)||!f.test(s.getName()))return;const e=t(s);return e&&!e.syntaxFlags.has(r.Experimental)&&!e.syntaxFlags.has(r.HasNoneKeywords)&&e.syntaxFlags.has(r.RelativeColorSyntax)?o(e):void 0})),v=p(y);if(v===m)return;let x=v;s?.subFeatures.displayP3&&(x=p(n(c(g),(s=>{if(!i(s)||!f.test(s.getName()))return;const e=t(s);return e&&!e.syntaxFlags.has(r.Experimental)&&!e.syntaxFlags.has(r.HasNoneKeywords)&&e.syntaxFlags.has(r.RelativeColorSyntax)?a(e)?o(e):l(e):void 0})))),u.cloneBefore({value:v}),s?.subFeatures.displayP3&&x!==v&&u.cloneBefore({value:x}),s?.preserve||u.remove()}});basePlugin.postcss=!0;const postcssPlugin=e=>{const t=Object.assign({enableProgressiveCustomProperties:!0,preserve:!1,subFeatures:{displayP3:!0}},e);return t.subFeatures=Object.assign({displayP3:!0},t.subFeatures),t.enableProgressiveCustomProperties&&(t.preserve||t.subFeatures.displayP3)?{postcssPlugin:"postcss-relative-color-syntax",plugins:[s(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0;export{postcssPlugin as default};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@csstools/postcss-relative-color-syntax",
 	"description": "Use the relative color syntax in CSS",
-	"version": "2.0.8",
+	"version": "2.0.9",
 	"contributors": [
 		{
 			"name": "Antonio Laguna",
@@ -48,9 +48,9 @@
 		"dist"
 	],
 	"dependencies": {
-		"@csstools/css-color-parser": "^1.5.0",
-		"@csstools/css-parser-algorithms": "^2.4.0",
-		"@csstools/css-tokenizer": "^2.2.2",
+		"@csstools/css-color-parser": "^1.5.1",
+		"@csstools/css-parser-algorithms": "^2.5.0",
+		"@csstools/css-tokenizer": "^2.2.3",
 		"@csstools/postcss-progressive-custom-properties": "^3.0.3"
 	},
 	"peerDependencies": {