postcss-color-functional-notation 6.0.2 → 6.0.4

package/CHANGELOG.md

@@ -1,168 +1,27 @@
 # Changes to PostCSS Color Functional Notation
 
-### 6.0.2
-
-_October 9, 2023_
-
-- 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)
-
-### 6.0.1
-
-_September 18, 2023_
-
-- Improve performance
-- Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.0.1`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#301) (patch)
-
-### 6.0.0
-
-_July 3, 2023_
-
-- Change license to `MIT-0` ([read more about this change in the blog post](https://preset-env.cssdb.org/blog/license-change/))
-- Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.0.0`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#300) (major)
-
-### 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.
-
-### 5.0.1
-
-_January 28, 2023_
-
-- Improve `types` declaration in `package.json`
-
-### 5.0.0
-
-_January 24, 2023_
-
-- Updated: Support for Node v14+ (major).
-
-### 4.2.4
-
-_July 8, 2022_
-
-- Fix case insensitive matching.
-
-### 4.2.3
-
-_May 19, 2022_
-
-- Handle modern channel values in legacy notation (comma separated)
-
-```css
-.color {
-  color: rgba(0, 255, 0, 50%);
-}
-
-/* becomes */
-
-.color {
-  color: rgba(0, 255, 0, 0.5);
-}
-```
-
-### 4.2.2
-
-_February 5, 2022_
-
-- Improved `es module` and `commonjs` compatibility
-
-### 4.2.1
+### 6.0.4
 
-_January 2, 2022_
+_December 31, 2023_
 
-- Removed Sourcemaps from package tarball.
-- Moved CLI to CLI Package. See [announcement](https://github.com/csstools/postcss-plugins/discussions/121).
+- 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)
 
-### 4.2.0
+### 6.0.3
 
-_December 27, 2021_
+_December 15, 2023_
 
