postcss-color-functional-notation 4.0.1 → 4.2.1

package/CHANGELOG.md

@@ -0,0 +1,65 @@
+# Changes to PostCSS Color Functional Notation
+
+### 4.2.1 (January 2, 2022)
+
+- Removed Sourcemaps from package tarball.
+- Moved CLI to CLI Package. See [announcement](https://github.com/csstools/postcss-plugins/discussions/121).
+
+### 4.2.0 (December 27, 2021)
+
+- Added: support for Alpha value as the fourth argument in comma separated values notation.
+
+### 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
+
+### 1.0.0 (May 7, 2018)
+
+- Initial version

package/README.md

@@ -2,7 +2,7 @@
 
 [<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/badge/lab-function.svg" height="20">][css-url]
-[<img alt="Build Status" src="https://github.com/csstools/postcss-color-functional-notation/workflows/test/badge.svg" height="20">][cli-url]
+[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
 [<img alt="Support Chat" src="https://img.shields.io/badge/support-chat-blue.svg" height="20">][git-url]
 
 [PostCSS Color Functional Notation] lets you use space and slash separated
@@ -83,7 +83,7 @@ postcssImageSetFunction({ preserve: true })
 }
 ```
 
-[cli-url]: https://github.com/csstools/postcss-color-functional-notation/actions/workflows/test.yml?query=workflow/test
+[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
 [css-url]: https://cssdb.org/#color-functional-notation
 [git-url]: https://gitter.im/postcss/postcss
 [npm-url]: https://www.npmjs.com/package/postcss-color-functional-notation
@@ -93,4 +93,4 @@ postcssImageSetFunction({ preserve: true })
 [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-color-functional-notation
+[PostCSS Color Functional Notation]: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation

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

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

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=e(require("postcss-value-parser"));function n(e){const n=e.value;let i=e.nodes;"rgb"!==n&&"hsl"!==n||(i=function(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}(i));const s=i.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let f=null;if("hsl"===n||"hsla"===n?f=function(e){if(!function(e){if(!e||"word"!==e.type)return!1;if(!o(e))return!1;const n=r.default.unit(e.value);if(!n)return!1;return!!n.number&&("deg"===n.unit||"grad"===n.unit||"rad"===n.unit||"turn"===n.unit||""===n.unit)}(e[0]))return null;if(!t(e[1]))return null;if(!t(e[2]))return null;const n={h:r.default.unit(e[0].value),hNode:e[0],s:r.default.unit(e[1].value),sNode:e[1],l:r.default.unit(e[2].value),lNode:e[2]};if(function(e){switch(e.unit){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":e.unit="",e.number=Math.round(360*parseFloat(e.number)).toString()}}(n.h),""!==n.h.unit)return null;n.hNode.value=n.h.number,l(e[3])&&(n.slash=e[3]);(t(e[4])||u(e[4])||a(e[4]))&&(n.alpha=e[4]);return n}(s):"rgb"!==n&&"rgba"!==n||(f=function(e){if(!t(e[0]))return null;if(!t(e[1]))return null;if(!t(e[2]))return null;const n={r:r.default.unit(e[0].value),rNode:e[0],g:r.default.unit(e[1].value),gNode:e[1],b:r.default.unit(e[2].value),bNode:e[2]};"%"===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);l(e[3])&&(n.slash=e[3]);(t(e[4])||u(e[4])||a(e[4]))&&(n.alpha=e[4]);return n}(s)),!f)return;if(s.length>3&&(!f.slash||!f.alpha))return;!function(e,n,t){"hsl"===e.value||"hsla"===e.value?e.value="hsl":"rgb"!==e.value&&"rgba"!==e.value||(e.value="rgb");if(!n||!t)return;"hsl"===e.value?e.value="hsla":e.value="rgba";if(n.value=",",n.before="",!function(e){if(!e||"word"!==e.type)return!1;if(!o(e))return!1;const n=r.default.unit(e.value);if(!n)return!1;return!!n.number}(t))return;const u=r.default.unit(t.value);if(!u)return;"%"===u.unit&&(u.number=String(parseFloat(u.number)/100),t.value=String(u.number))}(e,f.slash,f.alpha);const[c,d]=function(e){if(function(e){if(void 0!==e.r)return!0;return!1}(e))return[e.rNode,e.gNode,e.bNode];return[e.hNode,e.sNode,e.lNode]}(f);e.nodes.splice(e.nodes.indexOf(c)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),e.nodes.splice(e.nodes.indexOf(d)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""})}function t(e){if(!e||"word"!==e.type)return!1;if(!o(e))return!1;const n=r.default.unit(e.value);return!!n&&("%"===n.unit||""===n.unit)}function u(e){return e&&"function"===e.type&&"calc"===e.value}function a(e){return e&&"function"===e.type&&"var"===e.value}function l(e){return e&&"div"===e.type&&"/"===e.value}function o(e){if(!e||!e.value)return!1;try{return!1!==r.default.unit(e.value)}catch(e){return!1}}const i=e=>{const t="preserve"in Object(e)&&Boolean(e.preserve);return{postcssPlugin:"postcss-color-functional-notation",Declaration:(e,{result:u,postcss:a})=>{if(t&&function(e){let r=e.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name&&-1!==r.params.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}(e))return;const l=e.value;if(!/(^|[^\w-])(hsla?|rgba?)\(/i.test(l))return;let o;try{o=r.default(l)}catch(r){e.warn(u,`Failed to parse value '${l}' as a hsl or rgb function. Leaving the original value intact.`)}if(void 0===o)return;o.walk((e=>{e.type&&"function"===e.type&&("hsl"!==e.value&&"hsla"!==e.value&&"rgb"!==e.value&&"rgba"!==e.value||n(e))}));const i=String(o);if(i!==l)if(t&&e.variable){const r=e.parent,n="(color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5))",t=a.atRule({name:"supports",params:n,source:e.source}),u=r.clone();u.removeAll(),u.append(e.clone()),t.append(u);let l=r,o=r.next();for(;l&&o&&"atrule"===o.type&&"supports"===o.name&&o.params===n;)l=o,o=o.next();l.after(t),e.value=i}else t?e.cloneBefore({value:i}):e.value=i}}};i.postcss=!0,module.exports=i;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import type { PluginCreator } from 'postcss';
+/** Transform lab() and lch() functions in CSS. */
+declare const postcssPlugin: PluginCreator<{
+    preserve: boolean;
+}>;
+export default postcssPlugin;

package/dist/index.mjs

@@ -0,0 +1 @@
+import e from"postcss-value-parser";function r(r){const o=r.value;let i=r.nodes;"rgb"!==o&&"hsl"!==o||(i=function(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}(i));const s=i.slice().filter((e=>"comment"!==e.type&&"space"!==e.type));let c=null;if("hsl"===o||"hsla"===o?c=function(r){if(!function(r){if(!r||"word"!==r.type)return!1;if(!l(r))return!1;const n=e.unit(r.value);if(!n)return!1;return!!n.number&&("deg"===n.unit||"grad"===n.unit||"rad"===n.unit||"turn"===n.unit||""===n.unit)}(r[0]))return null;if(!n(r[1]))return null;if(!n(r[2]))return null;const o={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]};if(function(e){switch(e.unit){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":e.unit="",e.number=Math.round(360*parseFloat(e.number)).toString()}}(o.h),""!==o.h.unit)return null;o.hNode.value=o.h.number,a(r[3])&&(o.slash=r[3]);(n(r[4])||t(r[4])||u(r[4]))&&(o.alpha=r[4]);return o}(s):"rgb"!==o&&"rgba"!==o||(c=function(r){if(!n(r[0]))return null;if(!n(r[1]))return null;if(!n(r[2]))return null;const l={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]};"%"===l.r.unit&&(l.r.number=String(Math.floor(Number(l.r.number)/100*255)),l.rNode.value=l.r.number);"%"===l.g.unit&&(l.g.number=String(Math.floor(Number(l.g.number)/100*255)),l.gNode.value=l.g.number);"%"===l.b.unit&&(l.b.number=String(Math.floor(Number(l.b.number)/100*255)),l.bNode.value=l.b.number);a(r[3])&&(l.slash=r[3]);(n(r[4])||t(r[4])||u(r[4]))&&(l.alpha=r[4]);return l}(s)),!c)return;if(s.length>3&&(!c.slash||!c.alpha))return;!function(r,n,t){"hsl"===r.value||"hsla"===r.value?r.value="hsl":"rgb"!==r.value&&"rgba"!==r.value||(r.value="rgb");if(!n||!t)return;"hsl"===r.value?r.value="hsla":r.value="rgba";if(n.value=",",n.before="",!function(r){if(!r||"word"!==r.type)return!1;if(!l(r))return!1;const n=e.unit(r.value);if(!n)return!1;return!!n.number}(t))return;const u=e.unit(t.value);if(!u)return;"%"===u.unit&&(u.number=String(parseFloat(u.number)/100),t.value=String(u.number))}(r,c.slash,c.alpha);const[f,v]=function(e){if(function(e){if(void 0!==e.r)return!0;return!1}(e))return[e.rNode,e.gNode,e.bNode];return[e.hNode,e.sNode,e.lNode]}(c);r.nodes.splice(r.nodes.indexOf(f)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""}),r.nodes.splice(r.nodes.indexOf(v)+1,0,{sourceIndex:0,sourceEndIndex:1,value:",",type:"div",before:"",after:""})}function n(r){if(!r||"word"!==r.type)return!1;if(!l(r))return!1;const n=e.unit(r.value);return!!n&&("%"===n.unit||""===n.unit)}function t(e){return e&&"function"===e.type&&"calc"===e.value}function u(e){return e&&"function"===e.type&&"var"===e.value}function a(e){return e&&"div"===e.type&&"/"===e.value}function l(r){if(!r||!r.value)return!1;try{return!1!==e.unit(r.value)}catch(e){return!1}}const o=n=>{const t="preserve"in Object(n)&&Boolean(n.preserve);return{postcssPlugin:"postcss-color-functional-notation",Declaration:(n,{result:u,postcss:a})=>{if(t&&function(e){let r=e.parent;for(;r;)if("atrule"===r.type){if("supports"===r.name&&-1!==r.params.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}(n))return;const l=n.value;if(!/(^|[^\w-])(hsla?|rgba?)\(/i.test(l))return;let o;try{o=e(l)}catch(e){n.warn(u,`Failed to parse value '${l}' as a hsl or rgb function. Leaving the original value intact.`)}if(void 0===o)return;o.walk((e=>{e.type&&"function"===e.type&&("hsl"!==e.value&&"hsla"!==e.value&&"rgb"!==e.value&&"rgba"!==e.value||r(e))}));const i=String(o);if(i!==l)if(t&&n.variable){const e=n.parent,r="(color: rgb(0 0 0 / 0.5)) and (color: hsl(0 0% 0% / 0.5))",t=a.atRule({name:"supports",params:r,source:n.source}),u=e.clone();u.removeAll(),u.append(n.clone()),t.append(u);let l=e,o=e.next();for(;l&&o&&"atrule"===o.type&&"supports"===o.name&&o.params===r;)l=o,o=o.next();l.after(t),n.value=i}else t?n.cloneBefore({value:i}):n.value=i}}};o.postcss=!0;export{o as default};

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

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

package/package.json

@@ -1,82 +1,41 @@
 {
   "name": "postcss-color-functional-notation",
-  "version": "4.0.1",
+  "version": "4.2.1",
   "description": "Use space and slash separated color notation in CSS",
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "license": "CC0-1.0",
-  "repository": "csstools/postcss-color-functional-notation",
-  "homepage": "https://github.com/csstools/postcss-color-functional-notation#readme",
-  "bugs": "https://github.com/csstools/postcss-color-functional-notation/issues",
-  "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.mjs",
+  "homepage": "https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-color-functional-notation#readme",
+  "bugs": "https://github.com/csstools/postcss-plugins/issues",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "files": [
+    "CHANGELOG.md",
+    "LICENSE.md",
+    "README.md",
     "dist"
   ],
   "scripts": {
-    "build": "npx rollup -c .rollup.js",
-    "build:watch": "npx rollup -c .rollup.js --watch",
-    "lint": "npx eslint --cache src",
-    "lint:fix": "npx eslint --cache --fix",
-    "pretest": "npm install && npm run build",
-    "test": "npm run lint && npm run tape",
-    "tape": "npx postcss-tape",
-    "prepublishOnly": "npm test"
+    "build": "rollup -c ../../rollup/default.js",
+    "clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
+    "lint": "eslint ./src --ext .js --ext .ts --ext .mjs --no-error-on-unmatched-pattern",
+    "prepublishOnly": "npm run clean && npm run build && npm run test",
+    "stryker": "stryker run --logLevel error",
+    "test": "postcss-tape --ci && npm run test:exports",
+    "test:exports": "node ./test/_import.mjs && node ./test/_require.cjs"
   },
   "engines": {
-    "node": ">=12"
+    "node": "^12 || ^14 || >=16"
   },
   "dependencies": {
-    "postcss-values-parser": "6.0.1"
-  },
-  "peerDependencies": {
-    "postcss": "^8.3"
+    "postcss-value-parser": "^4.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.4",
-    "eslint": "^8.2.0",
-    "postcss": "^8.3.11",
-    "postcss-tape": "^6.0.1",
-    "pre-commit": "^1.2.2",
-    "rollup": "^2.60.0",
-    "rollup-plugin-babel": "^4.4.0"
-  },
-  "babel": {
-    "presets": [
-      [
-        "@babel/env",
-        {
-          "targets": "maintained node versions"
-        }
-      ]
-    ]
-  },
-  "eslintConfig": {
-    "env": {
-      "es6": true,
-      "node": true
-    },
-    "extends": "eslint:recommended",
-    "parserOptions": {
-      "sourceType": "module"
-    }
+    "postcss": "^8.3.6",
+    "postcss-tape": "^6.0.1"
   },
-  "rollup": {
-    "input": "src/index.js",
-    "plugins": [
-      "rollup-plugin-babel"
-    ],
-    "output": [
-      {
-        "exports": "default",
-        "file": "dist/index.cjs.js",
-        "format": "cjs"
-      },
-      {
-        "file": "dist/index.esm.js",
-        "format": "esm"
-      }
-    ]
+  "peerDependencies": {
+    "postcss": "^8.3"
   },
   "keywords": [
     "postcss",
@@ -95,5 +54,13 @@
     "syntax",
     "space",
     "comma"
-  ]
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/csstools/postcss-plugins.git",
+    "directory": "plugins/postcss-color-functional-notation"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  }
 }

package/dist/index.cjs.js

@@ -1,228 +0,0 @@
-'use strict';
-
-var postcssValuesParser = require('postcss-values-parser');
-
-/** @type {(decl: CSSFunction) => void} Transform a space and slash separated color function. */
-
-const onCSSFunction = node => {
-  /** @type {{ name: string, nodes: CSSNode[] }} */
-  const {
-    name,
-    nodes
-  } = node;
-
-  if (isColorFunctionName(name)) {
-    const isHsl = isHslColorFunctionName(name) && isHslFunctionContents(nodes);
-    const isRgbWithNumbers = isRgbColorFunctionName(name) && isRgbNumberFunctionContents(nodes);
-    const isRgbWithPercents = isRgbColorFunctionName(name) && isRgbPercentFunctionContents(nodes);
-
-    if (isHsl || isRgbWithNumbers || isRgbWithPercents) {
-      // rename the Color function to `hsl` or `rgb`
-      Object.assign(node, {
-        name: isHsl ? 'hsl' : 'rgb'
-      });
-      /** @type {CSSPunctuation} Slash punctuation before the Alpha channel. */
-
-      const slashNode = nodes[3];
-      /** @type {CSSNumber} Alpha channel. */
-
-      const alphaNode = nodes[4];
-
-      if (alphaNode) {
-        if (isPercentage(alphaNode) && !isCalc(alphaNode)) {
-          // transform the Alpha channel from a Percentage to (0-1) Number
-          Object.assign(alphaNode, {
-            value: String(alphaNode.value / 100),
-            unit: ''
-          });
-        } // if the color is fully opaque (i.e. the Alpha channel is `1`)
-
-
-        if (alphaNode.value === '1') {
-          // remove the Slash and Alpha channel
-          slashNode.remove();
-          alphaNode.remove();
-        } else {
-          // otherwise, rename the Color function to `hsla` or `rgba`
-          Object.assign(node, {
-            name: isHsl ? 'hsla' : 'rgba'
-          });
-        }
-      } // replace a remaining Slash with a Comma
-
-
-      if (slashNode && isSlash(slashNode)) {
-        slashNode.replaceWith(commaNode.clone());
-      }
-      /** Extracted Color channels. */
-
-
-      let [channelNode1, channelNode2, channelNode3] = nodes;
-
-      if (isRgbWithPercents) {
-        Object.assign(channelNode1, {
-          value: to255ColorValue(channelNode1.value),
-          unit: ''
-        });
-        Object.assign(channelNode2, {
-          value: to255ColorValue(channelNode2.value),
-          unit: ''
-        });
-        Object.assign(channelNode3, {
-          value: to255ColorValue(channelNode3.value),
-          unit: ''
-        });
-      }
-
-      channelNode2.after(commaNode.clone());
-      channelNode1.after(commaNode.clone());
-    }
-  }
-};
-const commaNode = postcssValuesParser.parse(',').first;
-/** Return a value transformed from a scale of 0-100 to a scale of 0-255 */
-
-function to255ColorValue(value) {
-  return String(Math.floor(value * 255 / 100));
-}
-/** @type {(value: RegExp) => (value: string) => boolean} Return a function that checks whether the expression exists in a value. */
-
-
-const createRegExpTest$1 = Function.bind.bind(RegExp.prototype.test);
-/** Return whether the function name is `hsl()`, `hsla()`, `rgb()`, or `rgba()`. */
-
-const isColorFunctionName = createRegExpTest$1(/^(hsl|rgb)a?$/i);
-/** Return whether the function name is `hsl()` or `hsla()`. */
-
-const isHslColorFunctionName = createRegExpTest$1(/^hsla?$/i);
-/** Return whether the function name is `rgb()` or `rgba()`. */
-
-const isRgbColorFunctionName = createRegExpTest$1(/^rgba?$/i);
-/** Return whether the function name is `calc`. */
-
-const isCalcFunctionName = createRegExpTest$1(/^calc$/i);
-/** Return whether the unit is alpha-like. */
-
-const isAlphaLikeUnit = createRegExpTest$1(/^%?$/i);
-/** Return whether the unit is hue-like. */
-
-const isHueLikeUnit = createRegExpTest$1(/^(deg|grad|rad|turn)?$/i);
-/** @type {(node: CSSNumber) => boolean} Return whether the node is an Alpha-like unit. */
-
-const isAlphaValue = node => isCalc(node) || node.type === 'numeric' && isAlphaLikeUnit(node.unit);
-/** @type {(node: CSSFunction) => boolean} Return whether the node is a calc() function. */
-
-
-const isCalc = node => node.type === 'func' && isCalcFunctionName(node.name);
-/** @type {(node: CSSNumber) => boolean} Return whether the node is a Hue-like unit. */
-
-
-const isHue = node => isCalc(node) || node.type === 'numeric' && isHueLikeUnit(node.unit);
-/** @type {(node: CSSNumber) => boolean} Return whether the node is a Number unit. */
-
-
-const isNumber = node => isCalc(node) || node.type === 'numeric' && node.unit === '';
-/** @type {(node: CSSNumber) => boolean} Return whether the node is a Percentage unit. */
-
-
-const isPercentage = node => isCalc(node) || node.type === 'numeric' && (node.unit === '%' || node.unit === '' && node.value === '0');
-/** @type {(node: CSSOperator) => boolean} Return whether the node is a Slash delimiter. */
-
-
-const isSlash = node => node.type === 'operator' && node.value === '/';
-/** @type {(nodes: Node[]) => boolean} Return whether a set of nodes is an hsl() function. */
-
-
-const isHslFunctionContents = nodes => nodes.every((node, index) => typeof hslFunctionContents[index] === 'function' && hslFunctionContents[index](node));
-/** Set of nodes in a lab() function. */
-
-
-const hslFunctionContents = [isHue, isPercentage, isPercentage, isSlash, isAlphaValue];
-/** @type {(nodes: Node[]) => boolean} Return whether a set of nodes is an rgb() function with numbers. */
-
-const isRgbNumberFunctionContents = nodes => nodes.every((node, index) => typeof rgbNumberFunctionContents[index] === 'function' && rgbNumberFunctionContents[index](node));
-/** Set of nodes in a rgb() function with numbers. */
-
-
-const rgbNumberFunctionContents = [isNumber, isNumber, isNumber, isSlash, isAlphaValue];
-/** @type {(nodes: Node[]) => boolean} Return whether a set of nodes is an rgb() function with percentages. */
-
-const isRgbPercentFunctionContents = nodes => nodes.every((node, index) => typeof rgbPercentFunctionContents[index] === 'function' && rgbPercentFunctionContents[index](node));
-/** Set of nodes in a rgb() function with percentages. */
-
-
-const rgbPercentFunctionContents = [isPercentage, isPercentage, isPercentage, isSlash, isAlphaValue];
-/** @typedef {import('postcss-values-parser').Func} CSSFunction */
-
-/** @typedef {import('postcss-values-parser').Node} CSSNode */
-
-/** @typedef {import('postcss-values-parser').Numeric} CSSNumber */
-
-/** @typedef {import('postcss-values-parser').Operator} CSSOperator */
-
-/** @typedef {import('postcss-values-parser').Punctuation} CSSPunctuation */
-
-var options = {
-  /** Whether to preserve the original functional color declaration. */
-  preserve: false
-};
-
-/** @type {(decl: CSSDeclaration) => void} Transform space and slash separated color functions in CSS Declarations. */
-
-const onCSSDeclaration = (decl, {
-  result
-}) => {
-  const {
-    value: originalValue
-  } = decl;
-
-  if (hasAnyColorFunction(originalValue)) {
-    let valueAST;
-
-    try {
-      valueAST = postcssValuesParser.parse(originalValue, {
-        ignoreUnknownWords: true
-      });
-    } catch (error) {
-      decl.warn(result, `Failed to parse value '${originalValue}' as a color function. Leaving the original value intact.`);
-    }
-
-    if (typeof valueAST === 'undefined') {
-      return;
-    }
-
-    valueAST.walkType('func', onCSSFunction);
-    const modifiedValue = String(valueAST);
-
-    if (modifiedValue !== originalValue) {
-      if (options.preserve) decl.cloneBefore({
-        value: modifiedValue
-      });else decl.value = modifiedValue;
-    }
-  }
-};
-/** @type {(value: RegExp) => (value: string) => boolean} Return a function that checks whether the expression exists in a value. */
-
-const createRegExpTest = Function.bind.bind(RegExp.prototype.test);
-/** Return whether the value has an `hsl()`, `hsla()`, `rgb()`, or `rgba()` function. */
-
-const hasAnyColorFunction = createRegExpTest(/(^|[^\w-])(hsla?|rgba?)\(/i);
-/** @typedef {import('postcss').Declaration} CSSDeclaration */
-
-/** Transform space and slash separated color functions in CSS. */
-
-function postcssColorFunctionalNotation(opts) {
-  options.preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false;
-  return {
-    postcssPlugin: 'postcss-color-functional-notation',
-    Declaration: onCSSDeclaration
-  };
-}
-postcssColorFunctionalNotation.postcss = true;
-/** @typedef {import('postcss').Root} CSSRoot */
-
-/** @typedef {(root: CSSRoot) => void} PostCSSTransformCallback */
-
-/** @typedef {(opts: options) => PostCSSTransformCallback} PostCSSPluginInitializer */
-
-module.exports = postcssColorFunctionalNotation;

package/dist/index.esm.js

@@ -1,226 +0,0 @@
-import { parse } from 'postcss-values-parser';
-
-/** @type {(decl: CSSFunction) => void} Transform a space and slash separated color function. */
-
-const onCSSFunction = node => {
-  /** @type {{ name: string, nodes: CSSNode[] }} */
-  const {
-    name,
-    nodes
-  } = node;
-
-  if (isColorFunctionName(name)) {
-    const isHsl = isHslColorFunctionName(name) && isHslFunctionContents(nodes);
-    const isRgbWithNumbers = isRgbColorFunctionName(name) && isRgbNumberFunctionContents(nodes);
-    const isRgbWithPercents = isRgbColorFunctionName(name) && isRgbPercentFunctionContents(nodes);
-
-    if (isHsl || isRgbWithNumbers || isRgbWithPercents) {
-      // rename the Color function to `hsl` or `rgb`
-      Object.assign(node, {
-        name: isHsl ? 'hsl' : 'rgb'
-      });
-      /** @type {CSSPunctuation} Slash punctuation before the Alpha channel. */
-
-      const slashNode = nodes[3];
-      /** @type {CSSNumber} Alpha channel. */
-
-      const alphaNode = nodes[4];
-
-      if (alphaNode) {
-        if (isPercentage(alphaNode) && !isCalc(alphaNode)) {
-          // transform the Alpha channel from a Percentage to (0-1) Number
-          Object.assign(alphaNode, {
-            value: String(alphaNode.value / 100),
-            unit: ''
-          });
-        } // if the color is fully opaque (i.e. the Alpha channel is `1`)
-
-
-        if (alphaNode.value === '1') {
-          // remove the Slash and Alpha channel
-          slashNode.remove();
-          alphaNode.remove();
-        } else {
-          // otherwise, rename the Color function to `hsla` or `rgba`
-          Object.assign(node, {
-            name: isHsl ? 'hsla' : 'rgba'
-          });
-        }
-      } // replace a remaining Slash with a Comma
-
-
-      if (slashNode && isSlash(slashNode)) {
-        slashNode.replaceWith(commaNode.clone());
-      }
-      /** Extracted Color channels. */
-
-
-      let [channelNode1, channelNode2, channelNode3] = nodes;
-
-      if (isRgbWithPercents) {
-        Object.assign(channelNode1, {
-          value: to255ColorValue(channelNode1.value),
-          unit: ''
-        });
-        Object.assign(channelNode2, {
-          value: to255ColorValue(channelNode2.value),
-          unit: ''
-        });
-        Object.assign(channelNode3, {
-          value: to255ColorValue(channelNode3.value),
-          unit: ''
-        });
-      }
-
-      channelNode2.after(commaNode.clone());
-      channelNode1.after(commaNode.clone());
-    }
-  }
-};
-const commaNode = parse(',').first;
-/** Return a value transformed from a scale of 0-100 to a scale of 0-255 */
-
-function to255ColorValue(value) {
-  return String(Math.floor(value * 255 / 100));
-}
-/** @type {(value: RegExp) => (value: string) => boolean} Return a function that checks whether the expression exists in a value. */
-
-
-const createRegExpTest$1 = Function.bind.bind(RegExp.prototype.test);
-/** Return whether the function name is `hsl()`, `hsla()`, `rgb()`, or `rgba()`. */
-
-const isColorFunctionName = createRegExpTest$1(/^(hsl|rgb)a?$/i);
-/** Return whether the function name is `hsl()` or `hsla()`. */
-
-const isHslColorFunctionName = createRegExpTest$1(/^hsla?$/i);
-/** Return whether the function name is `rgb()` or `rgba()`. */
-
-const isRgbColorFunctionName = createRegExpTest$1(/^rgba?$/i);
-/** Return whether the function name is `calc`. */
-
-const isCalcFunctionName = createRegExpTest$1(/^calc$/i);
-/** Return whether the unit is alpha-like. */
-
-const isAlphaLikeUnit = createRegExpTest$1(/^%?$/i);
-/** Return whether the unit is hue-like. */
-
-const isHueLikeUnit = createRegExpTest$1(/^(deg|grad|rad|turn)?$/i);
-/** @type {(node: CSSNumber) => boolean} Return whether the node is an Alpha-like unit. */
-
-const isAlphaValue = node => isCalc(node) || node.type === 'numeric' && isAlphaLikeUnit(node.unit);
-/** @type {(node: CSSFunction) => boolean} Return whether the node is a calc() function. */
-
-
-const isCalc = node => node.type === 'func' && isCalcFunctionName(node.name);
-/** @type {(node: CSSNumber) => boolean} Return whether the node is a Hue-like unit. */
-
-
-const isHue = node => isCalc(node) || node.type === 'numeric' && isHueLikeUnit(node.unit);
-/** @type {(node: CSSNumber) => boolean} Return whether the node is a Number unit. */
-
-
-const isNumber = node => isCalc(node) || node.type === 'numeric' && node.unit === '';
-/** @type {(node: CSSNumber) => boolean} Return whether the node is a Percentage unit. */
-
-
-const isPercentage = node => isCalc(node) || node.type === 'numeric' && (node.unit === '%' || node.unit === '' && node.value === '0');
-/** @type {(node: CSSOperator) => boolean} Return whether the node is a Slash delimiter. */
-
-
-const isSlash = node => node.type === 'operator' && node.value === '/';
-/** @type {(nodes: Node[]) => boolean} Return whether a set of nodes is an hsl() function. */
-
-
-const isHslFunctionContents = nodes => nodes.every((node, index) => typeof hslFunctionContents[index] === 'function' && hslFunctionContents[index](node));
-/** Set of nodes in a lab() function. */
-
-
-const hslFunctionContents = [isHue, isPercentage, isPercentage, isSlash, isAlphaValue];
-/** @type {(nodes: Node[]) => boolean} Return whether a set of nodes is an rgb() function with numbers. */
-
-const isRgbNumberFunctionContents = nodes => nodes.every((node, index) => typeof rgbNumberFunctionContents[index] === 'function' && rgbNumberFunctionContents[index](node));
-/** Set of nodes in a rgb() function with numbers. */
-
-
-const rgbNumberFunctionContents = [isNumber, isNumber, isNumber, isSlash, isAlphaValue];
-/** @type {(nodes: Node[]) => boolean} Return whether a set of nodes is an rgb() function with percentages. */
-
-const isRgbPercentFunctionContents = nodes => nodes.every((node, index) => typeof rgbPercentFunctionContents[index] === 'function' && rgbPercentFunctionContents[index](node));
-/** Set of nodes in a rgb() function with percentages. */
-
-
-const rgbPercentFunctionContents = [isPercentage, isPercentage, isPercentage, isSlash, isAlphaValue];
-/** @typedef {import('postcss-values-parser').Func} CSSFunction */
-
-/** @typedef {import('postcss-values-parser').Node} CSSNode */
-
-/** @typedef {import('postcss-values-parser').Numeric} CSSNumber */
-
-/** @typedef {import('postcss-values-parser').Operator} CSSOperator */
-
-/** @typedef {import('postcss-values-parser').Punctuation} CSSPunctuation */
-
-var options = {
-  /** Whether to preserve the original functional color declaration. */
-  preserve: false
-};
-
-/** @type {(decl: CSSDeclaration) => void} Transform space and slash separated color functions in CSS Declarations. */
-
-const onCSSDeclaration = (decl, {
-  result
-}) => {
-  const {
-    value: originalValue
-  } = decl;
-
-  if (hasAnyColorFunction(originalValue)) {
-    let valueAST;
-
-    try {
-      valueAST = parse(originalValue, {
-        ignoreUnknownWords: true
-      });
-    } catch (error) {
-      decl.warn(result, `Failed to parse value '${originalValue}' as a color function. Leaving the original value intact.`);
-    }
-
-    if (typeof valueAST === 'undefined') {
-      return;
-    }
-
-    valueAST.walkType('func', onCSSFunction);
-    const modifiedValue = String(valueAST);
-
-    if (modifiedValue !== originalValue) {
-      if (options.preserve) decl.cloneBefore({
-        value: modifiedValue
-      });else decl.value = modifiedValue;
-    }
-  }
-};
-/** @type {(value: RegExp) => (value: string) => boolean} Return a function that checks whether the expression exists in a value. */
-
-const createRegExpTest = Function.bind.bind(RegExp.prototype.test);
-/** Return whether the value has an `hsl()`, `hsla()`, `rgb()`, or `rgba()` function. */
-
-const hasAnyColorFunction = createRegExpTest(/(^|[^\w-])(hsla?|rgba?)\(/i);
-/** @typedef {import('postcss').Declaration} CSSDeclaration */
-
-/** Transform space and slash separated color functions in CSS. */
-
-function postcssColorFunctionalNotation(opts) {
-  options.preserve = 'preserve' in Object(opts) ? Boolean(opts.preserve) : false;
-  return {
-    postcssPlugin: 'postcss-color-functional-notation',
-    Declaration: onCSSDeclaration
-  };
-}
-postcssColorFunctionalNotation.postcss = true;
-/** @typedef {import('postcss').Root} CSSRoot */
-
-/** @typedef {(root: CSSRoot) => void} PostCSSTransformCallback */
-
-/** @typedef {(opts: options) => PostCSSTransformCallback} PostCSSPluginInitializer */
-
-export { postcssColorFunctionalNotation as default };