cssstyle 5.2.0 → 5.3.0

package/lib/parsers.js

@@ -1,31 +1,16 @@
-/**
- * These are commonly used parsers for CSS Values they take a string to parse
- * and return a string after it's been converted, if needed
- */
 "use strict";
 
 const {
   resolve: resolveColor,
-  utils: { cssCalc, isColor, resolveGradient, splitValue }
+  utils: { cssCalc, resolveGradient, splitValue }
 } = require("@asamuzakjp/css-color");
 const { next: syntaxes } = require("@csstools/css-syntax-patches-for-csstree");
 const csstree = require("css-tree");
 const { asciiLowercase } = require("./utils/strings");
 
-// CSS global values
+// CSS global keywords
 // @see https://drafts.csswg.org/css-cascade-5/#defaulting-keywords
-const GLOBAL_VALUE = Object.freeze(["initial", "inherit", "unset", "revert", "revert-layer"]);
-
-// Numeric data types
-const NUM_TYPE = Object.freeze({
-  UNDEFINED: 0,
-  VAR: 1,
-  NUMBER: 2,
-  PERCENT: 4,
-  LENGTH: 8,
-  ANGLE: 0x10,
-  CALC: 0x20
-});
+const GLOBAL_KEY = Object.freeze(["initial", "inherit", "unset", "revert", "revert-layer"]);
 
 // System colors
 // @see https://drafts.csswg.org/css-color/#css-system-colors
@@ -76,49 +61,19 @@ const SYS_COLOR = Object.freeze([
 ]);
 
 // Regular expressions