-- Added: support for Alpha value as the fourth argument in comma separated values notation.
+- Ensure that fallback values are always valid legacy syntax.
+- Updated [`@csstools/css-tokenizer`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer) to [`2.2.2`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-tokenizer/CHANGELOG.md#222) (patch)
+- Updated [`@csstools/css-parser-algorithms`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms) to [`2.4.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-parser-algorithms/CHANGELOG.md#240) (minor)
+- Updated [`@csstools/postcss-progressive-custom-properties`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties) to [`3.0.3`](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-progressive-custom-properties/CHANGELOG.md#303) (patch)
+- Updated [`@csstools/css-color-parser`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser) to [`1.5.0`](https://github.com/csstools/postcss-plugins/tree/main/packages/css-color-parser/CHANGELOG.md#150) (minor)
 
-### 4.1.0
-
-_December 15, 2021_
-
-- Added: support for Alpha value as a CSS variable in `rgb()` and `rgba()`.
-
-### 4.0.2
-
-_December 13, 2021_
-
-- Changed: now uses `postcss-value-parser` for parsing.
-- Updated: documentation
-- Added: support for CSS variables with `preserve: true` option.
-
-### 4.0.1
-
-_November 18, 2021_
-
-- Added: Safeguards against postcss-values-parser potentially throwing an error.
-- Updated: postcss-value-parser to 6.0.1 (patch)
-
-### 4.0.0
-
-_September 17, 2021_
-
-- Updated: Support for PostCS 8+ (major).
-- Updated: Support for Node 12+ (major).
-
-### 3.0.2
-
-_April 25, 2020_
-
-- Updated: Publish
-
-### 3.0.1
-
-_April 25, 2020_
-
-- Updated: Using `walkType` to evade walker bug in `postcss-values-parser`
-
-### 3.0.0
-
-_April 25, 2020_
-
-- Updated: Support for Node 10+
-- Updated: `postcss` to 7.0.27 (patch)
-- Updated: `postcss-values-parser` to 3.2.0 (minor)
-
-### 2.0.1
-
-_September 18, 2018_
-
-- Updated: PostCSS Values Parser 2 (patch for this project)
-
-### 2.0.0
-
-_September 17, 2018_
-
-- Updated: Support for PostCSS v7+
-- Updated: Support for Node 6+
-
-### 1.0.2
-
-_July 13, 2018_
-
-- Fixed: Poorly detected hsl() and rgb() now resolve correctly
-
-### 1.0.1
-
-_May 11, 2018_
-
-- Fixed: A non-percentage 0 works alongside other percentages
+### 6.0.2
 
-### 1.0.0
+_October 9, 2023_
 
-_May 7, 2018_
+- 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)
 
-- Initial version
+[Full CHANGELOG](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation/CHANGELOG.md)

package/README.md

@@ -1,28 +1,29 @@
-# PostCSS Color Functional Notation [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
+# PostCSS Color Functional Notation [<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/postcss-color-functional-notation.svg" height="20">][npm-url]
-[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/lab-function.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/postcss-color-functional-notation.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/color-functional-notation.svg" height="20">][css-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/color-functional-notation.svg" height="20">][css-url] 
+
+```bash
+npm install postcss-color-functional-notation --save-dev
+```
 
 [PostCSS Color Functional Notation] lets you use space and slash separated
 color notation in CSS, following the [CSS Color] specification.
 
 ```pcss
 :root {
-  --firebrick: rgb(178 34 34);
-  --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
-  --firebrick-hsl: hsla(0 68% 42%);
-  --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
+	--firebrick: rgb(178 34 34);
+	--firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
+	--firebrick-hsl: hsla(0 68% 42%);
+	--firebrick-hsl-a50: hsl(0 68% 42% / 50%);
 }
 
 /* becomes */
 
 :root {
-  --firebrick: rgb(178, 34, 34);
-  --firebrick-a50: rgba(178, 34, 34, .5);
-  --firebrick-hsl: hsl(0, 68%, 42%);
-  --firebrick-hsl-a50: hsla(0, 68%, 42%, .5);
+	--firebrick: rgb(178, 34, 34);
+	--firebrick-a50: rgba(179, 34, 34, 0.5);
+	--firebrick-hsl: hsl(0, 68%, 42%);
+	--firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5);
 }
 ```
 
@@ -31,30 +32,36 @@ color notation in CSS, following the [CSS Color] specification.
 Add [PostCSS Color Functional Notation] to your project:
 
 ```bash
-npm install postcss-color-functional-notation --save-dev
+npm install postcss postcss-color-functional-notation --save-dev
 ```
 
-Use [PostCSS Color Functional Notation] to process your CSS:
+Use it as a [PostCSS] plugin:
 
 ```js
 const postcss = require('postcss');
 const postcssColorFunctionalNotation = require('postcss-color-functional-notation');
 
 postcss([
-  postcssColorFunctionalNotation(/* pluginOptions */)
+	postcssColorFunctionalNotation(/* pluginOptions */)
 ]).process(YOUR_CSS /*, processOptions */);
 ```
 
-[PostCSS Color Functional Notation] runs in all Node environments, with special instructions for:
+[PostCSS Color Functional Notation] runs in all Node environments, with special
+instructions for:
 
-| [Node](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
-| --- | --- | --- | --- | --- |
+- [Node](INSTALL.md#node)
+- [PostCSS CLI](INSTALL.md#postcss-cli)
+- [PostCSS Load Config](INSTALL.md#postcss-load-config)
+- [Webpack](INSTALL.md#webpack)
+- [Next.js](INSTALL.md#nextjs)
+- [Gulp](INSTALL.md#gulp)
+- [Grunt](INSTALL.md#grunt)
 
 ## Options
 
 ### preserve
 
-The `preserve` option determines whether the original functional color notation
+The `preserve` option determines whether the original notation
 is preserved. By default, it is not preserved.
 
 ```js
@@ -63,23 +70,33 @@ postcssColorFunctionalNotation({ preserve: true })
 
 ```pcss
 :root {
-  --firebrick: rgb(178 34 34);
-  --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
-  --firebrick-hsl: hsla(0 68% 42%);
-  --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
+	--firebrick: rgb(178 34 34);
+	--firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
+	--firebrick-hsl: hsla(0 68% 42%);
+	--firebrick-hsl-a50: hsl(0 68% 42% / 50%);
 }
 
 /* becomes */
 
 :root {
-  --firebrick: rgb(178, 34, 34);
-  --firebrick: rgb(178 34 34);
-  --firebrick-a50: rgba(178, 34, 34, .5);
-  --firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
-  --firebrick-hsl: hsl(0, 68%, 42%);
-  --firebrick-hsl: hsla(0 68% 42%);
-  --firebrick-hsl-a50: hsla(0, 68%, 42%, .5);
-  --firebrick-hsl-a50: hsl(0 68% 42% / 50%);
+	--firebrick: rgb(178, 34, 34);
+	--firebrick-a50: rgba(179, 34, 34, 0.5);
+	--firebrick-hsl: hsl(0, 68%, 42%);
+	--firebrick-hsl: hsla(0 68% 42%);
+	--firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5);
+}
+
+@supports (color: rgb(0 0 0 / 0)) {
+:root {
+	--firebrick: rgb(178 34 34);
+	--firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
+}
+}
+
+@supports (color: hsl(0 0% 0% / 0)) {
+:root {
+	--firebrick-hsl-a50: hsl(0 68% 42% / 50%);
+}
 }
 ```
 
@@ -88,20 +105,43 @@ postcssColorFunctionalNotation({ preserve: true })
 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).
