cssstyle 5.3.5 → 5.3.7

package/lib/parsers.js

@@ -6,16 +6,17 @@ const {
 } = require("@asamuzakjp/css-color");
 const { next: syntaxes } = require("@csstools/css-syntax-patches-for-csstree");
 const csstree = require("css-tree");
+const { LRUCache } = require("lru-cache");
 const { asciiLowercase } = require("./utils/strings");
 
 // CSS global keywords
 // @see https://drafts.csswg.org/css-cascade-5/#defaulting-keywords
-const GLOBAL_KEY = Object.freeze(["initial", "inherit", "unset", "revert", "revert-layer"]);
+const GLOBAL_KEYS = new Set(["initial", "inherit", "unset", "revert", "revert-layer"]);
 
 // System colors
 // @see https://drafts.csswg.org/css-color/#css-system-colors
 // @see https://drafts.csswg.org/css-color/#deprecated-system-colors
-const SYS_COLOR = Object.freeze([
+const SYS_COLORS = new Set([
   "accentcolor",
   "accentcolortext",
   "activeborder",
@@ -60,6 +61,20 @@ const SYS_COLOR = Object.freeze([
   "windowtext"
 ]);
 
+// AST node types
+const AST_TYPES = Object.freeze({
+  CALC: "Calc",
+  DIMENSION: "Dimension",
+  FUNCTION: "Function",
+  GLOBAL_KEYWORD: "GlobalKeyword",
+  HASH: "Hash",
+  IDENTIFIER: "Identifier",
+  NUMBER: "Number",
+  PERCENTAGE: "Percentage",
+  STRING: "String",
+  URL: "Url"
+});
+
 // Regular expressions
 const CALC_FUNC_NAMES =
   "(?:a?(?:cos|sin|tan)|abs|atan2|calc|clamp|exp|hypot|log|max|min|mod|pow|rem|round|sign|sqrt)";
@@ -72,57 +87,66 @@ const varContainedRegEx = /(?<=[*/\s(])var\(/;
 // Patched css-tree
 const cssTree = csstree.fork(syntaxes);
 
-// Prepare stringified value.
-exports.prepareValue = (value, globalObject = globalThis) => {
+// Instance of the LRU Cache. Stores up to 4096 items.
+const lruCache = new LRUCache({
+  max: 4096
+});
+
+/**
+ * Prepares a stringified value.
+ *
+ * @param {string|number|null|undefined} value - The value to prepare.
+ * @returns {string} The prepared value.
+ */
+const prepareValue = (value) => {
   // `null` is converted to an empty string.
   // @see https://webidl.spec.whatwg.org/#LegacyNullToEmptyString
   if (value === null) {
     return "";
   }
-  const type = typeof value;
-  switch (type) {
-    case "string":
-      return value.trim();
-    case "number":
-      return value.toString();
-    case "undefined":
-      return "undefined";
-    case "symbol":
-      throw new globalObject.TypeError("Can not convert symbol to string.");
-    default: {
-      const str = value.toString();
-      if (typeof str === "string") {
-        return str.trim();
-      }
-      throw new globalObject.TypeError(`Can not convert ${type} to string.`);
-    }
-  }
+  return `${value}`.trim();
 };
 
-// Value is a global keyword.
-exports.isGlobalKeyword = (val) => {
-  return GLOBAL_KEY.includes(asciiLowercase(val));
+/**
+ * Checks if the value is a global keyword.
+ *
+ * @param {string} val - The value to check.
+ * @returns {boolean} True if the value is a global keyword, false otherwise.
+ */
+const isGlobalKeyword = (val) => {
+  return GLOBAL_KEYS.has(asciiLowercase(val));
 };
 
-// Value starts with and/or contains CSS var() function.
-exports.hasVarFunc = (val) => {
+/**
+ * Checks if the value starts with or contains a CSS var() function.
+ *
+ * @param {string} val - The value to check.
+ * @returns {boolean} True if the value contains a var() function, false otherwise.
+ */
+const hasVarFunc = (val) => {
   return varRegEx.test(val) || varContainedRegEx.test(val);
 };
 
-// Value starts with and/or contains CSS calc() related functions.
-exports.hasCalcFunc = (val) => {
+/**
+ * Checks if the value starts with or contains CSS calc() or math functions.
+ *
+ * @param {string} val - The value to check.
+ * @returns {boolean} True if the value contains calc() or math functions, false otherwise.
+ */
+const 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);
-  }
+/**
+ * Parses a CSS string into an AST.
+ *
+ * @param {string} val - The CSS string to parse.
+ * @param {object} opt - The options for parsing.
+ * @param {boolean} [toObject=false] - Whether to return a plain object.
+ * @returns {object} The AST or a plain object.
+ */
+const parseCSS = (val, opt, toObject = false) => {
+  val = prepareValue(val);
   const ast = cssTree.parse(val, opt);
   if (toObject) {
     return cssTree.toPlainObject(ast);
@@ -130,45 +154,65 @@ exports.parseCSS = (val, opt, toObject = false) => {
   return ast;
 };
 
-// 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);
-  }
+/**
+ * Checks if the value is a valid property value.
+ * Returns false for custom properties or values containing var().
+ *
+ * @param {string} prop - The property name.
+ * @param {string} val - The property value.
+ * @returns {boolean} True if the value is valid, false otherwise.
+ */
+const isValidPropertyValue = (prop, val) => {
+  val = prepareValue(val);
   if (val === "") {
     return true;
   }
   // 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 (SYS_COLORS.has(asciiLowercase(val))) {
     if (/^(?:-webkit-)?(?:[a-z][a-z\d]*-)*color$/i.test(prop)) {
       return true;
     }
     return false;
   }
-  let ast;
+  const cacheKey = `isValidPropertyValue_${prop}_${val}`;
+  const cachedValue = lruCache.get(cacheKey);
+  if (typeof cachedValue === "boolean") {
+    return cachedValue;
+  }
+  let result;
   try {
-    ast = exports.parseCSS(val, {
+    const ast = parseCSS(val, {
       context: "value"
     });
+    const { error, matched } = cssTree.lexer.matchProperty(prop, ast);
+    result = error === null && matched !== null;
   } catch {
-    return false;
+    result = false;
   }
-  const { error, matched } = cssTree.lexer.matchProperty(prop, ast);
-  return error === null && matched !== null;
+  lruCache.set(cacheKey, result);
+  return result;
 };
 
-// Simplify / resolve math functions.
-exports.resolveCalc = (val, opt = { format: "specifiedValue" }) => {
-  if (typeof val !== "string") {
-    val = exports.prepareValue(val);
-  }
-  if (val === "" || exports.hasVarFunc(val) || !exports.hasCalcFunc(val)) {
+/**
+ * Resolves CSS math functions.
+ *
+ * @param {string} val - The value to resolve.
+ * @param {object} [opt={ format: "specifiedValue" }] - The options for resolving.
+ * @returns {string|undefined} The resolved value.
+ */
+const resolveCalc = (val, opt = { format: "specifiedValue" }) => {
+  val = prepareValue(val);
+  if (val === "" || hasVarFunc(val) || !hasCalcFunc(val)) {
     return val;
   }
-  const obj = exports.parseCSS(val, { context: "value" }, true);
+  const cacheKey = `resolveCalc_${val}`;
+  const cachedValue = lruCache.get(cacheKey);
+  if (typeof cachedValue === "string") {
+    return cachedValue;
+  }
+  const obj = parseCSS(val, { context: "value" }, true);
   if (!obj?.children) {
     return;
   }
@@ -176,7 +220,7 @@ exports.resolveCalc = (val, opt = { format: "specifiedValue" }) => {
   const values = [];
   for (const item of items) {
     const { type: itemType, name: itemName, value: itemValue } = item;
-    if (itemType === "Function") {
+    if (itemType === AST_TYPES.FUNCTION) {
       const value = cssTree
         .generate(item)
         .replace(/\)(?!\)|\s|,)/g, ") ")
@@ -187,23 +231,33 @@ exports.resolveCalc = (val, opt = { format: "specifiedValue" }) => {
       } else {
         values.push(value);
       }
-    } else if (itemType === "String") {
+    } else if (itemType === AST_TYPES.STRING) {
       values.push(`"${itemValue}"`);
     } else {
       values.push(itemName ?? itemValue);
     }
   }
-  return values.join(" ");
+  const resolvedValue = values.join(" ");
+  lruCache.set(cacheKey, resolvedValue);
+  return resolvedValue;
 };
 
-// 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)) {
+/**
+ * Parses a property value.
+ * Returns a string or an array of parsed objects.
+ *
+ * @param {string} prop - The property name.
+ * @param {string} val - The property value.
+ * @param {object} [opt={}] - The options for parsing.
+ * @returns {string|Array<object>|undefined} The parsed value.
+ */
+const parsePropertyValue = (prop, val, opt = {}) => {
+  const { caseSensitive, inArray } = opt;
+  val = prepareValue(val);
+  if (val === "" || hasVarFunc(val)) {
     return val;
-  } else if (exports.hasCalcFunc(val)) {
-    const calculatedValue = exports.resolveCalc(val, {
+  } else if (hasCalcFunc(val)) {
+    const calculatedValue = resolveCalc(val, {
       format: "specifiedValue"
     });
     if (typeof calculatedValue !== "string") {
@@ -211,137 +265,164 @@ exports.parsePropertyValue = (prop, val, opt = {}) => {
     }
     val = calculatedValue;
   }
+  const cacheKey = `parsePropertyValue_${prop}_${val}_${caseSensitive}`;
+  const cachedValue = lruCache.get(cacheKey);
+  if (cachedValue === false) {
+    return;
+  } else if (inArray) {
+    if (Array.isArray(cachedValue)) {
+      return cachedValue;
+    }
+  } else if (typeof cachedValue === "string") {
+    return cachedValue;
+  }
+  let parsedValue;
   const lowerCasedValue = asciiLowercase(val);
-  if (GLOBAL_KEY.includes(lowerCasedValue)) {
+  if (GLOBAL_KEYS.has(lowerCasedValue)) {
     if (inArray) {
-      return [
+      parsedValue = [
         {
-          type: "GlobalKeyword",
+          type: AST_TYPES.GLOBAL_KEYWORD,
           name: lowerCasedValue
         }
       ];
+    } else {
+      parsedValue = lowerCasedValue;
     }
-    return lowerCasedValue;
-  } else if (SYS_COLOR.includes(lowerCasedValue)) {
+  } else if (SYS_COLORS.has(lowerCasedValue)) {
     if (/^(?:(?:-webkit-)?(?:[a-z][a-z\d]*-)*color|border)$/i.test(prop)) {
       if (inArray) {
-        return [
+        parsedValue = [
           {
-            type: "Identifier",
+            type: AST_TYPES.IDENTIFIER,
             name: lowerCasedValue
           }
         ];
+      } else {
+        parsedValue = lowerCasedValue;
       }
-      return lowerCasedValue;
-    }
-    return;
-  }
-  try {
-    const ast = exports.parseCSS(val, {
-      context: "value"
-    });
-    const { error, matched } = cssTree.lexer.matchProperty(prop, ast);
-    if (error || !matched) {
-      return;
+    } else {
+      parsedValue = false;
     }
-    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 {
+    try {
+      const ast = parseCSS(val, {
+        context: "value"
+      });
+      const { error, matched } = cssTree.lexer.matchProperty(prop, ast);
+      if (error || !matched) {
+        parsedValue = false;
+      } else if (inArray) {
+        const obj = cssTree.toPlainObject(ast);
+        const items = obj.children;
+        const values = [];
+        for (const item of items) {
+          const { children, name, type, value, unit } = item;
+          switch (type) {
+            case AST_TYPES.DIMENSION: {
+              values.push({
+                type,
+                value,
+                unit: asciiLowercase(unit)
+              });
+              break;
+            }
+            case AST_TYPES.FUNCTION: {
+              const css = cssTree
+                .generate(item)
+                .replace(/\)(?!\)|\s|,)/g, ") ")
+                .trim();
+              const raw = items.length === 1 ? val : css;
+              // Remove "${name}(" from the start and ")" from the end
+              const itemValue = raw.slice(name.length + 1, -1).trim();
+              if (name === "calc") {
+                if (children.length === 1) {
+                  const [child] = children;
+                  if (child.type === AST_TYPES.NUMBER) {
+                    values.push({
+                      type: AST_TYPES.CALC,
+                      isNumber: true,
+                      value: `${parseFloat(child.value)}`,
+                      name,
+                      raw
+                    });
+                  } else {
+                    values.push({
+                      type: AST_TYPES.CALC,
+                      isNumber: false,
+                      value: `${asciiLowercase(itemValue)}`,
+                      name,
+                      raw
+                    });
+                  }
                 } else {
-                  parsedValues.push({
-                    type: "Calc",
-                    name: "calc",
+                  values.push({
+                    type: AST_TYPES.CALC,
                     isNumber: false,
-                    value: `${asciiLowercase(itemValue)}`,
+                    value: asciiLowercase(itemValue),
+                    name,
                     raw
                   });
                 }
               } else {
-                parsedValues.push({
-                  type: "Calc",
-                  name: "calc",
-                  isNumber: false,
+                values.push({
+                  type,
+                  name,
                   value: asciiLowercase(itemValue),
                   raw
                 });
               }
-            } else {
-              parsedValues.push({
-                type,
-                name,
-                value: asciiLowercase(itemValue),
-                raw
-              });
+              break;
             }
-            break;
-          }
-          case "Identifier": {
-            if (caseSensitive) {
-              parsedValues.push(item);
-            } else {
-              parsedValues.push({
-                type,
-                name: asciiLowercase(name)
-              });
+            case AST_TYPES.IDENTIFIER: {
+              if (caseSensitive) {
+                values.push(item);
+              } else {
+                values.push({
+                  type,
+                  name: asciiLowercase(name)
+                });
+              }
+              break;
+            }
+            default: {
+              values.push(item);
             }
-            break;
-          }
-          default: {
-            parsedValues.push(item);
           }
         }
+        parsedValue = values;
+      } else {
+        parsedValue = val;
       }
-      return parsedValues;
+    } catch {
+      parsedValue = false;
     }
-  } catch {
+  }
+  lruCache.set(cacheKey, parsedValue);
+  if (parsedValue === false) {
     return;
   }
-  return val;
+  return parsedValue;
 };
 
-// Parse <number>.
-exports.parseNumber = (val, opt = {}) => {
+/**
+ * Parses a numeric value (number, dimension, percentage).
+ * Helper function for parseNumber, parseLength, etc.
+ *
+ * @param {Array<object>} val - The AST value.
+ * @param {object} [opt={}] - The options for parsing.
+ * @param {Function} validateType - Function to validate the node type.
+ * @returns {object|undefined} The parsed result containing num and unit, or undefined.
+ */
+const parseNumericValue = (val, opt, validateType) => {
   const [item] = val;
-  const { type, value } = item ?? {};
-  if (type !== "Number") {
+  const { type, value, unit } = item ?? {};
+  if (!validateType(type, value, unit)) {
     return;
   }
-  const { clamp } = opt;
-  const max = opt.max ?? Number.INFINITY;
-  const min = opt.min ?? Number.NEGATIVE_INFINITY;
+  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) {
@@ -352,140 +433,142 @@ exports.parseNumber = (val, opt = {}) => {
   } else if (num > max || num < min) {
     return;
   }
-  return `${num}`;
+  return {
+    num,
+    unit: unit ? asciiLowercase(unit) : null,
+    type
+  };
 };
 
-// Parse <length>.
-exports.parseLength = (val, opt = {}) => {
-  const [item] = val;
-  const { type, value, unit } = item ?? {};
-  if (type !== "Dimension" && !(type === "Number" && value === "0")) {
+/**
+ * Parses a <number> value.
+ *
+ * @param {Array<object>} val - The AST value.
+ * @param {object} [opt={}] - The options for parsing.
+ * @returns {string|undefined} The parsed number.
+ */
+const parseNumber = (val, opt = {}) => {
+  const res = parseNumericValue(val, opt, (type) => type === AST_TYPES.NUMBER);
+  if (!res) {
     return;
   }
-  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 `${res.num}`;
+};
+
+/**
+ * Parses a <length> value.
+ *
+ * @param {Array<object>} val - The AST value.
+ * @param {object} [opt={}] - The options for parsing.
+ * @returns {string|undefined} The parsed length.
+ */
+const parseLength = (val, opt = {}) => {
+  const res = parseNumericValue(
+    val,
+    opt,
+    (type, value) => type === AST_TYPES.DIMENSION || (type === AST_TYPES.NUMBER && value === "0")
+  );
+  if (!res) {
     return;
   }
+  const { num, unit } = res;
   if (num === 0 && !unit) {
     return `${num}px`;
   } else if (unit) {
-    return `${num}${asciiLowercase(unit)}`;
+    return `${num}${unit}`;
   }
 };
 
-// Parse <percentage>.
-exports.parsePercentage = (val, opt = {}) => {
-  const [item] = val;
-  const { type, value } = item ?? {};
-  if (type !== "Percentage" && !(type === "Number" && value === "0")) {
+/**
+ * Parses a <percentage> value.
+ *
+ * @param {Array<object>} val - The AST value.
+ * @param {object} [opt={}] - The options for parsing.
+ * @returns {string|undefined} The parsed percentage.
+ */
+const parsePercentage = (val, opt = {}) => {
+  const res = parseNumericValue(
+    val,
+    opt,
+    (type, value) => type === AST_TYPES.PERCENTAGE || (type === AST_TYPES.NUMBER && value === "0")
+  );
+  if (!res) {
     return;
   }
-  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) {
-    return `${num}%`;
-  }
+  const { num } = res;
   return `${num}%`;
 };
 
-// Parse <length-percentage>.
-exports.parseLengthPercentage = (val, opt = {}) => {
-  const [item] = val;
-  const { type, value, unit } = item ?? {};
-  if (type !== "Dimension" && type !== "Percentage" && !(type === "Number" && value === "0")) {
+/**
+ * Parses an <angle> value.
+ *
+ * @param {Array<object>} val - The AST value.
+ * @param {object} [opt={}] - The options for parsing.
+ * @returns {string|undefined} The parsed angle.
+ */
+const parseAngle = (val, opt = {}) => {
+  const res = parseNumericValue(
+    val,
+    opt,
+    (type, value) => type === AST_TYPES.DIMENSION || (type === AST_TYPES.NUMBER && value === "0")
+  );
+  if (!res) {
     return;
   }
-  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 (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`;
-  }
-};
-
-// Parse <angle>.
-exports.parseAngle = (val) => {
-  const [item] = val;
-  const { type, value, unit } = item ?? {};
-  if (type !== "Dimension" && !(type === "Number" && value === "0")) {
-    return;
-  }
-  const num = parseFloat(value);
+  const { num, unit } = res;
   if (unit) {
     if (!/^(?:deg|g?rad|turn)$/i.test(unit)) {
       return;
     }
-    return `${num}${asciiLowercase(unit)}`;
+    return `${num}${unit}`;
   } else if (num === 0) {
     return `${num}deg`;
   }
 };
 
-// Parse <url>.
-exports.parseUrl = (val) => {
+/**
+ * Parses a <url> value.
+ *
+ * @param {Array<object>} val - The AST value.
+ * @returns {string|undefined} The parsed url.
+ */
+const parseUrl = (val) => {
   const [item] = val;
   const { type, value } = item ?? {};
-  if (type !== "Url") {
+  if (type !== AST_TYPES.URL) {
     return;
   }
   const str = value.replace(/\\\\/g, "\\").replaceAll('"', '\\"');
   return `url("${str}")`;
 };
 
-// Parse <string>.
-exports.parseString = (val) => {
+/**
+ * Parses a <string> value.
+ *
+ * @param {Array<object>} val - The AST value.
+ * @returns {string|undefined} The parsed string.
+ */
+const parseString = (val) => {
   const [item] = val;
   const { type, value } = item ?? {};
-  if (type !== "String") {
+  if (type !== AST_TYPES.STRING) {
     return;
   }
   const str = value.replace(/\\\\/g, "\\").replaceAll('"', '\\"');
   return `"${str}"`;
 };
 
-// Parse <color>.
-exports.parseColor = (val) => {
+/**
+ * Parses a <color> value.
+ *
+ * @param {Array<object>} val - The AST value.
+ * @returns {string|undefined} The parsed color.
+ */
+const parseColor = (val) => {
   const [item] = val;
   const { name, type, value } = item ?? {};
   switch (type) {
-    case "Function": {
+    case AST_TYPES.FUNCTION: {
       const res = resolveColor(`${name}(${value})`, {
         format: "specifiedValue"
       });
@@ -494,7 +577,7 @@ exports.parseColor = (val) => {
       }
       break;
     }
-    case "Hash": {
+    case AST_TYPES.HASH: {
       const res = resolveColor(`#${value}`, {
         format: "specifiedValue"
       });
@@ -503,8 +586,8 @@ exports.parseColor = (val) => {
       }
       break;
     }
-    case "Identifier": {
-      if (SYS_COLOR.includes(name)) {
+    case AST_TYPES.IDENTIFIER: {
+      if (SYS_COLORS.has(name)) {
         return name;
       }
       const res = resolveColor(name, {
@@ -519,11 +602,16 @@ exports.parseColor = (val) => {
   }
 };
 
-// Parse <gradient>.
-exports.parseGradient = (val) => {
+/**
+ * Parses a <gradient> value.
+ *
+ * @param {Array<object>} val - The AST value.
+ * @returns {string|undefined} The parsed gradient.
+ */
+const parseGradient = (val) => {
   const [item] = val;
   const { name, type, value } = item ?? {};
-  if (type !== "Function") {
+  if (type !== AST_TYPES.FUNCTION) {
     return;
   }
   const res = resolveGradient(`${name}(${value})`, {
@@ -533,3 +621,251 @@ exports.parseGradient = (val) => {
     return res;
   }
 };
+
+/**
+ * Resolves a keyword value.
+ *
+ * @param {Array<object>} value - The AST node array containing the keyword value.
+ * @param {object} [opt={}] - The options for parsing.
+ * @returns {string|undefined} The resolved keyword or undefined.
+ */
+const resolveKeywordValue = (value, opt = {}) => {
+  const [{ name, type }] = value;
+  const { length } = opt;
+  switch (type) {
+    case AST_TYPES.GLOBAL_KEYWORD: {
+      if (length > 1) {
+        return;
+      }
+      return name;
+    }
+    case AST_TYPES.IDENTIFIER: {
+      return name;
+    }
+    default:
+  }
+};
+
+/**
+ * Resolves a function value.
+ *
+ * @param {Array<object>} value - The AST node array containing the function value.
+ * @param {object} [opt={}] - The options for parsing.
+ * @returns {string|undefined} The resolved function or undefined.
+ */
+const resolveFunctionValue = (value, opt = {}) => {
+  const [{ name, type, value: itemValue }] = value;
+  const { length } = opt;
+  switch (type) {
+    case AST_TYPES.FUNCTION: {
+      return `${name}(${itemValue})`;
+    }
+    case AST_TYPES.GLOBAL_KEYWORD: {
+      if (length > 1) {
+        return;
+      }
+      return name;
+    }
+    case AST_TYPES.IDENTIFIER: {
+      return name;
+    }
+    default:
+  }
+};
+
+/**
+ * Resolves a length or percentage or number value.
+ *
+ * @param {Array<object>} value - The AST node array containing the value.
+ * @param {object} [opt={}] - The options for parsing.
+ * @returns {string|undefined} The resolved length/percentage/number or undefined.
+ */
+const resolveNumericValue = (value, opt = {}) => {
+  const [{ name, type: itemType, value: itemValue }] = value;
+  const { length, type } = opt;
+  switch (itemType) {
+    case AST_TYPES.CALC: {
+      return `${name}(${itemValue})`;
+    }
+    case AST_TYPES.DIMENSION: {
+      if (type === "angle") {
+        return parseAngle(value, opt);
+      }
+      return parseLength(value, opt);
+    }
+    case AST_TYPES.GLOBAL_KEYWORD: {
+      if (length > 1) {
+        return;
+      }
+      return name;
+    }
+    case AST_TYPES.IDENTIFIER: {
+      return name;
+    }
+    case AST_TYPES.NUMBER: {
+      switch (type) {
+        case "angle": {
+          return parseAngle(value, opt);
+        }
+        case "length": {
+          return parseLength(value, opt);
+        }
+        case "percentage": {
+          return parsePercentage(value, opt);
+        }
+        default: {
+          return parseNumber(value, opt);
+        }
+      }
+    }
+    case AST_TYPES.PERCENTAGE: {
+      return parsePercentage(value, opt);
+    }
+    default:
+  }
+};
+
+/**
+ * Resolves a color value.
+ *
+ * @param {Array<object>} value - The AST node array containing the color value.
+ * @param {object} [opt={}] - The options for parsing.
+ * @returns {string|undefined} The resolved color or undefined.
+ */
+const resolveColorValue = (value, opt = {}) => {
+  const [{ name, type }] = value;
+  const { length } = opt;
+  switch (type) {
+    case AST_TYPES.GLOBAL_KEYWORD: {
+      if (length > 1) {
+        return;
+      }
+      return name;
+    }
+    default: {
+      return parseColor(value, opt);
+    }
+  }
+};
+
+/**
+ * Resolves a gradient or URL value.
+ *
+ * @param {Array<object>} value - The AST node array containing the color value.
+ * @param {object} [opt={}] - The options for parsing.
+ * @returns {string|undefined} The resolved gradient/url or undefined.
+ */
+const resolveGradientUrlValue = (value, opt = {}) => {
+  const [{ name, type }] = value;
+  const { length } = opt;
+  switch (type) {
+    case AST_TYPES.GLOBAL_KEYWORD: {
+      if (length > 1) {
+        return;
+      }
+      return name;
+    }
+    case AST_TYPES.IDENTIFIER: {
+      return name;
+    }
+    case AST_TYPES.URL: {
+      return parseUrl(value, opt);
+    }
+    default: {
+      return parseGradient(value, opt);
+    }
+  }
+};
+
+/**
+ * Resolves a border shorthand value.
+ *
+ * @param {Array<object>} value - The AST node array containing the shorthand value.
+ * @param {object} subProps - The sub properties object.
+ * @param {Map} parsedValues - The Map of parsed values.
+ * @returns {Array|string|undefined} - The resolved [prop, value] pair, keyword or undefined.
+ */
+const resolveBorderShorthandValue = (value, subProps, parsedValues) => {
+  const [{ isNumber, name, type, value: itemValue }] = value;
+  const { color: colorProp, style: styleProp, width: widthProp } = subProps;
+  switch (type) {
+    case AST_TYPES.CALC: {
+      if (isNumber || parsedValues.has(widthProp)) {
+        return;
+      }
+      return [widthProp, `${name}(${itemValue}`];
+    }
+    case AST_TYPES.DIMENSION:
+    case AST_TYPES.NUMBER: {
+      if (parsedValues.has(widthProp)) {
+        return;
+      }
+      const parsedValue = parseLength(value, { min: 0 });
+      if (!parsedValue) {
+        return;
+      }
+      return [widthProp, parsedValue];
+    }
+    case AST_TYPES.FUNCTION:
+    case AST_TYPES.HASH: {
+      if (parsedValues.has(colorProp)) {
+        return;
+      }
+      const parsedValue = parseColor(value);
+      if (!parsedValue) {
+        return;
+      }
+      return [colorProp, parsedValue];
+    }
+    case AST_TYPES.GLOBAL_KEYWORD: {
+      return name;
+    }
+    case AST_TYPES.IDENTIFIER: {
+      if (isValidPropertyValue(widthProp, name)) {
+        if (parsedValues.has(widthProp)) {
+          return;
+        }
+        return [widthProp, name];
+      } else if (isValidPropertyValue(styleProp, name)) {
+        if (parsedValues.has(styleProp)) {
+          return;
+        }
+        return [styleProp, name];
+      } else if (isValidPropertyValue(colorProp, name)) {
+        if (parsedValues.has(colorProp)) {
+          return;
+        }
+        return [colorProp, name];
+      }
+      break;
+    }
+    default:
+  }
+};
+
+module.exports = {
+  AST_TYPES,
+  hasCalcFunc,
+  hasVarFunc,
+  isGlobalKeyword,
+  isValidPropertyValue,
+  parseAngle,
+  parseCSS,
+  parseColor,
+  parseGradient,
+  parseLength,
+  parseNumber,
+  parsePercentage,
+  parsePropertyValue,
+  parseString,
+  parseUrl,
+  prepareValue,
+  resolveBorderShorthandValue,
+  resolveCalc,
+  resolveColorValue,
+  resolveFunctionValue,
+  resolveGradientUrlValue,
+  resolveKeywordValue,
+  resolveNumericValue,
+  splitValue
+};