Update parsers.js

Author: asamuzaK

lib/parsers.js

@@ -7,8 +7,14 @@ const {
 const { next: syntaxes } = require("@csstools/css-syntax-patches-for-csstree");
 const csstree = require("css-tree");
 const { getCache, setCache } = require("./utils/cache");
+const {
+  CALC_FUNC_NAMES,
+  DEFAULT_OPTS,
+  GLOBAL_KEY,
+  NODE_TYPES,
+  SYS_COLOR
+} = require("./utils/constants");
 const { asciiLowercase } = require("./utils/strings");
-const { CALC_FUNC_NAMES, GLOBAL_KEY, NODE_TYPES, SYS_COLOR } = require("./utils/constants");
 
 // Regular expressions
 const calcRegEx = new RegExp(`^${CALC_FUNC_NAMES}\\(`);
@@ -60,29 +66,23 @@ const prepareValue = (value, globalObject = globalThis) => {
  * @param {string} val - The value to check.
  * @returns {boolean} - True if the value is a global keyword, false otherwise.
  */
-const isGlobalKeyword = (val) => {
-  return GLOBAL_KEY.includes(asciiLowercase(val));
-};
+const isGlobalKeyword = (val) => GLOBAL_KEY.includes(asciiLowercase(val));
 
 /**
  * Check if the value starts with and/or contains CSS var() function.
  *
  * @param {string} val - The value to check.
  * @returns {boolean} - True if the value contains var(), false otherwise.
  */
-const hasVarFunc = (val) => {
-  return varRegEx.test(val) || varContainedRegEx.test(val);
-};
+const hasVarFunc = (val) => varRegEx.test(val) || varContainedRegEx.test(val);
 
 /**
  * Check if the value starts with and/or contains CSS calc() related functions.
  *
  * @param {string} val - The value to check.
  * @returns {boolean} - True if the value contains calc() related functions, false otherwise.
  */
-const hasCalcFunc = (val) => {
-  return calcRegEx.test(val) || calcContainedRegEx.test(val);
-};
+const hasCalcFunc = (val) => calcRegEx.test(val) || calcContainedRegEx.test(val);
 
 /**
  * Parse CSS to AST or plain object.
@@ -129,36 +129,28 @@ const isValidPropertyValue = (prop, val, globalObject) => {
     }
     return false;
   }
-
-  // Use cache for expensive parsing
   const cacheKey = `isValidPropertyValue_${prop}_${val}`;
   const cachedValue = getCache(cacheKey);
   if (typeof cachedValue === "boolean") {
     return cachedValue;
   }
-
-  let ast;
+  let result;
   try {
-    ast = parseCSS(val, {
+    const ast = parseCSS(val, {
       globalObject,
       options: {
         context: "value"
       }
     });
+    const { error, matched } = cssTree.lexer.matchProperty(prop, ast);
+    result = error === null && matched !== null;
   } catch {
-    setCache(cacheKey, false);
-    return false;
+    result = false;
   }
-  const { error, matched } = cssTree.lexer.matchProperty(prop, ast);
-  const result = error === null && matched !== null;
   setCache(cacheKey, result);
   return result;
 };
 
-const defaultOptions = {
-  format: "specifiedValue"
-};
-
 /**
  * Process numeric value.
  *
@@ -169,24 +161,20 @@ const defaultOptions = {
  */
 const processNumericValue = (item, allowedTypes, opt = {}) => {
   const { type, value } = item ?? {};
-
   // Allow "Number" with value "0" if "Dimension" or "Percentage" is allowed.
   const isZero = type === NODE_TYPES.NUMBER && parseFloat(value) === 0;
   const isValidType =
     allowedTypes.includes(type) ||
     (isZero &&
       (allowedTypes.includes(NODE_TYPES.DIMENSION) ||
         allowedTypes.includes(NODE_TYPES.PERCENTAGE)));
-
   if (!isValidType) {
     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;
@@ -196,7 +184,6 @@ const processNumericValue = (item, allowedTypes, opt = {}) => {
   } else if (num > max || num < min) {
     return;
   }
-
   return num;
 };
 
@@ -215,14 +202,11 @@ const resolveCalc = (val, opt = {}) => {
   if (val === "" || hasVarFunc(val) || !hasCalcFunc(val)) {
     return val;
   }
-
-  // Use cache for expensive calculation
   const cacheKey = `resolveCalc_${val}`;
   const cachedValue = getCache(cacheKey);
   if (typeof cachedValue === "string") {
     return cachedValue;
   }
-
   const obj = parseCSS(
     val,
     {
@@ -247,7 +231,7 @@ const resolveCalc = (val, opt = {}) => {
         .replace(/,(?!\s)/g, ", ")
         .trim();
       if (calcNameRegEx.test(itemName)) {
-        const newValue = cssCalc(value, options ?? defaultOptions);
+        const newValue = cssCalc(value, options ?? DEFAULT_OPTS);
         values.push(newValue);
       } else {
         values.push(value);
@@ -274,16 +258,13 @@ const resolveCalc = (val, opt = {}) => {
 const createCalcNode = (children, value, raw) => {
   let isNumber = false;
   let nodeValue = value;
-
-  // calc(number) の場合のみ特別扱いして数値としてパースする
   if (children.length === 1) {
     const [child] = children;
     if (child.type === NODE_TYPES.NUMBER) {
       isNumber = true;
       nodeValue = `${parseFloat(child.value)}`;
     }
   }
-
   return {
     type: "Calc",
     name: "calc",
@@ -375,62 +356,71 @@ const parsePropertyValue = (prop, val, opt = {}) => {
     }
     val = calculatedValue;
   }
+  const cacheKey = `parsePropertyValue_${prop}_${val}_${caseSensitive}`;
+  const cachedValue = getCache(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 (inArray) {
-      return [
+      parsedValue = [
         {
           type: "GlobalKeyword",
           name: lowerCasedValue
         }
       ];
+    } else {
+      parsedValue = lowerCasedValue;
     }
-    return lowerCasedValue;
   } else if (SYS_COLOR.includes(lowerCasedValue)) {
     if (/^(?:(?:-webkit-)?(?:[a-z][a-z\d]*-)*color|border)$/i.test(prop)) {
       if (inArray) {
-        return [
+        parsedValue = [
           {
             type: NODE_TYPES.IDENTIFIER,
             name: lowerCasedValue
           }
         ];
+      } else {
+        parsedValue = lowerCasedValue;
       }
-      return lowerCasedValue;
-    }
-    return;
-  }
-  try {
-    let cacheKey = "";
-    if (inArray) {
-      cacheKey = `parsePropertyValue_${prop}_${val}_${caseSensitive}`;
-      const cachedValues = getCache(cacheKey);
-      if (Array.isArray(cachedValues)) {
-        return cachedValues;
-      }
-    }
-    const ast = parseCSS(val, {
-      globalObject,
-      options: {
-        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 parsedValues = normalizeAstNodes(obj.children, val, caseSensitive);
-      if (cacheKey) {
-        setCache(cacheKey, parsedValues);
+  } else {
+    try {
+      const ast = parseCSS(val, {
+        globalObject,
+        options: {
+          context: "value"
+        }
+      });
+      const { error, matched } = cssTree.lexer.matchProperty(prop, ast);
+      if (error || !matched) {
+        parsedValue = false;
+      } else if (inArray) {
+        const obj = cssTree.toPlainObject(ast);
+        parsedValue = normalizeAstNodes(obj.children, val, caseSensitive);
+      } else {
+        parsedValue = val;
       }
-      return parsedValues;
+    } catch {
+      parsedValue = false;
     }
-  } catch {
+  }
+  setCache(cacheKey, parsedValue);
+  if (parsedValue === false) {
     return;
   }
-  return val;
+  return parsedValue;
 };
 
 /**
@@ -514,13 +504,12 @@ const parseLengthPercentage = (val, opt = {}) => {
  * Parse <angle>.
  *
  * @param {Array} val - The parsed AST children.
+ * @param {object} [opt={}] - The options for parsing.
  * @returns {string|undefined} - The parsed angle string, or undefined if parsing failed.
  */
-const parseAngle = (val) => {
+const parseAngle = (val, opt = {}) => {
   const [item] = val;
-  // NOTE: parseAngle signature in source doesn't accept opt, but implementation
-  // should ideally be consistent. For now, matching existing logic via helper without opts.
-  const num = processNumericValue(item, [NODE_TYPES.DIMENSION]);
+  const num = processNumericValue(item, [NODE_TYPES.DIMENSION], opt);
   if (typeof num !== "number") {
     return;
   }
@@ -571,10 +560,10 @@ const parseString = (val) => {
  * Parse <color>.
  *
  * @param {Array} val - The parsed AST children.
- * @param {object} [opt=defaultOptions] - The options for parsing.
+ * @param {object} [opt=DEFAULT_OPTS] - The options for parsing.
  * @returns {string|undefined} - The parsed color string, or undefined if parsing failed.
  */
-const parseColor = (val, opt = defaultOptions) => {
+const parseColor = (val, opt = DEFAULT_OPTS) => {
   const [item] = val;
   const { name, type, value } = item ?? {};
   switch (type) {
@@ -610,10 +599,10 @@ const parseColor = (val, opt = defaultOptions) => {
  * Parse <gradient>.
  *
  * @param {Array} val - The parsed AST children.
- * @param {object} [opt=defaultOptions] - The options for parsing.
+ * @param {object} [opt=DEFAULT_OPTS] - The options for parsing.
  * @returns {string|undefined} - The parsed gradient string, or undefined if parsing failed.
  */
-const parseGradient = (val, opt = defaultOptions) => {
+const parseGradient = (val, opt = DEFAULT_OPTS) => {
   const [item] = val;
   const { name, type, value } = item ?? {};
   if (type !== NODE_TYPES.FUNCTION) {

lib/utils/constants.js

@@ -7,6 +7,11 @@ exports.CALC_FUNC_NAMES =
 // Node.ELEMENT_NODE
 exports.ELEMENT_NODE = 1;
 
+// Default options
+exports.DEFAULT_OPTS = Object.freeze({
+  format: "specifiedValue"
+});
+
 // CSS global keywords
 // @see https://drafts.csswg.org/css-cascade-5/#defaulting-keywords
 exports.GLOBAL_KEY = Object.freeze(["initial", "inherit", "unset", "revert", "revert-layer"]);