postcss-color-functional-notation 5.0.2 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changes to PostCSS Color Functional Notation
 
+### 5.1.0 (June 1, 2023)
+
+- Added `@csstools/postcss-progressive-custom-properties` for improved support of custom properties.
+- Updated `@csstools/postcss-progressive-custom-properties` to `2.3.0` (minor)
+
+
 ### 5.0.2 (February 6, 2023)
 
 - Reduce the amount of duplicate fallback CSS.

package/README.md

@@ -58,7 +58,7 @@ The `preserve` option determines whether the original functional color notation
 is preserved. By default, it is not preserved.
 
 ```js
-postcssImageSetFunction({ preserve: true })
+postcssColorFunctionalNotation({ preserve: true })
 ```
 
 ```pcss
@@ -83,6 +83,17 @@ postcssImageSetFunction({ preserve: true })
 }
 ```
 
+### 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
+postcssColorFunctionalNotation({ enableProgressiveCustomProperties: false })
+```
+
 [cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
 [css-url]: https://cssdb.org/#color-functional-notation
 [discord]: https://discord.gg/bUadyRwkJS

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";var e=require("postcss-value-parser");function onCSSFunction(e){const r=e.value.toLowerCase();if(!needsConversion("rgb"===r||"rgba"===r,e.nodes))return;const n=convertOldSyntaxToNewSyntaxBeforeTransform(e.nodes).slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let t=null;if("hsl"===r||"hsla"===r?t=hslFunctionContents(n):"rgb"!==r&&"rgba"!==r||(t=rgbFunctionContents(n)),!t)return;if(n.length>3&&(!t.slash||!t.alpha))return;transformAlpha(e,t.slash,t.alpha);const[o,u]=channelNodes(t);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:""})}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||""===n.unit)}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 isSlashNode(e){return e&&"div"===e.type&&"/"===e.value}function hslFunctionContents(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],s:e.unit(r[1].value),sNode:r[1],l:e.unit(r[2].value),lNode:r[2]};return normalizeHueNode(n.h),""!==n.h.unit?null:(n.hNode.value=n.h.number,isSlashNode(r[3])&&(n.slash=r[3]),(isNumericNodePercentageOrNumber(r[4])||isCalcNode(r[4])||isVarNode(r[4]))&&(n.alpha=r[4]),n)}function rgbFunctionContents(r){if(!isNumericNodePercentageOrNumber(r[0]))return null;if(!isNumericNodePercentageOrNumber(r[1]))return null;if(!isNumericNodePercentageOrNumber(r[2]))return null;const n={r:e.unit(r[0].value),rNode:r[0],g:e.unit(r[1].value),gNode:r[1],b:e.unit(r[2].value),bNode:r[2]};return"%"===n.r.unit&&(n.r.number=String(Math.floor(Number(n.r.number)/100*255)),n.rNode.value=n.r.number),"%"===n.g.unit&&(n.g.number=String(Math.floor(Number(n.g.number)/100*255)),n.gNode.value=n.g.number),"%"===n.b.unit&&(n.b.number=String(Math.floor(Number(n.b.number)/100*255)),n.bNode.value=n.b.number),isSlashNode(r[3])&&(n.slash=r[3]),(isNumericNodePercentageOrNumber(r[4])||isCalcNode(r[4])||isVarNode(r[4]))&&(n.alpha=r[4]),n}function isRgb(e){return void 0!==e.r}function channelNodes(e){return isRgb(e)?[e.rNode,e.gNode,e.bNode]:[e.hNode,e.sNode,e.lNode]}function transformAlpha(r,n,t){if("hsl"===r.value.toLowerCase()||"hsla"===r.value.toLowerCase()?r.value="hsl":"rgb"!==r.value.toLowerCase()&&"rgba"!==r.value.toLowerCase()||(r.value="rgb"),!n||!t)return;if("hsl"===r.value.toLowerCase()?r.value="hsla":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 normalizeHueNode(e){switch(e.unit.toLowerCase()){case"deg":return void(e.unit="");case"rad":return e.unit="",void(e.number=Math.round(180*parseFloat(e.number)/Math.PI).toString());case"grad":return e.unit="",void(e.number=Math.round(.9*parseFloat(e.number)).toString());case"turn":return e.unit="",void(e.number=Math.round(360*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 convertOldSyntaxToNewSyntaxBeforeTransform(e){let r=0;for(let n=0;n<e.length;n++){const t=e[n];if("div"===t.type&&","===t.value){if(r<2&&(t.value=" ",t.type="space"),2===r&&(t.value="/"),r>2)return;r++}}return e}function needsConversion(e,r){let n=!1,t=!1,o=!1;const u=r.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));for(let a=0;a<u.length;a++){const s=u[a];if("word"===s.type&&"from"===s.value.toLowerCase())return!1;"div"!==s.type||","!==s.value?e&&"word"===s.type&&s.value.endsWith("%")?o=!0:a===r.length-1&&"word"===s.type&&s.value.endsWith("%")&&(t=!0):n=!0}return!(!n||!t&&!o)||!n}function hasSupportsAtRuleAncestor(e){let r=e.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name&&-1!==r.params.toLowerCase().indexOf("(color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5))"))return!0;r=r.parent}else r=r.parent;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 postcssPlugin=r=>{const n="preserve"in Object(r)&&Boolean(r.preserve);return{postcssPlugin:"postcss-color-functional-notation",Declaration:(r,{result:t,postcss:o})=>{const u=r.value,a=u.toLowerCase();if(!(a.includes("rgb")||a.includes("rgba")||a.includes("hsl")||a.includes("hsla")))return;if(hasFallback(r))return;if(hasSupportsAtRuleAncestor(r))return;let s;try{s=e(u)}catch(e){r.warn(t,`Failed to parse value '${u}' as a hsl or rgb function. Leaving the original value intact.`)}if(void 0===s)return;s.walk((e=>{if(!e.type||"function"!==e.type)return;const r=e.value.toLowerCase();"hsl"!==r&&"hsla"!==r&&"rgb"!==r&&"rgba"!==r||onCSSFunction(e)}));const i=String(s);if(i!==u)if(n&&r.variable){const e=r.parent,n="(color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5))",t=o.atRule({name:"supports",params:n,source:r.source}),u=e.clone();u.removeAll(),u.append(r.clone()),t.append(u);let a=e,s=e.next();for(;a&&s&&"atrule"===s.type&&"supports"===s.name&&s.params===n;)a=s,s=s.next();a.after(t),r.replaceWith(r.clone({value:i}))}else n?r.cloneBefore({value:i}):r.replaceWith(r.clone({value:i}))}}};postcssPlugin.postcss=!0,module.exports=postcssPlugin;
+"use strict";var e=require("@csstools/postcss-progressive-custom-properties"),r=require("postcss-value-parser");function onCSSFunction(e){const r=e.value.toLowerCase();if(!needsConversion("rgb"===r||"rgba"===r,e.nodes))return;const n=convertOldSyntaxToNewSyntaxBeforeTransform(e.nodes).slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let t=null;if("hsl"===r||"hsla"===r?t=hslFunctionContents(n):"rgb"!==r&&"rgba"!==r||(t=rgbFunctionContents(n)),!t)return;if(n.length>3&&(!t.slash||!t.alpha))return;transformAlpha(e,t.slash,t.alpha);const[o,u]=channelNodes(t);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:""})}function isNumericNode(e){if(!e||"word"!==e.type)return!1;if(!canParseAsUnit(e))return!1;const n=r.unit(e.value);return!!n&&!!n.number}function isNumericNodeHueLike(e){if(!e||"word"!==e.type)return!1;if(!canParseAsUnit(e))return!1;const n=r.unit(e.value);if(!n)return!1;const t=n.unit.toLowerCase();return!!n.number&&("deg"===t||"grad"===t||"rad"===t||"turn"===t||""===n.unit)}function isNumericNodePercentageOrNumber(e){if(!e||"word"!==e.type)return!1;if(!canParseAsUnit(e))return!1;const n=r.unit(e.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 isSlashNode(e){return e&&"div"===e.type&&"/"===e.value}function hslFunctionContents(e){if(!isNumericNodeHueLike(e[0]))return null;if(!isNumericNodePercentageOrNumber(e[1]))return null;if(!isNumericNodePercentageOrNumber(e[2]))return null;const n={h:r.unit(e[0].value),hNode:e[0],s:r.unit(e[1].value),sNode:e[1],l:r.unit(e[2].value),lNode:e[2]};return normalizeHueNode(n.h),""!==n.h.unit?null:(n.hNode.value=n.h.number,isSlashNode(e[3])&&(n.slash=e[3]),(isNumericNodePercentageOrNumber(e[4])||isCalcNode(e[4])||isVarNode(e[4]))&&(n.alpha=e[4]),n)}function rgbFunctionContents(e){if(!isNumericNodePercentageOrNumber(e[0]))return null;if(!isNumericNodePercentageOrNumber(e[1]))return null;if(!isNumericNodePercentageOrNumber(e[2]))return null;const n={r:r.unit(e[0].value),rNode:e[0],g:r.unit(e[1].value),gNode:e[1],b:r.unit(e[2].value),bNode:e[2]};return"%"===n.r.unit&&(n.r.number=String(Math.floor(Number(n.r.number)/100*255)),n.rNode.value=n.r.number),"%"===n.g.unit&&(n.g.number=String(Math.floor(Number(n.g.number)/100*255)),n.gNode.value=n.g.number),"%"===n.b.unit&&(n.b.number=String(Math.floor(Number(n.b.number)/100*255)),n.bNode.value=n.b.number),isSlashNode(e[3])&&(n.slash=e[3]),(isNumericNodePercentageOrNumber(e[4])||isCalcNode(e[4])||isVarNode(e[4]))&&(n.alpha=e[4]),n}function isRgb(e){return void 0!==e.r}function channelNodes(e){return isRgb(e)?[e.rNode,e.gNode,e.bNode]:[e.hNode,e.sNode,e.lNode]}function transformAlpha(e,n,t){if("hsl"===e.value.toLowerCase()||"hsla"===e.value.toLowerCase()?e.value="hsl":"rgb"!==e.value.toLowerCase()&&"rgba"!==e.value.toLowerCase()||(e.value="rgb"),!n||!t)return;if("hsl"===e.value.toLowerCase()?e.value="hsla":e.value="rgba",n.value=",",n.before="",!isNumericNode(t))return;const o=r.unit(t.value);o&&"%"===o.unit&&(o.number=String(parseFloat(o.number)/100),t.value=String(o.number))}function normalizeHueNode(e){switch(e.unit.toLowerCase()){case"deg":return void(e.unit="");case"rad":return e.unit="",void(e.number=Math.round(180*parseFloat(e.number)/Math.PI).toString());case"grad":return e.unit="",void(e.number=Math.round(.9*parseFloat(e.number)).toString());case"turn":return e.unit="",void(e.number=Math.round(360*parseFloat(e.number)).toString())}}function canParseAsUnit(e){if(!e||!e.value)return!1;try{return!1!==r.unit(e.value)}catch(e){return!1}}function convertOldSyntaxToNewSyntaxBeforeTransform(e){let r=0;for(let n=0;n<e.length;n++){const t=e[n];if("div"===t.type&&","===t.value){if(r<2&&(t.value=" ",t.type="space"),2===r&&(t.value="/"),r>2)return[];r++}}return e}function needsConversion(e,r){let n=!1,t=!1,o=!1;const u=r.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));for(let s=0;s<u.length;s++){const a=u[s];if("word"===a.type&&"from"===a.value.toLowerCase())return!1;"div"!==a.type||","!==a.value?e&&"word"===a.type&&a.value.endsWith("%")?o=!0:s===r.length-1&&"word"===a.type&&a.value.endsWith("%")&&(t=!0):n=!0}return!(!n||!t&&!o)||!n}const n=/(\(color: rgb(a?)\(0 0 0 \/ 0)|(\(color: hsl(a?)\(0 0% 0% \/ 0)/i;function hasSupportsAtRuleAncestor(e){let r=e.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name&&n.test(r.params))return!0;r=r.parent}else r=r.parent;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 basePlugin=e=>({postcssPlugin:"postcss-color-function",Declaration:(n,{result:t})=>{const o=n.value,u=o.toLowerCase();if(!(u.includes("rgb")||u.includes("rgba")||u.includes("hsl")||u.includes("hsla")))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;let s;try{s=r(o)}catch(e){n.warn(t,`Failed to parse value '${o}' as a hsl or rgb function. Leaving the original value intact.`)}if(void 0===s)return;s.walk((e=>{if(!e.type||"function"!==e.type)return;const r=e.value.toLowerCase();"hsl"!==r&&"hsla"!==r&&"rgb"!==r&&"rgba"!==r||onCSSFunction(e)}));const a=String(s);a!==o&&(n.cloneBefore({value:a}),null!=e&&e.preserve||n.remove())}});basePlugin.postcss=!0;const postcssPlugin=r=>{const n=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},r);return n.enableProgressiveCustomProperties&&n.preserve?{postcssPlugin:"postcss-color-function",plugins:[e(),basePlugin(n)]}:basePlugin(n)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;

package/dist/index.d.ts

@@ -3,7 +3,8 @@ import type { PluginCreator } from 'postcss';
 export type pluginOptions = {
     /** Preserve the original notation. default: false */
     preserve?: boolean;
+    /** Enable "@csstools/postcss-progressive-custom-properties". default: true */
+    enableProgressiveCustomProperties?: boolean;
 };
-/** Transform lab() and lch() functions in CSS. */
 declare const postcssPlugin: PluginCreator<pluginOptions>;
 export default postcssPlugin;

package/dist/index.mjs

@@ -1 +1 @@
-import e from"postcss-value-parser";function onCSSFunction(e){const r=e.value.toLowerCase();if(!needsConversion("rgb"===r||"rgba"===r,e.nodes))return;const n=convertOldSyntaxToNewSyntaxBeforeTransform(e.nodes).slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let t=null;if("hsl"===r||"hsla"===r?t=hslFunctionContents(n):"rgb"!==r&&"rgba"!==r||(t=rgbFunctionContents(n)),!t)return;if(n.length>3&&(!t.slash||!t.alpha))return;transformAlpha(e,t.slash,t.alpha);const[o,u]=channelNodes(t);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:""})}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||""===n.unit)}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 isSlashNode(e){return e&&"div"===e.type&&"/"===e.value}function hslFunctionContents(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],s:e.unit(r[1].value),sNode:r[1],l:e.unit(r[2].value),lNode:r[2]};return normalizeHueNode(n.h),""!==n.h.unit?null:(n.hNode.value=n.h.number,isSlashNode(r[3])&&(n.slash=r[3]),(isNumericNodePercentageOrNumber(r[4])||isCalcNode(r[4])||isVarNode(r[4]))&&(n.alpha=r[4]),n)}function rgbFunctionContents(r){if(!isNumericNodePercentageOrNumber(r[0]))return null;if(!isNumericNodePercentageOrNumber(r[1]))return null;if(!isNumericNodePercentageOrNumber(r[2]))return null;const n={r:e.unit(r[0].value),rNode:r[0],g:e.unit(r[1].value),gNode:r[1],b:e.unit(r[2].value),bNode:r[2]};return"%"===n.r.unit&&(n.r.number=String(Math.floor(Number(n.r.number)/100*255)),n.rNode.value=n.r.number),"%"===n.g.unit&&(n.g.number=String(Math.floor(Number(n.g.number)/100*255)),n.gNode.value=n.g.number),"%"===n.b.unit&&(n.b.number=String(Math.floor(Number(n.b.number)/100*255)),n.bNode.value=n.b.number),isSlashNode(r[3])&&(n.slash=r[3]),(isNumericNodePercentageOrNumber(r[4])||isCalcNode(r[4])||isVarNode(r[4]))&&(n.alpha=r[4]),n}function isRgb(e){return void 0!==e.r}function channelNodes(e){return isRgb(e)?[e.rNode,e.gNode,e.bNode]:[e.hNode,e.sNode,e.lNode]}function transformAlpha(r,n,t){if("hsl"===r.value.toLowerCase()||"hsla"===r.value.toLowerCase()?r.value="hsl":"rgb"!==r.value.toLowerCase()&&"rgba"!==r.value.toLowerCase()||(r.value="rgb"),!n||!t)return;if("hsl"===r.value.toLowerCase()?r.value="hsla":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 normalizeHueNode(e){switch(e.unit.toLowerCase()){case"deg":return void(e.unit="");case"rad":return e.unit="",void(e.number=Math.round(180*parseFloat(e.number)/Math.PI).toString());case"grad":return e.unit="",void(e.number=Math.round(.9*parseFloat(e.number)).toString());case"turn":return e.unit="",void(e.number=Math.round(360*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 convertOldSyntaxToNewSyntaxBeforeTransform(e){let r=0;for(let n=0;n<e.length;n++){const t=e[n];if("div"===t.type&&","===t.value){if(r<2&&(t.value=" ",t.type="space"),2===r&&(t.value="/"),r>2)return;r++}}return e}function needsConversion(e,r){let n=!1,t=!1,o=!1;const u=r.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));for(let a=0;a<u.length;a++){const s=u[a];if("word"===s.type&&"from"===s.value.toLowerCase())return!1;"div"!==s.type||","!==s.value?e&&"word"===s.type&&s.value.endsWith("%")?o=!0:a===r.length-1&&"word"===s.type&&s.value.endsWith("%")&&(t=!0):n=!0}return!(!n||!t&&!o)||!n}function hasSupportsAtRuleAncestor(e){let r=e.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name&&-1!==r.params.toLowerCase().indexOf("(color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5))"))return!0;r=r.parent}else r=r.parent;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 postcssPlugin=r=>{const n="preserve"in Object(r)&&Boolean(r.preserve);return{postcssPlugin:"postcss-color-functional-notation",Declaration:(r,{result:t,postcss:o})=>{const u=r.value,a=u.toLowerCase();if(!(a.includes("rgb")||a.includes("rgba")||a.includes("hsl")||a.includes("hsla")))return;if(hasFallback(r))return;if(hasSupportsAtRuleAncestor(r))return;let s;try{s=e(u)}catch(e){r.warn(t,`Failed to parse value '${u}' as a hsl or rgb function. Leaving the original value intact.`)}if(void 0===s)return;s.walk((e=>{if(!e.type||"function"!==e.type)return;const r=e.value.toLowerCase();"hsl"!==r&&"hsla"!==r&&"rgb"!==r&&"rgba"!==r||onCSSFunction(e)}));const i=String(s);if(i!==u)if(n&&r.variable){const e=r.parent,n="(color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5))",t=o.atRule({name:"supports",params:n,source:r.source}),u=e.clone();u.removeAll(),u.append(r.clone()),t.append(u);let a=e,s=e.next();for(;a&&s&&"atrule"===s.type&&"supports"===s.name&&s.params===n;)a=s,s=s.next();a.after(t),r.replaceWith(r.clone({value:i}))}else n?r.cloneBefore({value:i}):r.replaceWith(r.clone({value:i}))}}};postcssPlugin.postcss=!0;export{postcssPlugin as default};
+import e from"@csstools/postcss-progressive-custom-properties";import r from"postcss-value-parser";function onCSSFunction(e){const r=e.value.toLowerCase();if(!needsConversion("rgb"===r||"rgba"===r,e.nodes))return;const n=convertOldSyntaxToNewSyntaxBeforeTransform(e.nodes).slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let t=null;if("hsl"===r||"hsla"===r?t=hslFunctionContents(n):"rgb"!==r&&"rgba"!==r||(t=rgbFunctionContents(n)),!t)return;if(n.length>3&&(!t.slash||!t.alpha))return;transformAlpha(e,t.slash,t.alpha);const[o,u]=channelNodes(t);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:""})}function isNumericNode(e){if(!e||"word"!==e.type)return!1;if(!canParseAsUnit(e))return!1;const n=r.unit(e.value);return!!n&&!!n.number}function isNumericNodeHueLike(e){if(!e||"word"!==e.type)return!1;if(!canParseAsUnit(e))return!1;const n=r.unit(e.value);if(!n)return!1;const t=n.unit.toLowerCase();return!!n.number&&("deg"===t||"grad"===t||"rad"===t||"turn"===t||""===n.unit)}function isNumericNodePercentageOrNumber(e){if(!e||"word"!==e.type)return!1;if(!canParseAsUnit(e))return!1;const n=r.unit(e.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 isSlashNode(e){return e&&"div"===e.type&&"/"===e.value}function hslFunctionContents(e){if(!isNumericNodeHueLike(e[0]))return null;if(!isNumericNodePercentageOrNumber(e[1]))return null;if(!isNumericNodePercentageOrNumber(e[2]))return null;const n={h:r.unit(e[0].value),hNode:e[0],s:r.unit(e[1].value),sNode:e[1],l:r.unit(e[2].value),lNode:e[2]};return normalizeHueNode(n.h),""!==n.h.unit?null:(n.hNode.value=n.h.number,isSlashNode(e[3])&&(n.slash=e[3]),(isNumericNodePercentageOrNumber(e[4])||isCalcNode(e[4])||isVarNode(e[4]))&&(n.alpha=e[4]),n)}function rgbFunctionContents(e){if(!isNumericNodePercentageOrNumber(e[0]))return null;if(!isNumericNodePercentageOrNumber(e[1]))return null;if(!isNumericNodePercentageOrNumber(e[2]))return null;const n={r:r.unit(e[0].value),rNode:e[0],g:r.unit(e[1].value),gNode:e[1],b:r.unit(e[2].value),bNode:e[2]};return"%"===n.r.unit&&(n.r.number=String(Math.floor(Number(n.r.number)/100*255)),n.rNode.value=n.r.number),"%"===n.g.unit&&(n.g.number=String(Math.floor(Number(n.g.number)/100*255)),n.gNode.value=n.g.number),"%"===n.b.unit&&(n.b.number=String(Math.floor(Number(n.b.number)/100*255)),n.bNode.value=n.b.number),isSlashNode(e[3])&&(n.slash=e[3]),(isNumericNodePercentageOrNumber(e[4])||isCalcNode(e[4])||isVarNode(e[4]))&&(n.alpha=e[4]),n}function isRgb(e){return void 0!==e.r}function channelNodes(e){return isRgb(e)?[e.rNode,e.gNode,e.bNode]:[e.hNode,e.sNode,e.lNode]}function transformAlpha(e,n,t){if("hsl"===e.value.toLowerCase()||"hsla"===e.value.toLowerCase()?e.value="hsl":"rgb"!==e.value.toLowerCase()&&"rgba"!==e.value.toLowerCase()||(e.value="rgb"),!n||!t)return;if("hsl"===e.value.toLowerCase()?e.value="hsla":e.value="rgba",n.value=",",n.before="",!isNumericNode(t))return;const o=r.unit(t.value);o&&"%"===o.unit&&(o.number=String(parseFloat(o.number)/100),t.value=String(o.number))}function normalizeHueNode(e){switch(e.unit.toLowerCase()){case"deg":return void(e.unit="");case"rad":return e.unit="",void(e.number=Math.round(180*parseFloat(e.number)/Math.PI).toString());case"grad":return e.unit="",void(e.number=Math.round(.9*parseFloat(e.number)).toString());case"turn":return e.unit="",void(e.number=Math.round(360*parseFloat(e.number)).toString())}}function canParseAsUnit(e){if(!e||!e.value)return!1;try{return!1!==r.unit(e.value)}catch(e){return!1}}function convertOldSyntaxToNewSyntaxBeforeTransform(e){let r=0;for(let n=0;n<e.length;n++){const t=e[n];if("div"===t.type&&","===t.value){if(r<2&&(t.value=" ",t.type="space"),2===r&&(t.value="/"),r>2)return[];r++}}return e}function needsConversion(e,r){let n=!1,t=!1,o=!1;const u=r.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));for(let s=0;s<u.length;s++){const a=u[s];if("word"===a.type&&"from"===a.value.toLowerCase())return!1;"div"!==a.type||","!==a.value?e&&"word"===a.type&&a.value.endsWith("%")?o=!0:s===r.length-1&&"word"===a.type&&a.value.endsWith("%")&&(t=!0):n=!0}return!(!n||!t&&!o)||!n}const n=/(\(color: rgb(a?)\(0 0 0 \/ 0)|(\(color: hsl(a?)\(0 0% 0% \/ 0)/i;function hasSupportsAtRuleAncestor(e){let r=e.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name&&n.test(r.params))return!0;r=r.parent}else r=r.parent;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 basePlugin=e=>({postcssPlugin:"postcss-color-function",Declaration:(n,{result:t})=>{const o=n.value,u=o.toLowerCase();if(!(u.includes("rgb")||u.includes("rgba")||u.includes("hsl")||u.includes("hsla")))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;let s;try{s=r(o)}catch(e){n.warn(t,`Failed to parse value '${o}' as a hsl or rgb function. Leaving the original value intact.`)}if(void 0===s)return;s.walk((e=>{if(!e.type||"function"!==e.type)return;const r=e.value.toLowerCase();"hsl"!==r&&"hsla"!==r&&"rgb"!==r&&"rgba"!==r||onCSSFunction(e)}));const a=String(s);a!==o&&(n.cloneBefore({value:a}),null!=e&&e.preserve||n.remove())}});basePlugin.postcss=!0;const postcssPlugin=r=>{const n=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},r);return n.enableProgressiveCustomProperties&&n.preserve?{postcssPlugin:"postcss-color-function",plugins:[e(),basePlugin(n)]}:basePlugin(n)};postcssPlugin.postcss=!0;export{postcssPlugin as default};

package/package.json

@@ -1,13 +1,19 @@
 {
 	"name": "postcss-color-functional-notation",
 	"description": "Use space and slash separated color notation in CSS",
-	"version": "5.0.2",
+	"version": "5.1.0",
 	"author": "Jonathan Neal <jonathantneal@hotmail.com>",
 	"license": "CC0-1.0",
-	"funding": {
-		"type": "opencollective",
-		"url": "https://opencollective.com/csstools"
-	},
+	"funding": [
+		{
+			"type": "github",
+			"url": "https://github.com/sponsors/csstools"
+		},
+		{
+			"type": "opencollective",
+			"url": "https://opencollective.com/csstools"
+		}
+	],
 	"engines": {
 		"node": "^14 || ^16 || >=18"
 	},
@@ -29,22 +35,21 @@
 		"dist"
 	],
 	"dependencies": {
+		"@csstools/postcss-progressive-custom-properties": "^2.3.0",
 		"postcss-value-parser": "^4.2.0"
 	},
 	"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-color-functional-notation#readme",