postcss-colormin 9.0.3 → 9.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-colormin",
-  "version": "9.0.3",
+  "version": "9.0.4",
   "description": "Minify colors in your CSS files with PostCSS.",
   "exports": {
     ".": {
@@ -43,10 +43,11 @@
     "url": "git+https://github.com/cssnano/cssnano.git"
   },
   "dependencies": {
-    "@colordx/core": "^6.5.0",
-    "browserslist": "^4.29.0",
+    "@colordx/core": "^7.2.0",
+    "@csstools/css-tokenizer": "^4.0.2",
+    "browserslist": "^4.29.1",
     "caniuse-api": "^4.0.0",
-    "postcss-value-parser": "^4.2.0"
+    "cssnano-utils": "^8.0.0"
   },
   "bugs": {
     "url": "https://github.com/cssnano/cssnano/issues"
@@ -55,6 +56,7 @@
     "node": "^22.22.3 || ^24.15.0 || >=26.0"
   },
   "devDependencies": {
+    "@webref/css": "8.7.5",
     "postcss": "^8.5.28"
   },
   "peerDependencies": {
@@ -62,6 +64,7 @@
   },
   "type": "module",
   "scripts": {
-    "test": "node --test"
+    "test": "node --test",
+    "acquire": "node ./script/acquire.mjs"
   }
 }

package/src/data/colorProperties.json

@@ -0,0 +1,60 @@
+[
+  "-webkit-text-fill-color",
+  "-webkit-text-stroke",
+  "-webkit-text-stroke-color",
+  "accent-color",
+  "background",
+  "background-color",
+  "background-image",
+  "border",
+  "border-block",
+  "border-block-color",
+  "border-block-end",
+  "border-block-end-color",
+  "border-block-start",
+  "border-block-start-color",
+  "border-bottom",
+  "border-bottom-color",
+  "border-color",
+  "border-image",
+  "border-image-source",
+  "border-inline",
+  "border-inline-color",
+  "border-inline-end",
+  "border-inline-end-color",
+  "border-inline-start",
+  "border-inline-start-color",
+  "border-left",
+  "border-left-color",
+  "border-right",
+  "border-right-color",
+  "border-top",
+  "border-top-color",
+  "box-shadow",
+  "box-shadow-color",
+  "caret",
+  "caret-color",
+  "color",
+  "column-rule",
+  "column-rule-color",
+  "fill",
+  "fill-color",
+  "flood-color",
+  "lighting-color",
+  "outline",
+  "outline-color",
+  "row-rule",
+  "row-rule-color",
+  "rule",
+  "rule-color",
+  "scrollbar-color",
+  "stop-color",
+  "stroke",
+  "stroke-color",
+  "tap-highlight-color",
+  "text-decoration",
+  "text-decoration-color",
+  "text-emphasis",
+  "text-emphasis-color",
+  "text-shadow"
+]

package/src/index.js

@@ -1,29 +1,26 @@
 import getBrowsersList from '#getBrowsersList';
 import caniuseApi from 'caniuse-api';
-import valueParser from 'postcss-value-parser';
+import { colordx as colord } from '@colordx/core';
+import cssnanoUtils from 'cssnano-utils';
+import colorPropertiesData from './data/colorProperties.json' with { type: 'json' };
 import minifyColor from './minifyColor.js';
 
+/** @import {CSSToken} from '@csstools/css-tokenizer' */
 const { isSupported } = caniuseApi;
+const {
+  applyEdits,
+  asciiLowerCase,
+  balancedTokens,
+  decoded,
+  mathFunctions,
+  TokenType,
+  tokenEnd,
+  tokenStart,
+} = cssnanoUtils;
 /** @import browserslist from 'browserslist' */
 
-const rgbOrHslRegex = /^(rgb|hsl)a?$/i;
-const notMinifiableRegex =
-  /^(composes|font|src$|filter|-webkit-tap-highlight-color)/i;
-/**
- * @param {{nodes: valueParser.Node[]}} parent
- * @param {(node: valueParser.Node, index: number, parent: {nodes: valueParser.Node[]}) => false | undefined} callback
- * @return {void}
- */
-function walk(parent, callback) {
-  for (const [index, node] of parent.nodes.entries()) {
-    const bubble = callback(node, index, parent);
-
-    if (node.type === 'function' && bubble !== false) {
-      walk(node, callback);
-    }
-  }
-}
-
+const colorProperties = new Set(colorPropertiesData);
+const colorFunctionRegex = /^(?:rgb|hsl)a?$|^hwb$/v;
 /*
  * IE 8 & 9 do not properly handle clicks on elements
  * with a `transparent` `background-color`.
@@ -31,60 +28,96 @@ function walk(parent, callback) {
  * https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
  */
 const browsersWithTransparentBug = new Set(['ie 8', 'ie 9']);