+> [!NOTE]
+> 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 })
 ```
 
+```pcss
+:root {
+	--firebrick: rgb(178 34 34);
+	--firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
+	--firebrick-hsl: hsla(0 68% 42%);
+	--firebrick-hsl-a50: hsl(0 68% 42% / 50%);
+}
+
+/* becomes */
+
+:root {
+	--firebrick: rgb(178, 34, 34);
+	--firebrick: rgb(178 34 34);
+	--firebrick-a50: rgba(179, 34, 34, 0.5);
+	--firebrick-a50: rgb(70% 13.5% 13.5% / 50%);
+	--firebrick-hsl: hsl(0, 68%, 42%);
+	--firebrick-hsl: hsla(0 68% 42%);
+	--firebrick-hsl-a50: hsla(0, 68%, 42%, 0.5);
+	--firebrick-hsl-a50: hsl(0 68% 42% / 50%);
+}
+```
+
+_Custom properties do not fallback to the previous declaration_
+
 [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
 [npm-url]: https://www.npmjs.com/package/postcss-color-functional-notation
 
-[CSS Color]: https://drafts.csswg.org/css-color/#ref-for-funcdef-rgb%E2%91%A1%E2%91%A0
-[Gulp PostCSS]: https://github.com/postcss/gulp-postcss
-[Grunt PostCSS]: https://github.com/nDmitry/grunt-postcss
 [PostCSS]: https://github.com/postcss/postcss
-[PostCSS Loader]: https://github.com/postcss/postcss-loader
 [PostCSS Color Functional Notation]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation
+[CSS Color]: https://www.w3.org/TR/css-color-4/#funcdef-rgb

package/dist/index.cjs

@@ -1 +1 @@
-"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 t=/(?:rgb|hsl)a?\(/i,basePlugin=e=>({postcssPlugin:"postcss-color-function",Declaration:(n,{result:o})=>{const u=n.value;if(!t.test(u))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;let s;try{s=r(u)}catch(e){n.warn(o,`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 a=String(s);a!==u&&(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;
+"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)a?\(/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)a?$/i,basePlugin=s=>({postcssPlugin:"postcss-color-functional-notation",Declaration:n=>{const l=n.value;if(!o.test(l))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;const c=r.replaceComponentValues(r.parseCommaSeparatedListOfComponentValues(e.tokenize({css:l})),(s=>{if(!r.isFunctionNode(s)||!a.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)||(e.syntaxFlags.has(t.SyntaxFlag.LegacyRGB)||e.syntaxFlags.has(t.SyntaxFlag.LegacyHSL))&&!e.syntaxFlags.has(t.SyntaxFlag.HasPercentageAlpha)?void 0:"hsl"===e.colorNotation?t.serializeHSL(e):t.serializeRGB(e)})),i=r.stringify(c);i!==l&&(n.cloneBefore({value:i}),s?.preserve||n.remove())}});basePlugin.postcss=!0;const postcssPlugin=e=>{const t=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},e);return t.enableProgressiveCustomProperties&&t.preserve?{postcssPlugin:"postcss-color-functional-notation",plugins:[s(),basePlugin(t)]}:basePlugin(t)};postcssPlugin.postcss=!0,module.exports=postcssPlugin;

package/dist/index.d.ts

@@ -1,10 +1,14 @@
 import type { PluginCreator } from 'postcss';
+
 /** postcss-color-functional-notation plugin options */
-export type pluginOptions = {
+export declare type pluginOptions = {
     /** Preserve the original notation. default: false */
     preserve?: boolean;
     /** Enable "@csstools/postcss-progressive-custom-properties". default: true */
     enableProgressiveCustomProperties?: boolean;
 };
+
 declare const postcssPlugin: PluginCreator<pluginOptions>;
 export default postcssPlugin;
+
+export { }

package/dist/index.mjs

@@ -1 +1 @@
-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 t=/(?:rgb|hsl)a?\(/i,basePlugin=e=>({postcssPlugin:"postcss-color-function",Declaration:(n,{result:o})=>{const u=n.value;if(!t.test(u))return;if(hasFallback(n))return;if(hasSupportsAtRuleAncestor(n))return;let s;try{s=r(u)}catch(e){n.warn(o,`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 a=String(s);a!==u&&(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};
+import s from"@csstools/postcss-progressive-custom-properties";import{tokenize as t}from"@csstools/css-tokenizer";import{color as e,SyntaxFlag as o,serializeHSL as r,serializeRGB as a}from"@csstools/css-color-parser";import{replaceComponentValues as n,parseCommaSeparatedListOfComponentValues as c,isFunctionNode as l,stringify as p}from"@csstools/css-parser-algorithms";function hasFallback(s){const t=s.parent;if(!t)return!1;const e=s.prop.toLowerCase(),o=t.index(s);for(let s=0;s<o;s++){const o=t.nodes[s];if("decl"===o.type&&o.prop.toLowerCase()===e)return!0}return!1}const i=/(?:rgb|hsl)a?\(/i;function hasSupportsAtRuleAncestor(s){let t=s.parent;for(;t;)if("atrule"===t.type){if("supports"===t.name.toLowerCase()&&i.test(t.params))return!0;t=t.parent}else t=t.parent;return!1}const u=/^(?:rgb|hsl)a?$/i,basePlugin=s=>({postcssPlugin:"postcss-color-functional-notation",Declaration:f=>{const g=f.value;if(!i.test(g))return;if(hasFallback(f))return;if(hasSupportsAtRuleAncestor(f))return;const m=n(c(t({css:g})),(s=>{if(!l(s)||!u.test(s.getName()))return;const t=e(s);return!t||t.syntaxFlags.has(o.Experimental)||t.syntaxFlags.has(o.HasNoneKeywords)||t.syntaxFlags.has(o.RelativeColorSyntax)||(t.syntaxFlags.has(o.LegacyRGB)||t.syntaxFlags.has(o.LegacyHSL))&&!t.syntaxFlags.has(o.HasPercentageAlpha)?void 0:"hsl"===t.colorNotation?r(t):a(t)})),h=p(m);h!==g&&(f.cloneBefore({value:h}),s?.preserve||f.remove())}});basePlugin.postcss=!0;const postcssPlugin=t=>{const e=Object.assign({preserve:!1,enableProgressiveCustomProperties:!0},t);return e.enableProgressiveCustomProperties&&e.preserve?{postcssPlugin:"postcss-color-functional-notation",plugins:[s(),basePlugin(e)]}:basePlugin(e)};postcssPlugin.postcss=!0;export{postcssPlugin as default};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "postcss-color-functional-notation",
 	"description": "Use space and slash separated color notation in CSS",
-	"version": "6.0.2",
+	"version": "6.0.4",
 	"author": "Jonathan Neal <jonathantneal@hotmail.com>",
 	"license": "MIT-0",
 	"funding": [
@@ -17,15 +17,18 @@
 	"engines": {
 		"node": "^14 || ^16 || >=18"
 	},
+	"type": "module",
 	"main": "dist/index.cjs",
 	"module": "dist/index.mjs",
-	"types": "./dist/index.d.ts",
 	"exports": {
 		".": {
-			"types": "./dist/index.d.ts",
-			"import": "./dist/index.mjs",
-			"require": "./dist/index.cjs",
-			"default": "./dist/index.mjs"
+			"import": {
+				"types": "./dist/index.d.ts",
+				"default": "./dist/index.mjs"
+			},
+			"require": {
+				"default": "./dist/index.cjs"
+			}
 		}
 	},
 	"files": [
@@ -35,23 +38,14 @@
 		"dist"
 	],
 	"dependencies": {
-		"@csstools/postcss-progressive-custom-properties": "^3.0.2",
-		"postcss-value-parser": "^4.2.0"
+		"@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": {
 		"postcss": "^8.4"
 	},
-	"devDependencies": {
-		"@csstools/postcss-tape": "*"
-	},
-	"scripts": {
-		"build": "rollup -c ../../rollup/default.mjs",
-		"docs": "node ../../.github/bin/generate-docs/install.mjs",
-		"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",
 	"repository": {
 		"type": "git",
@@ -75,12 +69,5 @@
 		"rgba",
 		"space",
 		"syntax"
-	],
-	"csstools": {
-		"exportName": "postcssColorFunctionalNotation",
-		"humanReadableName": "PostCSS Color Functional Notation"
-	},
-	"volta": {
-		"extends": "../../package.json"
-	}
+	]
 }

package/dist/has-fallback-decl.d.ts

@@ -1,2 +0,0 @@
-import type { Declaration } from 'postcss';
-export declare function hasFallback(node: Declaration): boolean;

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

@@ -1,2 +0,0 @@
-import type { Node } from 'postcss';
-export declare function hasSupportsAtRuleAncestor(node: Node): boolean;

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

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