@csstools/postcss-hwb-function 2.1.1 → 2.2.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changes to PostCSS HWB Function
 
+### 2.2.1 (April 10, 2023)
+
+- Updated `@csstools/css-tokenizer` to `2.1.1` (patch)
+- Updated `@csstools/css-parser-algorithms` to `2.1.1` (patch)
+- Updated `@csstools/css-color-parser` to `1.1.2` (patch)
+
+### 2.2.0 (March 25, 2023)
+
+- Add `@csstools/css-color-parser` dependency for all color value transformations.
+- Add support for `calc` expressions in color components.
+
 ### 2.1.1 (February 8, 2023)
 
 - Reduce the amount of duplicate fallback CSS.

package/dist/has-supports-at-rule-ancestor.d.ts

@@ -1,2 +1,3 @@
 import type { Node } from 'postcss';
+export declare const atSupportsHwbParams = "(color: hwb(0 0% 0%))";
 export declare function hasSupportsAtRuleAncestor(node: Node): boolean;

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";var e=require("postcss-value-parser"),r=require("@csstools/color-helpers");function hasSupportsAtRuleAncestor(e){let r=e.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name.toLowerCase()&&-1!==r.params.toLowerCase().indexOf("(color: hwb(0% 0 0))"))return!0;r=r.parent}else r=r.parent;return!1}function onCSSFunctionSRgb(e){const n=e.nodes.slice().filter((e=>"comment"!==e.type&&"space"!==e.type)),t=hwbFunctionContents(n);if(!t)return;if(n.length>3&&(!t.slash||!t.alpha))return;e.value="rgb",transformAlpha(e,t.slash,t.alpha);const[o,u,i]=[(a=t).hNode,a.wNode,a.bNode];var a;const[s,c,l]=channelDimensions(t),p=[s.number,c.number,l.number].map((e=>parseFloat(e))),d=r.conversions.HWB_to_sRGB(p).map((e=>Math.round(255*e)));e.nodes.splice(e.nodes.indexOf(o)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),e.nodes.splice(e.nodes.indexOf(u)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),replaceWith(e.nodes,o,{...o,value:String(d[0])}),replaceWith(e.nodes,u,{...u,value:String(d[1])}),replaceWith(e.nodes,i,{...i,value:String(d[2])})}function isNumericNode(r){if(!r||"word"!==r.type)return!1;if(!canParseAsUnit(r))return!1;const n=e.unit(r.value);return!!n&&!!n.number}function isNumericNodeHueLike(r){if(!r||"word"!==r.type)return!1;if(!canParseAsUnit(r))return!1;const n=e.unit(r.value);if(!n)return!1;const t=n.unit.toLowerCase();return!!n.number&&("deg"===t||"grad"===t||"rad"===t||"turn"===t||""===t)}function isNumericNodePercentageOrNumber(r){if(!r||"word"!==r.type)return!1;if(!canParseAsUnit(r))return!1;const n=e.unit(r.value);return!!n&&("%"===n.unit||""===n.unit)}function isCalcNode(e){return e&&"function"===e.type&&"calc"===e.value.toLowerCase()}function isVarNode(e){return e&&"function"===e.type&&"var"===e.value.toLowerCase()}function hwbFunctionContents(r){if(!isNumericNodeHueLike(r[0]))return null;if(!isNumericNodePercentageOrNumber(r[1]))return null;if(!isNumericNodePercentageOrNumber(r[2]))return null;const n={h:e.unit(r[0].value),hNode:r[0],w:e.unit(r[1].value),wNode:r[1],b:e.unit(r[2].value),bNode:r[2]};return normalizeHueNode(n.h),""!==n.h.unit?null:(normalizeBlackOrWhiteNode(n.w),normalizeBlackOrWhiteNode(n.b),(t=r[3])&&"div"===t.type&&"/"===t.value&&(n.slash=r[3]),(isNumericNodePercentageOrNumber(r[4])||isCalcNode(r[4])||isVarNode(r[4]))&&(n.alpha=r[4]),n);var t}function channelDimensions(e){return[e.h,e.w,e.b]}function transformAlpha(r,n,t){if(!n||!t)return;if(r.value="rgba",n.value=",",n.before="",!isNumericNode(t))return;const o=e.unit(t.value);o&&"%"===o.unit&&(o.number=String(parseFloat(o.number)/100),t.value=String(o.number))}function replaceWith(e,r,n){const t=e.indexOf(r);e[t]=n}function normalizeHueNode(e){switch(e.unit.toLowerCase()){case"deg":return void(e.unit="");case"rad":return e.unit="",void(e.number=(180*parseFloat(e.number)/Math.PI).toString());case"grad":return e.unit="",void(e.number=(.9*parseFloat(e.number)).toString());case"turn":return e.unit="",void(e.number=(360*parseFloat(e.number)).toString())}}function normalizeBlackOrWhiteNode(e){if("%"!==e.unit)return e.unit="%",void(e.number=(100*parseFloat(e.number)).toString())}function canParseAsUnit(r){if(!r||!r.value)return!1;try{return!1!==e.unit(r.value)}catch(e){return!1}}function hasFallback(e){const r=e.parent;if(!r)return!1;const n=e.prop.toLowerCase(),t=r.index(e);for(let e=0;e<t;e++){const t=r.nodes[e];if("decl"===t.type&&t.prop.toLowerCase()===n)return!0}return!1}const n="(color: hwb(0% 0 0))",postcssPlugin=e=>{const r="preserve"in Object(e)&&Boolean(e.preserve);return{postcssPlugin:"postcss-hwb-function",Declaration:(e,{result:t,postcss:o})=>{const u=e.value;if(!u.toLowerCase().includes("hwb("))return;if(r&&hasSupportsAtRuleAncestor(e))return;if(hasFallback(e))return;const i=modifiedValues(u,e,t);if(void 0!==i)if(e.variable&&r){const r=e.parent,t=o.atRule({name:"supports",params:n,source:e.source}),u=r.clone();u.removeAll(),u.append(e.clone()),t.append(u),insertAtSupportsAfterCorrectRule(t,r,n),e.replaceWith(e.clone({value:i}))}else r?e.cloneBefore({value:i}):e.replaceWith(e.clone({value:i}))}}};function modifiedValues(r,n,t){let o;try{o=e(r)}catch(e){n.warn(t,`Failed to parse value '${r}' as a hwb function. Leaving the original value intact.`)}if(void 0===o)return;o.walk((e=>{e.type&&"function"===e.type&&"hwb"===e.value.toLowerCase()&&onCSSFunctionSRgb(e)}));const u=String(o);return u!==r?u:void 0}function insertAtSupportsAfterCorrectRule(e,r,n){let t=r,o=r.next();for(;t&&o&&"atrule"===o.type&&"supports"===o.name.toLowerCase()&&o.params===n;)t=o,o=o.next();t.after(e)}postcssPlugin.postcss=!0,module.exports=postcssPlugin;
+"use strict";var e=require("@csstools/css-color-parser"),r=require("@csstools/css-parser-algorithms"),t=require("@csstools/css-tokenizer");const s="(color: hwb(0 0% 0%))";function hasSupportsAtRuleAncestor(e){let r=e.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name.toLowerCase()&&r.params.includes(s))return!0;r=r.parent}else r=r.parent;return!1}function hasFallback(e){const r=e.parent;if(!r)return!1;const t=e.prop.toLowerCase(),s=r.index(e);for(let e=0;e<s;e++){const s=r.nodes[e];if("decl"===s.type&&s.prop.toLowerCase()===t)return!0}return!1}const o=/hwb\(/i,n=/^hwb$/i,postcssPlugin=a=>{const l="preserve"in Object(a)&&Boolean(null==a?void 0:a.preserve);return{postcssPlugin:"postcss-hwb-function",Declaration:(a,{postcss:c})=>{const p=a.value;if(!o.test(p))return;if(l&&hasSupportsAtRuleAncestor(a))return;if(hasFallback(a))return;const u=r.replaceComponentValues(r.parseCommaSeparatedListOfComponentValues(t.tokenize({css:p})),(t=>{if(r.isFunctionNode(t)&&n.test(t.getName())){const r=e.color(t);if(!r)return;if(r.syntaxFlags.has(e.SyntaxFlag.HasNoneKeywords))return;return e.serializeRGB(r)}})),i=r.stringify(u);if(i!==p)if(a.variable&&l&&a.parent){const e=a.parent,r=c.atRule({name:"supports",params:s,source:a.source}),t=e.clone();t.removeAll(),t.append(a.clone()),r.append(t),insertAtSupportsAfterCorrectRule(r,e,s),a.replaceWith(a.clone({value:i}))}else l?a.cloneBefore({value:i}):a.replaceWith(a.clone({value:i}))}}};function insertAtSupportsAfterCorrectRule(e,r,t){let s=r,o=r.next();for(;s&&o&&"atrule"===o.type&&"supports"===o.name.toLowerCase()&&o.params===t;)s=o,o=o.next();s.after(e)}postcssPlugin.postcss=!0,module.exports=postcssPlugin;

package/dist/index.mjs

@@ -1 +1 @@
-import e from"postcss-value-parser";import{conversions as r}from"@csstools/color-helpers";function hasSupportsAtRuleAncestor(e){let r=e.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name.toLowerCase()&&-1!==r.params.toLowerCase().indexOf("(color: hwb(0% 0 0))"))return!0;r=r.parent}else r=r.parent;return!1}function onCSSFunctionSRgb(e){const n=e.nodes.slice().filter((e=>"comment"!==e.type&&"space"!==e.type)),t=hwbFunctionContents(n);if(!t)return;if(n.length>3&&(!t.slash||!t.alpha))return;e.value="rgb",transformAlpha(e,t.slash,t.alpha);const[o,u,a]=[(i=t).hNode,i.wNode,i.bNode];var i;const[s,c,l]=channelDimensions(t),p=[s.number,c.number,l.number].map((e=>parseFloat(e))),d=r.HWB_to_sRGB(p).map((e=>Math.round(255*e)));e.nodes.splice(e.nodes.indexOf(o)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),e.nodes.splice(e.nodes.indexOf(u)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),replaceWith(e.nodes,o,{...o,value:String(d[0])}),replaceWith(e.nodes,u,{...u,value:String(d[1])}),replaceWith(e.nodes,a,{...a,value:String(d[2])})}function isNumericNode(r){if(!r||"word"!==r.type)return!1;if(!canParseAsUnit(r))return!1;const n=e.unit(r.value);return!!n&&!!n.number}function isNumericNodeHueLike(r){if(!r||"word"!==r.type)return!1;if(!canParseAsUnit(r))return!1;const n=e.unit(r.value);if(!n)return!1;const t=n.unit.toLowerCase();return!!n.number&&("deg"===t||"grad"===t||"rad"===t||"turn"===t||""===t)}function isNumericNodePercentageOrNumber(r){if(!r||"word"!==r.type)return!1;if(!canParseAsUnit(r))return!1;const n=e.unit(r.value);return!!n&&("%"===n.unit||""===n.unit)}function isCalcNode(e){return e&&"function"===e.type&&"calc"===e.value.toLowerCase()}function isVarNode(e){return e&&"function"===e.type&&"var"===e.value.toLowerCase()}function hwbFunctionContents(r){if(!isNumericNodeHueLike(r[0]))return null;if(!isNumericNodePercentageOrNumber(r[1]))return null;if(!isNumericNodePercentageOrNumber(r[2]))return null;const n={h:e.unit(r[0].value),hNode:r[0],w:e.unit(r[1].value),wNode:r[1],b:e.unit(r[2].value),bNode:r[2]};return normalizeHueNode(n.h),""!==n.h.unit?null:(normalizeBlackOrWhiteNode(n.w),normalizeBlackOrWhiteNode(n.b),(t=r[3])&&"div"===t.type&&"/"===t.value&&(n.slash=r[3]),(isNumericNodePercentageOrNumber(r[4])||isCalcNode(r[4])||isVarNode(r[4]))&&(n.alpha=r[4]),n);var t}function channelDimensions(e){return[e.h,e.w,e.b]}function transformAlpha(r,n,t){if(!n||!t)return;if(r.value="rgba",n.value=",",n.before="",!isNumericNode(t))return;const o=e.unit(t.value);o&&"%"===o.unit&&(o.number=String(parseFloat(o.number)/100),t.value=String(o.number))}function replaceWith(e,r,n){const t=e.indexOf(r);e[t]=n}function normalizeHueNode(e){switch(e.unit.toLowerCase()){case"deg":return void(e.unit="");case"rad":return e.unit="",void(e.number=(180*parseFloat(e.number)/Math.PI).toString());case"grad":return e.unit="",void(e.number=(.9*parseFloat(e.number)).toString());case"turn":return e.unit="",void(e.number=(360*parseFloat(e.number)).toString())}}function normalizeBlackOrWhiteNode(e){if("%"!==e.unit)return e.unit="%",void(e.number=(100*parseFloat(e.number)).toString())}function canParseAsUnit(r){if(!r||!r.value)return!1;try{return!1!==e.unit(r.value)}catch(e){return!1}}function hasFallback(e){const r=e.parent;if(!r)return!1;const n=e.prop.toLowerCase(),t=r.index(e);for(let e=0;e<t;e++){const t=r.nodes[e];if("decl"===t.type&&t.prop.toLowerCase()===n)return!0}return!1}const n="(color: hwb(0% 0 0))",postcssPlugin=e=>{const r="preserve"in Object(e)&&Boolean(e.preserve);return{postcssPlugin:"postcss-hwb-function",Declaration:(e,{result:t,postcss:o})=>{const u=e.value;if(!u.toLowerCase().includes("hwb("))return;if(r&&hasSupportsAtRuleAncestor(e))return;if(hasFallback(e))return;const a=modifiedValues(u,e,t);if(void 0!==a)if(e.variable&&r){const r=e.parent,t=o.atRule({name:"supports",params:n,source:e.source}),u=r.clone();u.removeAll(),u.append(e.clone()),t.append(u),insertAtSupportsAfterCorrectRule(t,r,n),e.replaceWith(e.clone({value:a}))}else r?e.cloneBefore({value:a}):e.replaceWith(e.clone({value:a}))}}};function modifiedValues(r,n,t){let o;try{o=e(r)}catch(e){n.warn(t,`Failed to parse value '${r}' as a hwb function. Leaving the original value intact.`)}if(void 0===o)return;o.walk((e=>{e.type&&"function"===e.type&&"hwb"===e.value.toLowerCase()&&onCSSFunctionSRgb(e)}));const u=String(o);return u!==r?u:void 0}function insertAtSupportsAfterCorrectRule(e,r,n){let t=r,o=r.next();for(;t&&o&&"atrule"===o.type&&"supports"===o.name.toLowerCase()&&o.params===n;)t=o,o=o.next();t.after(e)}postcssPlugin.postcss=!0;export{postcssPlugin as default};
+import{color as e,SyntaxFlag as t,serializeRGB as r}from"@csstools/css-color-parser";import{replaceComponentValues as s,parseCommaSeparatedListOfComponentValues as o,isFunctionNode as n,stringify as a}from"@csstools/css-parser-algorithms";import{tokenize as p}from"@csstools/css-tokenizer";const c="(color: hwb(0 0% 0%))";function hasSupportsAtRuleAncestor(e){let t=e.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name.toLowerCase()&&t.params.includes(c))return!0;t=t.parent}else t=t.parent;return!1}function hasFallback(e){const t=e.parent;if(!t)return!1;const r=e.prop.toLowerCase(),s=t.index(e);for(let e=0;e<s;e++){const s=t.nodes[e];if("decl"===s.type&&s.prop.toLowerCase()===r)return!0}return!1}const l=/hwb\(/i,u=/^hwb$/i,postcssPlugin=i=>{const f="preserve"in Object(i)&&Boolean(null==i?void 0:i.preserve);return{postcssPlugin:"postcss-hwb-function",Declaration:(i,{postcss:m})=>{const h=i.value;if(!l.test(h))return;if(f&&hasSupportsAtRuleAncestor(i))return;if(hasFallback(i))return;const d=s(o(p({css:h})),(s=>{if(n(s)&&u.test(s.getName())){const o=e(s);if(!o)return;if(o.syntaxFlags.has(t.HasNoneKeywords))return;return r(o)}})),v=a(d);if(v!==h)if(i.variable&&f&&i.parent){const e=i.parent,t=m.atRule({name:"supports",params:c,source:i.source}),r=e.clone();r.removeAll(),r.append(i.clone()),t.append(r),insertAtSupportsAfterCorrectRule(t,e,c),i.replaceWith(i.clone({value:v}))}else f?i.cloneBefore({value:v}):i.replaceWith(i.clone({value:v}))}}};function insertAtSupportsAfterCorrectRule(e,t,r){let s=t,o=t.next();for(;s&&o&&"atrule"===o.type&&"supports"===o.name.toLowerCase()&&o.params===r;)s=o,o=o.next();s.after(e)}postcssPlugin.postcss=!0;export{postcssPlugin as default};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@csstools/postcss-hwb-function",
 	"description": "Use hwb() color functions in CSS",
-	"version": "2.1.1",
+	"version": "2.2.1",
 	"author": "Jonathan Neal <jonathantneal@hotmail.com>",
 	"license": "CC0-1.0",
 	"funding": {
@@ -30,23 +30,22 @@
 		"dist"
 	],
 	"dependencies": {
-		"@csstools/color-helpers": "^1.0.0",
-		"postcss-value-parser": "^4.2.0"
+		"@csstools/css-color-parser": "^1.1.2",
+		"@csstools/css-parser-algorithms": "^2.1.1",
+		"@csstools/css-tokenizer": "^2.1.1"
 	},
 	"peerDependencies": {
 		"postcss": "^8.4"
 	},
+	"devDependencies": {
+		"@csstools/postcss-tape": "*"
+	},
 	"scripts": {
-		"prebuild": "npm run clean",
 		"build": "rollup -c ../../rollup/default.mjs",
-		"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true }); fs.mkdirSync('./dist');\"",
 		"docs": "node ../../.github/bin/generate-docs/install.mjs",
-		"lint": "npm run lint:eslint && npm run lint:package-json",
-		"lint:eslint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
-		"lint:package-json": "node ../../.github/bin/format-package-json.mjs",
-		"prepublishOnly": "npm run clean && npm run build && npm run test",
-		"test": "node .tape.mjs && npm run test:exports",
-		"test:exports": "node ./test/_import.mjs && node ./test/_require.cjs",
+		"lint": "node ../../.github/bin/format-package-json.mjs",
+		"prepublishOnly": "npm run build && npm run test",
+		"test": "node .tape.mjs && node ./test/_import.mjs && node ./test/_require.cjs",
 		"test:rewrite-expects": "REWRITE_EXPECTS=true node .tape.mjs"
 	},
 	"homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-hwb-function#readme",

package/dist/on-css-function.d.ts

@@ -1,2 +0,0 @@
-import type { FunctionNode } from 'postcss-value-parser';
-export declare function onCSSFunctionSRgb(node: FunctionNode): void;