-const mathFunctions = new Set(['calc', 'min', 'max', 'clamp']);
-
-/**
- * @param {valueParser.Node} node
- * @return {boolean}
- */
-function isMathFunctionNode(node) {
-  if (node.type !== 'function') {
-    return false;
+const tokensRequiringSeparator = new Set([
+  TokenType.Ident,
+  TokenType.Function,
+  TokenType.URL,
+  TokenType.BadURL,
+  TokenType.Hash,
+  TokenType.Number,
+  TokenType.Dimension,
+  TokenType.Percentage,
+]);
+
+/** @param {string} value @param {Options} options @return {string} */
+function transform(value, options) {
+  const structure = balancedTokens(value);
+  if (!structure) {
+    return value;
+  }
+  const input = structure.tokens;
+  /** @type {{start:number,end:number,text:string}[]} */
+  const replacements = [];
+
+  /** @param {number} end @param {number} index */
+  function separator(end, index) {
+    const next = input[index + 1];
+    return next &&
+      tokensRequiringSeparator.has(next[0]) &&
+      end === tokenStart(next)
+      ? ' '
+      : '';
   }
-  return mathFunctions.has(node.value.toLowerCase());
-}
 
-/**
- * @param {string} value
- * @param {Options} options
- * @return {string}
- */
-function transform(value, options) {
-  const parsed = valueParser(value);
-
-  walk(parsed, (node, index, parent) => {
-    if (node.type === 'function') {
-      if (rgbOrHslRegex.test(node.value)) {
-        const { value: originalValue } = node;
-
-        node.value = minifyColor(valueParser.stringify(node), options);
-        /** @type {string} */ (node.type) = 'word';
-
-        const next = parent.nodes[index + 1];
-
-        if (
-          node.value !== originalValue &&
-          next &&
-          (next.type === 'word' || next.type === 'function')
-        ) {
-          parent.nodes.splice(
-            index + 1,
-            0,
-            /** @type {valueParser.SpaceNode} */ ({
-              type: 'space',
-              value: ' ',
-            })
-          );
+  for (let i = 0; i < input.length; i++) {
+    const t = input[i];
+    if (t[0] === TokenType.Function) {
+      const name = asciiLowerCase(decoded(t));
+      const closeIndex = structure.endForOpening(i);
+      if (closeIndex === undefined) {
+        continue;
+      }
+      if (name === 'url' || mathFunctions.has(name)) {
+        i = closeIndex;
+        continue;
+      }
+      if (colorFunctionRegex.test(name)) {
+        const closeToken = input[closeIndex];
+        const raw = value.slice(tokenStart(t), tokenEnd(closeToken));
+        const inputForMinify =
+          name + '(' + value.slice(tokenEnd(t), tokenEnd(closeToken));
+        if (colord(inputForMinify).isValid()) {
+          const out = minifyColor(inputForMinify, options);
+          if (out !== raw) {
+            replacements.push({
+              start: tokenStart(t),
+              end: tokenEnd(closeToken),
+              text: out + separator(tokenEnd(closeToken), closeIndex),
+            });
+          }
+        }
+        i = closeIndex;
+        continue;
+      }
+    } else if (t[0] === TokenType.Ident) {
+      const dec = decoded(t);
+      if (!dec.startsWith('#') && colord(dec).isValid()) {
+        const out = minifyColor(dec, options);
+        if (out !== t[1] && out.length <= t[1].length) {
+          replacements.push({
+            start: tokenStart(t),
+            end: tokenEnd(t),
+            text: out + separator(tokenEnd(t), i),
+          });
+        }
+      }
+    } else if (t[0] === TokenType.Hash) {
+      const dec = decoded(t);
+      const hexCandidate = '#' + dec;
+      if (colord(hexCandidate).isValid()) {
+        const out = minifyColor(hexCandidate, options);
+        if (out !== t[1] && out.length <= t[1].length) {
+          replacements.push({
+            start: tokenStart(t),
+            end: tokenEnd(t),
+            text: out + separator(tokenEnd(t), i),
+          });
         }
-      } else if (isMathFunctionNode(node)) {
-        return false;
       }
-    } else if (node.type === 'word') {
-      node.value = minifyColor(node.value, options);
     }
-  });
+  }
 
-  return parsed.toString();
+  return applyEdits(value, replacements);
 }
 
 /**
@@ -94,9 +127,9 @@ function transform(value, options) {
  */
 function addPluginDefaults(options, browsers) {
   const defaults = {
-    // Does the browser support 4 & 8 character hex notation
-    transparent: new Set(browsers).isDisjointFrom(browsersWithTransparentBug),
     // Does the browser support "transparent" value properly
+    transparent: new Set(browsers).isDisjointFrom(browsersWithTransparentBug),
+    // Does the browser support 4 & 8 character hex notation
     alphaHex: isSupported('css-rrggbbaa', browsers),
     name: true,
   };
@@ -143,36 +176,50 @@ function pluginCreator(config = {}) {
          */
         OnceExit(css) {
           css.walkDecls((decl) => {
-            if (notMinifiableRegex.test(decl.prop)) {
+            if (!decl.prop) {
               return;
             }
 
-            if (
-              /** @type Options */ (config).transformCustomProperties ===
-                false &&
-              decl.prop.startsWith('--')
-            ) {
-              return;
+            const lowerProp = asciiLowerCase(decl.prop);
+            if (lowerProp.startsWith('--')) {
+              if (
+                /** @type Options */ (config).transformCustomProperties ===
+                false
+              ) {
+                return;
+              }
+            } else {
+              const unprefixed = lowerProp.replace(/^-\w+-/v, '');
+              if (
+                (!colorProperties.has(lowerProp) &&
+                  !colorProperties.has(unprefixed)) ||
+                lowerProp === '-webkit-tap-highlight-color'
+              ) {
+                return;
+              }
             }
 
-            const value = decl.value;
+            const rawValue =
+              decl.raws.value?.value === decl.value
+                ? (decl.raws.value.raw ?? decl.value)
+                : decl.value;
 
-            if (!value) {
+            if (!rawValue) {
               return;
             }
 
-            const cacheKey = JSON.stringify({ value, options, browsers });
-
-            if (cache.has(cacheKey)) {
-              decl.value = cache.get(cacheKey);
-
-              return;
+            let newValue;
+            if (cache.has(rawValue)) {
+              newValue = cache.get(rawValue);
+            } else {
+              newValue = transform(rawValue, options);
+              cache.set(rawValue, newValue);
             }
 
-            const newValue = transform(value, options);
-
             decl.value = newValue;
-            cache.set(cacheKey, newValue);
+            if (decl.raws.value?.raw) {
+              decl.raws.value = { raw: newValue, value: newValue };
+            }
           });
         },
       };

package/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":"AAMI,OAAQ,KAAA,YAAY,MAAM,cAAc,CAAA;AAoGzC,YAAkB,kBAAkB,GACpC;IAAqB,GAAG,AAAxB,CACA,EADW,OAAO,CAClB;IAAqB,QAAQ,AAA7B,CACA,EADW,OAAO,CAClB;IAAqB,GAAG,AAAxB,CACA,EADW,OAAO,CAClB;IAAqB,GAAG,AAAxB,CACA,EADW,OAAO,CAClB;IAAqB,IAAI,AAAzB,CACA,EADW,OAAO,CAClB;IAAqB,WAAW,AAAhC,CACA,EADW,OAAO,CAClB;;;;IAAqB,yBAAyB,AAA9C,CACF,EADa,OAAO,CACpB;CAAA,CAAA;AAGE,YAAwD,mBAAmB,GAAjE;IAAE,oBAAoB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAAE,CAAqB;AAC3E,YAAgE,mBAAmB,GAAzE,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC,CAAqB;AACnF,YAA0E,OAAO,GAAvE,kBAAkB,GAAG,mBAAmB,GAAG,mBAAmB,CAAS;AAdpF;;;;;;;;;GASG;AAEH;;;;GAIG;AAEH;;;GAGG;AACH,iBAAS,aAAa,CAAC,MAAM,GAHlB,OAGuB,GAFtB,OAAO,SAAS,EAAE,MAAM,CAwDnC;kBAtDQ,aAAa;iBAuDX,IAAI;;AAEf,QAAA,MAAM,aAAa,sBAAgB,CAAC;AAEpC,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,aAAa,IAAI,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":"AAmBI,OAAQ,KAAA,YAAY,MAAM,cAAc,CAAA;AAwHzC,YAAkB,kBAAkB,GACpC;IAAqB,GAAG,AAAxB,CACA,EADW,OAAO,CAClB;IAAqB,QAAQ,AAA7B,CACA,EADW,OAAO,CAClB;IAAqB,GAAG,AAAxB,CACA,EADW,OAAO,CAClB;IAAqB,GAAG,AAAxB,CACA,EADW,OAAO,CAClB;IAAqB,IAAI,AAAzB,CACA,EADW,OAAO,CAClB;IAAqB,WAAW,AAAhC,CACA,EADW,OAAO,CAClB;;;;IAAqB,yBAAyB,AAA9C,CACF,EADa,OAAO,CACpB;CAAA,CAAA;AAGE,YAAwD,mBAAmB,GAAjE;IAAE,oBAAoB,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;CAAE,CAAqB;AAC3E,YAAgE,mBAAmB,GAAzE,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC,CAAqB;AACnF,YAA0E,OAAO,GAAvE,kBAAkB,GAAG,mBAAmB,GAAG,mBAAmB,CAAS;AAdpF;;;;;;;;;GASG;AAEH;;;;GAIG;AAEH;;;GAGG;AACH,iBAAS,aAAa,CAAC,MAAM,GAHlB,OAGuB,GAFtB,OAAO,SAAS,EAAE,MAAM,CAsEnC;kBApEQ,aAAa;iBAqEX,IAAI;;AAEf,QAAA,MAAM,aAAa,sBAAgB,CAAC;AAEpC,OAAO,EAAE,aAAa,IAAI,OAAO,EAAE,aAAa,IAAI,gBAAgB,EAAE,CAAC"}