-const DIGIT = "(?:0|[1-9]\\d*)";
-const NUMBER = `[+-]?(?:${DIGIT}(?:\\.\\d*)?|\\.\\d+)(?:e-?${DIGIT})?`;
-const unitRegEx = new RegExp(`^(${NUMBER})([a-z]+|%)?$`, "i");
-const urlRegEx = /^url\(\s*((?:[^)]|\\\))*)\s*\)$/;
-const keywordRegEx = /^[a-z]+(?:-[a-z]+)*$/i;
-const stringRegEx = /^("[^"]*"|'[^']*')$/;
+const CALC_FUNC_NAMES =
+  "(?:a?(?:cos|sin|tan)|abs|atan2|calc|clamp|exp|hypot|log|max|min|mod|pow|rem|round|sign|sqrt)";
+const calcRegEx = new RegExp(`^${CALC_FUNC_NAMES}\\(`);
+const calcContainedRegEx = new RegExp(`(?<=[*/\\s(])${CALC_FUNC_NAMES}\\(`);
+const calcNameRegEx = new RegExp(`^${CALC_FUNC_NAMES}$`);
 const varRegEx = /^var\(/;
 const varContainedRegEx = /(?<=[*/\s(])var\(/;
-const calcRegEx =
-  /^(?:a?(?:cos|sin|tan)|abs|atan2|calc|clamp|exp|hypot|log|max|min|mod|pow|rem|round|sign|sqrt)\(/;
-const gradientRegEx = /^(?:repeating-)?(?:conic|linear|radial)-gradient\(/;
-const functionRegEx = /^([a-z][a-z\d]*(?:-[a-z\d]+)*)\(/i;
 
-const getNumericType = function getNumericType(val) {
-  if (varRegEx.test(val)) {
-    return NUM_TYPE.VAR;
-  }
-  if (calcRegEx.test(val)) {
-    return NUM_TYPE.CALC;
-  }
-  if (unitRegEx.test(val)) {
-    const [, , unit] = unitRegEx.exec(val);
-    if (!unit) {
-      return NUM_TYPE.NUMBER;
-    }
-    if (unit === "%") {
-      return NUM_TYPE.PERCENT;
-    }
-    if (/^(?:[cm]m|[dls]?v(?:[bhiw]|max|min)|in|p[ctx]|q|r?(?:[cl]h|cap|e[mx]|ic))$/i.test(unit)) {
-      return NUM_TYPE.LENGTH;
-    }
-    if (/^(?:deg|g?rad|turn)$/i.test(unit)) {
-      return NUM_TYPE.ANGLE;
-    }
-  }
-  return NUM_TYPE.UNDEFINED;
-};
-
-// Patch css-tree
+// Patched css-tree
 const cssTree = csstree.fork(syntaxes);
 
 // Prepare stringified value.
-exports.prepareValue = function prepareValue(value, globalObject = globalThis) {
+exports.prepareValue = (value, globalObject = globalThis) => {
   // `null` is converted to an empty string.
   // @see https://webidl.spec.whatwg.org/#LegacyNullToEmptyString
   if (value === null) {
@@ -137,416 +92,444 @@ exports.prepareValue = function prepareValue(value, globalObject = globalThis) {
     default: {
       const str = value.toString();
       if (typeof str === "string") {
-        return str;
+        return str.trim();
       }
       throw new globalObject.TypeError(`Can not convert ${type} to string.`);
     }
   }
 };
 
-exports.hasVarFunc = function hasVarFunc(val) {
+// Value is a global keyword.
+exports.isGlobalKeyword = (val) => {
+  return GLOBAL_KEY.includes(asciiLowercase(val));
+};
+
+// Value starts with and/or contains CSS var() function.
+exports.hasVarFunc = (val) => {
   return varRegEx.test(val) || varContainedRegEx.test(val);
 };
 
-exports.parseNumber = function parseNumber(val, restrictToPositive = false) {
-  if (val === "") {
-    return "";
+// Value starts with and/or contains CSS calc() related functions.
+exports.hasCalcFunc = (val) => {
+  return calcRegEx.test(val) || calcContainedRegEx.test(val);
+};
+
+// Splits value into an array.
+// @see https://github.com/asamuzaK/cssColor/blob/main/src/js/util.ts
+exports.splitValue = splitValue;
+
+// Parse CSS to AST.
+exports.parseCSS = (val, opt, toObject = false) => {
+  if (typeof val !== "string") {
+    val = exports.prepareValue(val);
   }
-  const type = getNumericType(val);
-  switch (type) {
-    case NUM_TYPE.VAR:
-      return val;
-    case NUM_TYPE.CALC:
-      return cssCalc(val, {
-        format: "specifiedValue"
-      });
-    case NUM_TYPE.NUMBER: {
-      const num = parseFloat(val);
-      if (restrictToPositive && num < 0) {
-        return;
-      }
-      return `${num}`;
-    }
-    default:
-      if (varContainedRegEx.test(val)) {
-        return val;
-      }
+  const ast = cssTree.parse(val, opt);
+  if (toObject) {
+    return cssTree.toPlainObject(ast);
   }
+  return ast;
 };
 
-exports.parseLength = function parseLength(val, restrictToPositive = false) {
+// Value is a valid property value.
+// Returns `false` for custom property and/or var().
+exports.isValidPropertyValue = (prop, val) => {
+  if (typeof val !== "string") {
+    val = exports.prepareValue(val);
+  }
   if (val === "") {
-    return "";
+    return true;
   }
-  const type = getNumericType(val);
-  switch (type) {
-    case NUM_TYPE.VAR:
-      return val;
-    case NUM_TYPE.CALC:
-      return cssCalc(val, {
-        format: "specifiedValue"
-      });
-    case NUM_TYPE.NUMBER:
-      if (parseFloat(val) === 0) {
-        return "0px";
-      }
-      return;
-    case NUM_TYPE.LENGTH: {
-      const [, numVal, unit] = unitRegEx.exec(val);
-      const num = parseFloat(numVal);
-      if (restrictToPositive && num < 0) {
-        return;
-      }
-      return `${num}${asciiLowercase(unit)}`;
+  // cssTree.lexer does not support deprecated system colors
+  // @see https://github.com/w3c/webref/issues/1519#issuecomment-3120290261
+  // @see https://github.com/w3c/webref/issues/1647
+  if (SYS_COLOR.includes(asciiLowercase(val))) {
+    if (/^(?:-webkit-)?(?:[a-z][a-z\d]*-)*color$/i.test(prop)) {
+      return true;
     }
-    default:
-      if (varContainedRegEx.test(val)) {
-        return val;
-      }
+    return false;
   }
+  let ast;
+  try {
+    ast = exports.parseCSS(val, {
+      context: "value"
+    });
+  } catch {
+    return false;
+  }
+  const { error, matched } = cssTree.lexer.matchProperty(prop, ast);
+  return error === null && matched !== null;
 };
 
-exports.parsePercent = function parsePercent(val, restrictToPositive = false) {
-  if (val === "") {
-    return "";
+// Simplify / resolve math functions.
+exports.resolveCalc = (val, opt = { format: "specifiedValue" }) => {
+  if (typeof val !== "string") {
+    val = exports.prepareValue(val);
   }
-  const type = getNumericType(val);
-  switch (type) {
-    case NUM_TYPE.VAR:
-      return val;
-    case NUM_TYPE.CALC:
-      return cssCalc(val, {
-        format: "specifiedValue"
-      });
-    case NUM_TYPE.NUMBER:
-      if (parseFloat(val) === 0) {
-        return "0%";
-      }
-      return;
-    case NUM_TYPE.PERCENT: {
-      const [, numVal, unit] = unitRegEx.exec(val);
-      const num = parseFloat(numVal);
-      if (restrictToPositive && num < 0) {
-        return;
+  if (val === "" || exports.hasVarFunc(val) || !exports.hasCalcFunc(val)) {
+    return val;
+  }
+  const obj = exports.parseCSS(val, { context: "value" }, true);
+  if (!obj?.children) {
+    return;
+  }
+  const { children: items } = obj;
+  const values = [];
+  for (const item of items) {
+    const { type: itemType, name: itemName, value: itemValue } = item;
+    if (itemType === "Function") {
+      const value = cssTree
+        .generate(item)
+        .replace(/\)(?!\)|\s|,)/g, ") ")
+        .trim();
+      if (calcNameRegEx.test(itemName)) {
+        const newValue = cssCalc(value, opt);
+        values.push(newValue);
+      } else {
+        values.push(value);
       }
-      return `${num}${asciiLowercase(unit)}`;
+    } else if (itemType === "String") {
+      values.push(`"${itemValue}"`);
+    } else {
+      values.push(itemName ?? itemValue);
     }
-    default:
-      if (varContainedRegEx.test(val)) {
-        return val;
-      }
   }
+  return values.join(" ");
 };
 
-// Either a length or a percent.
-exports.parseMeasurement = function parseMeasurement(val, restrictToPositive = false) {
-  if (val === "") {
-    return "";
-  }
-  const type = getNumericType(val);
-  switch (type) {
-    case NUM_TYPE.VAR:
-      return val;
-    case NUM_TYPE.CALC:
-      return cssCalc(val, {
-        format: "specifiedValue"
-      });
-    case NUM_TYPE.NUMBER:
-      if (parseFloat(val) === 0) {
-        return "0px";
-      }
+// Parse property value. Returns string or array of parsed object.
+exports.parsePropertyValue = (prop, val, opt = {}) => {
+  const { caseSensitive, globalObject, inArray } = opt;
+  val = exports.prepareValue(val, globalObject);
+  if (val === "" || exports.hasVarFunc(val)) {
+    return val;
+  } else if (exports.hasCalcFunc(val)) {
+    const calculatedValue = exports.resolveCalc(val, {
+      format: "specifiedValue"
+    });
+    if (typeof calculatedValue !== "string") {
       return;
-    case NUM_TYPE.LENGTH:
-    case NUM_TYPE.PERCENT: {
-      const [, numVal, unit] = unitRegEx.exec(val);
-      const num = parseFloat(numVal);
-      if (restrictToPositive && num < 0) {
-        return;
-      }
-      return `${num}${asciiLowercase(unit)}`;
     }
-    default:
-      if (varContainedRegEx.test(val)) {
-        return val;
+    val = calculatedValue;
+  }
+  const lowerCasedValue = asciiLowercase(val);
+  if (GLOBAL_KEY.includes(lowerCasedValue)) {
+    if (inArray) {
+      return [
+        {
+          type: "GlobalKeyword",
+          name: lowerCasedValue
+        }
+      ];
+    }
+    return lowerCasedValue;
+  } else if (SYS_COLOR.includes(lowerCasedValue)) {
+    if (/^(?:(?:-webkit-)?(?:[a-z][a-z\d]*-)*color|border)$/i.test(prop)) {
+      if (inArray) {
+        return [
+          {
+            type: "Identifier",
+            name: lowerCasedValue
+          }
+        ];
       }
+      return lowerCasedValue;
+    }
+    return;
   }
-};
-
-exports.parseAngle = function parseAngle(val, normalizeDeg = false) {
-  if (val === "") {
-    return "";
-  }
-  const type = getNumericType(val);
-  switch (type) {
-    case NUM_TYPE.VAR:
-      return val;
-    case NUM_TYPE.CALC:
-      return cssCalc(val, {
-        format: "specifiedValue"
-      });
-    case NUM_TYPE.NUMBER:
-      if (parseFloat(val) === 0) {
-        return "0deg";
-      }
+  try {
+    const ast = exports.parseCSS(val, {
+      context: "value"
+    });
+    const { error, matched } = cssTree.lexer.matchProperty(prop, ast);
+    if (error || !matched) {
       return;
-    case NUM_TYPE.ANGLE: {
-      let [, numVal, unit] = unitRegEx.exec(val);
-      numVal = parseFloat(numVal);
-      unit = asciiLowercase(unit);
-      if (unit === "deg") {
-        if (normalizeDeg && numVal < 0) {
-          while (numVal < 0) {
-            numVal += 360;
+    }
+    if (inArray) {
+      const obj = cssTree.toPlainObject(ast);
+      const items = obj.children;
+      const parsedValues = [];
+      for (const item of items) {
+        const { children, name, type, value, unit } = item;
+        switch (type) {
+          case "Dimension": {
+            parsedValues.push({
+              type,
+              value,
+              unit: asciiLowercase(unit)
+            });
+            break;
+          }
+          case "Function": {
+            const css = cssTree
+              .generate(item)
+              .replace(/\)(?!\)|\s|,)/g, ") ")
+              .trim();
+            const raw = items.length === 1 ? val : css;
+            const itemValue = raw
+              .replace(new RegExp(`^${name}\\(`), "")
+              .replace(/\)$/, "")
+              .trim();
+            if (name === "calc") {
+              if (children.length === 1) {
+                const [child] = children;
+                if (child.type === "Number") {
+                  parsedValues.push({
+                    type: "Calc",
+                    name: "calc",
+                    isNumber: true,
+                    value: `${parseFloat(child.value)}`,
+                    raw
+                  });
+                } else {
+                  parsedValues.push({
+                    type: "Calc",
+                    name: "calc",
+                    isNumber: false,
+                    value: `${asciiLowercase(itemValue)}`,
+                    raw
+                  });
+                }
+              } else {
+                parsedValues.push({
+                  type: "Calc",
+                  name: "calc",
+                  isNumber: false,
+                  value: asciiLowercase(itemValue),
+                  raw
+                });
+              }
+            } else {
+              parsedValues.push({
+                type,
+                name,
+                value: asciiLowercase(itemValue),
+                raw
+              });
+            }
+            break;
+          }
+          case "Identifier": {
+            if (caseSensitive) {
+              parsedValues.push(item);
+            } else {
+              parsedValues.push({
+                type,
+                name: asciiLowercase(name)
+              });
+            }
+            break;
+          }
+          default: {
+            parsedValues.push(item);
           }
         }
-        numVal %= 360;
       }
-      return `${numVal}${unit}`;
+      return parsedValues;
     }
-    default:
-      if (varContainedRegEx.test(val)) {
-        return val;
-      }
+  } catch {
+    return;
   }
+  return val;
 };
 
-exports.parseUrl = function parseUrl(val) {
-  if (val === "") {
-    return val;
-  }
-  const res = urlRegEx.exec(val);
-  if (!res) {
-    return;
-  }
-  let str = res[1];
-  // If it starts with single or double quotes, does it end with the same?
-  if ((str[0] === '"' || str[0] === "'") && str[0] !== str[str.length - 1]) {
+// Parse <number>.
+exports.parseNumber = (val, opt = {}) => {
+  const [item] = val;
+  const { type, value } = item ?? {};
+  if (type !== "Number") {
     return;
   }
-  if (str[0] === '"' || str[0] === "'") {
-    str = str.substr(1, str.length - 2);
-  }
-  let urlstr = "";
-  let escaped = false;
-  for (let i = 0; i < str.length; i++) {
-    switch (str[i]) {
-      case "\\":
-        if (escaped) {
-          urlstr += "\\\\";
-          escaped = false;
-        } else {
-          escaped = true;
-        }
-        break;
-      case "(":
-      case ")":
-      case " ":
-      case "\t":
-      case "\n":
-      case "'":
-        if (!escaped) {
-          return;
-        }
-        urlstr += str[i];
-        escaped = false;
-        break;
-      case '"':
-        if (!escaped) {
-          return;
-        }
-        urlstr += '\\"';
-        escaped = false;
-        break;
-      default:
-        urlstr += str[i];
-        escaped = false;
+  const { clamp } = opt;
+  const max = opt.max ?? Number.INFINITY;
+  const min = opt.min ?? Number.NEGATIVE_INFINITY;
+  let num = parseFloat(value);
+  if (clamp) {
+    if (num > max) {
+      num = max;
+    } else if (num < min) {
+      num = min;
     }
+  } else if (num > max || num < min) {
+    return;
   }
-  return `url("${urlstr}")`;
+  return `${num}`;
 };
 
-exports.parseString = function parseString(val) {
-  if (val === "") {
-    return "";
-  }
-  if (!stringRegEx.test(val)) {
+// Parse <length>.
+exports.parseLength = (val, opt = {}) => {
+  const [item] = val;
+  const { type, value, unit } = item ?? {};
+  if (type !== "Dimension" && !(type === "Number" && value === "0")) {
     return;
   }
-  val = val.substr(1, val.length - 2);
-  let str = "";
-  let escaped = false;
-  for (let i = 0; i < val.length; i++) {
-    switch (val[i]) {
-      case "\\":
-        if (escaped) {
-          str += "\\\\";
-          escaped = false;
-        } else {
-          escaped = true;
-        }
-        break;
-      case '"':
-        str += '\\"';
-        escaped = false;
-        break;
-      default:
-        str += val[i];
-        escaped = false;
+  const { clamp } = opt;
+  const max = opt.max ?? Number.INFINITY;
+  const min = opt.min ?? Number.NEGATIVE_INFINITY;
+  let num = parseFloat(value);
+  if (clamp) {
+    if (num > max) {
+      num = max;
+    } else if (num < min) {
+      num = min;
     }
+  } else if (num > max || num < min) {
+    return;
+  }
+  if (num === 0 && !unit) {
+    return `${num}px`;
+  } else if (unit) {
+    return `${num}${asciiLowercase(unit)}`;
   }
-  return `"${str}"`;
 };
 
-exports.parseKeyword = function parseKeyword(val, validKeywords = []) {
-  if (val === "") {
-    return "";
+// Parse <percentage>.
+exports.parsePercentage = (val, opt = {}) => {
+  const [item] = val;
+  const { type, value } = item ?? {};
+  if (type !== "Percentage" && !(type === "Number" && value === "0")) {
+    return;
   }
-  if (varRegEx.test(val)) {
-    return val;
+  const { clamp } = opt;
+  const max = opt.max ?? Number.INFINITY;
+  const min = opt.min ?? Number.NEGATIVE_INFINITY;
+  let num = parseFloat(value);
+  if (clamp) {
+    if (num > max) {
+      num = max;
+    } else if (num < min) {
+      num = min;
+    }
+  } else if (num > max || num < min) {
+    return;
   }
-  val = asciiLowercase(val);
-  if (validKeywords.includes(val) || GLOBAL_VALUE.includes(val)) {
-    return val;
+  if (num === 0) {
+    return `${num}%`;
   }
+  return `${num}%`;
 };
 
-exports.parseColor = function parseColor(val) {
-  if (val === "") {
-    return "";
-  }
-  if (varRegEx.test(val)) {
-    return val;
+// Parse <length-percentage>.
+exports.parseLengthPercentage = (val, opt = {}) => {
+  const [item] = val;
+  const { type, value, unit } = item ?? {};
+  if (type !== "Dimension" && type !== "Percentage" && !(type === "Number" && value === "0")) {
+    return;
   }
-  if (/^[a-z]+$/i.test(val)) {
-    const v = asciiLowercase(val);
-    if (SYS_COLOR.includes(v)) {
-      return v;
+  const { clamp } = opt;
+  const max = opt.max ?? Number.INFINITY;
+  const min = opt.min ?? Number.NEGATIVE_INFINITY;
+  let num = parseFloat(value);
+  if (clamp) {
+    if (num > max) {
+      num = max;
+    } else if (num < min) {
+      num = min;
     }
+  } else if (num > max || num < min) {
+    return;
   }
-  const res = resolveColor(val, {
-    format: "specifiedValue"
-  });
-  if (res) {
-    return res;
+  if (unit) {
+    if (/deg|g?rad|turn/i.test(unit)) {
+      return;
+    }
+    return `${num}${asciiLowercase(unit)}`;
+  } else if (type === "Percentage") {
+    return `${num}%`;
+  } else if (num === 0) {
+    return `${num}px`;
   }
-  return exports.parseKeyword(val);
 };
 
-exports.parseImage = function parseImage(val) {
-  if (val === "") {
-    return "";
-  }
-  if (gradientRegEx.test(val) && exports.hasVarFunc(val)) {
-    return val;
-  }
-  if (keywordRegEx.test(val)) {
-    return exports.parseKeyword(val, ["none"]);
+// Parse <angle>.
+exports.parseAngle = (val) => {
+  const [item] = val;
+  const { type, value, unit } = item ?? {};
+  if (type !== "Dimension" && !(type === "Number" && value === "0")) {
+    return;
   }
-  const res = resolveGradient(val, {
-    format: "specifiedValue"
-  });
-  if (res) {
-    return res;
+  const num = parseFloat(value);
+  if (unit) {
+    if (!/^(?:deg|g?rad|turn)$/i.test(unit)) {
+      return;
+    }
+    return `${num}${asciiLowercase(unit)}`;
+  } else if (num === 0) {
+    return `${num}deg`;
   }
-  return exports.parseUrl(val);
 };
 
-exports.parseFunction = function parseFunction(val) {
-  if (val === "") {
-    return {
-      name: null,
-      value: ""
-    };
-  }
-  if (functionRegEx.test(val) && val.endsWith(")")) {
-    if (varRegEx.test(val) || varContainedRegEx.test(val)) {
-      return {
-        name: "var",
-        value: val
-      };
-    }
-    const [, name] = functionRegEx.exec(val);
-    const value = val
-      .replace(new RegExp(`^${name}\\(`), "")
-      .replace(/\)$/, "")
-      .trim();
-    return {
-      name,
-      value
-    };
+// Parse <url>.
+exports.parseUrl = (val) => {
+  const [item] = val;
+  const { type, value } = item ?? {};
+  if (type !== "Url") {
+    return;
   }
+  const str = value.replace(/\\\\/g, "\\").replaceAll('"', '\\"');
+  return `url("${str}")`;
 };
 
-exports.parseShorthand = function parseShorthand(val, shorthandFor, preserve = false) {
-  const obj = {};
-  if (val === "" || exports.hasVarFunc(val)) {
-    for (const [property] of shorthandFor) {
-      obj[property] = "";
-    }
-    return obj;
-  }
-  const key = exports.parseKeyword(val);
-  if (key) {
-    if (key === "inherit") {
-      return obj;
-    }
+// Parse <string>.
+exports.parseString = (val) => {
+  const [item] = val;
+  const { type, value } = item ?? {};
+  if (type !== "String") {
     return;
   }
-  const parts = splitValue(val);
-  const shorthandArr = [...shorthandFor];
-  for (const part of parts) {
-    let partValid = false;
-    for (let i = 0; i < shorthandArr.length; i++) {
-      const [property, value] = shorthandArr[i];
-      if (value.isValid(part)) {
-        partValid = true;
-        obj[property] = value.parse(part);
-        if (!preserve) {
-          shorthandArr.splice(i, 1);
-          break;
-        }
+  const str = value.replace(/\\\\/g, "\\").replaceAll('"', '\\"');
+  return `"${str}"`;
+};
+
+// Parse <color>.
+exports.parseColor = (val) => {
+  const [item] = val;
+  const { name, type, value } = item ?? {};
+  switch (type) {
+    case "Function": {
+      const res = resolveColor(`${name}(${value})`, {
+        format: "specifiedValue"
+      });
+      if (res) {
+        return res;
       }
+      break;
     }
-    if (!partValid) {
-      return;
+    case "Hash": {
+      const res = resolveColor(`#${value}`, {
+        format: "specifiedValue"
+      });
+      if (res) {
+        return res;
+      }
+      break;
     }
+    case "Identifier": {
+      if (SYS_COLOR.includes(name)) {
+        return name;
+      }
+      const res = resolveColor(name, {
+        format: "specifiedValue"
+      });
+      if (res) {
+        return res;
+      }
+      break;
+    }
+    default:
   }
-  return obj;
-};
-
-exports.parseCSS = function parseCSS(val, opt, toObject = false) {
-  const ast = cssTree.parse(val, opt);
-  if (toObject) {
-    return cssTree.toPlainObject(ast);
-  }
-  return ast;
 };
 
-// Returns `false` for custom property and/or var().
-exports.isValidPropertyValue = function isValidPropertyValue(prop, val) {
-  // cssTree.lexer does not support deprecated system colors
-  // @see https://github.com/w3c/webref/issues/1519#issuecomment-3120290261
-  if (SYS_COLOR.includes(asciiLowercase(val))) {
-    if (/^(?:-webkit-)?(?:[a-z][a-z\d]*-)*color$/i.test(prop)) {
-      return true;
-    }
-    return false;
+// Parse <gradient>.
+exports.parseGradient = (val) => {
+  const [item] = val;
+  const { name, type, value } = item ?? {};
+  if (type !== "Function") {
+    return;
   }
-  const ast = exports.parseCSS(val, {
-    context: "value"
+  const res = resolveGradient(`${name}(${value})`, {
+    format: "specifiedValue"
   });
-  const { error, matched } = cssTree.lexer.matchProperty(prop, ast);
-  return error === null && matched !== null;
-};
-
-// Returns `false` for global values, e.g. "inherit".
-exports.isValidColor = function isValidColor(val) {
-  if (SYS_COLOR.includes(asciiLowercase(val))) {
-    return true;
+  if (res) {
+    return res;
   }
-  return isColor(val);
 };
-
-// Splits value into an array.
-// @see https://github.com/asamuzaK/cssColor/blob/main/src/js/util.ts
-exports.splitValue = splitValue;