cssstyle 5.3.7 → 6.0.0

package/lib/parsers.js

@@ -7,8 +7,12 @@ const {
 const { next: syntaxes } = require("@csstools/css-syntax-patches-for-csstree");
 const csstree = require("css-tree");
 const { LRUCache } = require("lru-cache");
+const propertyDefinitions = require("./generated/propertyDefinitions");
 const { asciiLowercase } = require("./utils/strings");
 
+// Constants
+const CALC_FUNC_NAMES = "(?:a?(?:cos|sin|tan)|abs|atan2|calc|clamp|exp|hypot|log|max|min|mod|pow|rem|round|sign|sqrt)";
+
 // CSS global keywords
 // @see https://drafts.csswg.org/css-cascade-5/#defaulting-keywords
 const GLOBAL_KEYS = new Set(["initial", "inherit", "unset", "revert", "revert-layer"]);
@@ -76,8 +80,6 @@ const AST_TYPES = Object.freeze({
 });
 
 // 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)";
 const calcRegEx = new RegExp(`^${CALC_FUNC_NAMES}\\(`);
 const calcContainedRegEx = new RegExp(`(?<=[*/\\s(])${CALC_FUNC_NAMES}\\(`);
 const calcNameRegEx = new RegExp(`^${CALC_FUNC_NAMES}$`);
@@ -98,14 +100,14 @@ const lruCache = new LRUCache({
  * @param {string|number|null|undefined} value - The value to prepare.
  * @returns {string} The prepared value.
  */
-const prepareValue = (value) => {
+function prepareValue(value) {
   // `null` is converted to an empty string.
   // @see https://webidl.spec.whatwg.org/#LegacyNullToEmptyString
   if (value === null) {
     return "";
   }
   return `${value}`.trim();
-};
+}
 
 /**
  * Checks if the value is a global keyword.
@@ -113,9 +115,9 @@ const prepareValue = (value) => {
  * @param {string} val - The value to check.
  * @returns {boolean} True if the value is a global keyword, false otherwise.
  */
-const isGlobalKeyword = (val) => {
+function isGlobalKeyword(val) {
   return GLOBAL_KEYS.has(asciiLowercase(val));
-};
+}
 
 /**
  * Checks if the value starts with or contains a CSS var() function.
@@ -123,9 +125,9 @@ const isGlobalKeyword = (val) => {
  * @param {string} val - The value to check.
  * @returns {boolean} True if the value contains a var() function, false otherwise.
  */
-const hasVarFunc = (val) => {
+function hasVarFunc(val) {
   return varRegEx.test(val) || varContainedRegEx.test(val);
-};
+}
 
 /**
  * Checks if the value starts with or contains CSS calc() or math functions.
@@ -133,26 +135,20 @@ const hasVarFunc = (val) => {
  * @param {string} val - The value to check.
  * @returns {boolean} True if the value contains calc() or math functions, false otherwise.
  */
-const hasCalcFunc = (val) => {
+function hasCalcFunc(val) {
   return calcRegEx.test(val) || calcContainedRegEx.test(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.
+ * @returns {object} The AST.
  */
-const parseCSS = (val, opt, toObject = false) => {
-  val = prepareValue(val);
-  const ast = cssTree.parse(val, opt);
-  if (toObject) {
-    return cssTree.toPlainObject(ast);
-  }
-  return ast;
-};
+function parseCSS(val, opt) {
+  return cssTree.parse(prepareValue(val), opt);
+}
 
 /**
  * Checks if the value is a valid property value.
@@ -162,20 +158,14 @@ const parseCSS = (val, opt, toObject = false) => {
  * @param {string} val - The property value.
  * @returns {boolean} True if the value is valid, false otherwise.
  */
-const isValidPropertyValue = (prop, val) => {
+function isValidPropertyValue(prop, val) {
+  if (!propertyDefinitions.has(prop)) {
+    return false;
+  }
   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_COLORS.has(asciiLowercase(val))) {
-    if (/^(?:-webkit-)?(?:[a-z][a-z\d]*-)*color$/i.test(prop)) {
-      return true;
-    }
-    return false;
-  }
   const cacheKey = `isValidPropertyValue_${prop}_${val}`;
   const cachedValue = lruCache.get(cacheKey);
   if (typeof cachedValue === "boolean") {
@@ -193,7 +183,7 @@ const isValidPropertyValue = (prop, val) => {
   }
   lruCache.set(cacheKey, result);
   return result;
-};
+}
 
 /**
  * Resolves CSS math functions.
@@ -202,7 +192,7 @@ const isValidPropertyValue = (prop, val) => {
  * @param {object} [opt={ format: "specifiedValue" }] - The options for resolving.
  * @returns {string|undefined} The resolved value.
  */
-const resolveCalc = (val, opt = { format: "specifiedValue" }) => {
+function resolveCalc(val, opt = { format: "specifiedValue" }) {
   val = prepareValue(val);
   if (val === "" || hasVarFunc(val) || !hasCalcFunc(val)) {
     return val;
@@ -212,13 +202,12 @@ const resolveCalc = (val, opt = { format: "specifiedValue" }) => {
   if (typeof cachedValue === "string") {
     return cachedValue;
   }
-  const obj = parseCSS(val, { context: "value" }, true);
-  if (!obj?.children) {
+  const ast = parseCSS(val, { context: "value" });
+  if (!ast?.children) {
     return;
   }
-  const { children: items } = obj;
   const values = [];
-  for (const item of items) {
+  for (const item of ast.children) {
     const { type: itemType, name: itemName, value: itemValue } = item;
     if (itemType === AST_TYPES.FUNCTION) {
       const value = cssTree
@@ -240,7 +229,7 @@ const resolveCalc = (val, opt = { format: "specifiedValue" }) => {
   const resolvedValue = values.join(" ");
   lruCache.set(cacheKey, resolvedValue);
   return resolvedValue;
-};
+}
 
 /**
  * Parses a property value.
@@ -251,8 +240,11 @@ const resolveCalc = (val, opt = { format: "specifiedValue" }) => {
  * @param {object} [opt={}] - The options for parsing.
  * @returns {string|Array<object>|undefined} The parsed value.
  */
-const parsePropertyValue = (prop, val, opt = {}) => {
-  const { caseSensitive, inArray } = opt;
+function parsePropertyValue(prop, val, opt = {}) {
+  if (!propertyDefinitions.has(prop)) {
+    return;
+  }
+  const { caseSensitive } = opt;
   val = prepareValue(val);
   if (val === "" || hasVarFunc(val)) {
     return val;
@@ -269,41 +261,18 @@ const parsePropertyValue = (prop, val, opt = {}) => {
   const cachedValue = lruCache.get(cacheKey);
   if (cachedValue === false) {
     return;
-  } else if (inArray) {
-    if (Array.isArray(cachedValue)) {
-      return cachedValue;
-    }
-  } else if (typeof cachedValue === "string") {
+  } else if (cachedValue !== undefined) {
     return cachedValue;
   }
   let parsedValue;
   const lowerCasedValue = asciiLowercase(val);
   if (GLOBAL_KEYS.has(lowerCasedValue)) {
-    if (inArray) {
-      parsedValue = [
-        {
-          type: AST_TYPES.GLOBAL_KEYWORD,
-          name: lowerCasedValue
-        }
-      ];
-    } else {
-      parsedValue = lowerCasedValue;
-    }
-  } else if (SYS_COLORS.has(lowerCasedValue)) {
-    if (/^(?:(?:-webkit-)?(?:[a-z][a-z\d]*-)*color|border)$/i.test(prop)) {
-      if (inArray) {
-        parsedValue = [
-          {
-            type: AST_TYPES.IDENTIFIER,
-            name: lowerCasedValue
-          }
-        ];
-      } else {
-        parsedValue = lowerCasedValue;
+    parsedValue = [
+      {
+        type: AST_TYPES.GLOBAL_KEYWORD,
+        name: lowerCasedValue
       }
-    } else {
-      parsedValue = false;
-    }
+    ];
   } else {
     try {
       const ast = parseCSS(val, {
@@ -312,9 +281,9 @@ const parsePropertyValue = (prop, val, opt = {}) => {
       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;
+      } else {
+        const items = ast.children;
+        const itemCount = items.size;
         const values = [];
         for (const item of items) {
           const { children, name, type, value, unit } = item;
@@ -332,12 +301,12 @@ const parsePropertyValue = (prop, val, opt = {}) => {
                 .generate(item)
                 .replace(/\)(?!\)|\s|,)/g, ") ")
                 .trim();
-              const raw = items.length === 1 ? val : css;
+              const raw = itemCount === 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 (children.size === 1) {
+                  const child = children.first;
                   if (child.type === AST_TYPES.NUMBER) {
                     values.push({
                       type: AST_TYPES.CALC,
@@ -391,8 +360,6 @@ const parsePropertyValue = (prop, val, opt = {}) => {
           }
         }
         parsedValue = values;
-      } else {
-        parsedValue = val;
       }
     } catch {
       parsedValue = false;
@@ -403,18 +370,18 @@ const parsePropertyValue = (prop, val, opt = {}) => {
     return;
   }
   return parsedValue;
-};
+}
 
 /**
  * Parses a numeric value (number, dimension, percentage).
- * Helper function for parseNumber, parseLength, etc.
+ * Helper function for serializeNumber, serializeLength, 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) => {
+function parseNumericValue(val, opt, validateType) {
   const [item] = val;
   const { type, value, unit } = item ?? {};
   if (!validateType(type, value, unit)) {
@@ -438,31 +405,31 @@ const parseNumericValue = (val, opt, validateType) => {
     unit: unit ? asciiLowercase(unit) : null,
     type
   };
-};
+}
 
 /**
- * Parses a <number> value.
+ * Serializes 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 = {}) => {
+function serializeNumber(val, opt = {}) {
   const res = parseNumericValue(val, opt, (type) => type === AST_TYPES.NUMBER);
   if (!res) {
     return;
   }
   return `${res.num}`;
-};
+}
 
 /**
- * Parses a <length> value.
+ * Serializes an <angle> value.
  *
  * @param {Array<object>} val - The AST value.
  * @param {object} [opt={}] - The options for parsing.
- * @returns {string|undefined} The parsed length.
+ * @returns {string|undefined} The serialized angle.
  */
-const parseLength = (val, opt = {}) => {
+function serializeAngle(val, opt = {}) {
   const res = parseNumericValue(
     val,
     opt,
@@ -472,67 +439,85 @@ const parseLength = (val, opt = {}) => {
     return;
   }
   const { num, unit } = res;
-  if (num === 0 && !unit) {
-    return `${num}px`;
-  } else if (unit) {
+  if (unit) {
+    if (!/^(?:deg|g?rad|turn)$/i.test(unit)) {
+      return;
+    }
     return `${num}${unit}`;
+  } else if (num === 0) {
+    return `${num}deg`;
   }
-};
+}
 
 /**
- * Parses a <percentage> value.
+ * Serializes a <length> value.
  *
  * @param {Array<object>} val - The AST value.
  * @param {object} [opt={}] - The options for parsing.
- * @returns {string|undefined} The parsed percentage.
+ * @returns {string|undefined} The serialized length.
  */
-const parsePercentage = (val, opt = {}) => {
+function serializeLength(val, opt = {}) {
   const res = parseNumericValue(
     val,
     opt,
-    (type, value) => type === AST_TYPES.PERCENTAGE || (type === AST_TYPES.NUMBER && value === "0")
+    (type, value) => type === AST_TYPES.DIMENSION || (type === AST_TYPES.NUMBER && value === "0")
   );
   if (!res) {
     return;
   }
-  const { num } = res;
-  return `${num}%`;
-};
+  const { num, unit } = res;
+  if (num === 0 && !unit) {
+    return `${num}px`;
+  } else if (unit) {
+    return `${num}${unit}`;
+  }
+}
 
 /**
- * Parses an <angle> value.
+ * Serializes a <dimension> value, e.g. <frequency>, <time> and <resolution>.
  *
  * @param {Array<object>} val - The AST value.
  * @param {object} [opt={}] - The options for parsing.
- * @returns {string|undefined} The parsed angle.
+ * @returns {string|undefined} The serialized dimension.
  */
-const parseAngle = (val, opt = {}) => {
-  const res = parseNumericValue(
-    val,
-    opt,
-    (type, value) => type === AST_TYPES.DIMENSION || (type === AST_TYPES.NUMBER && value === "0")
-  );
+function serializeDimension(val, opt = {}) {
+  const res = parseNumericValue(val, opt, (type) => type === AST_TYPES.DIMENSION);
   if (!res) {
     return;
   }
   const { num, unit } = res;
   if (unit) {
-    if (!/^(?:deg|g?rad|turn)$/i.test(unit)) {
-      return;
-    }
     return `${num}${unit}`;
-  } else if (num === 0) {
-    return `${num}deg`;
   }
-};
+}
 
 /**
- * Parses a <url> value.
+ * Serializes a <percentage> value.
  *
  * @param {Array<object>} val - The AST value.
- * @returns {string|undefined} The parsed url.
+ * @param {object} [opt={}] - The options for parsing.
+ * @returns {string|undefined} The serialized percentage.
  */
-const parseUrl = (val) => {
+function serializePercentage(val, opt = {}) {
+  const res = parseNumericValue(
+    val,
+    opt,
+    (type, value) => type === AST_TYPES.PERCENTAGE || (type === AST_TYPES.NUMBER && value === "0")
+  );
+  if (!res) {
+    return;
+  }
+  const { num } = res;
+  return `${num}%`;
+}
+
+/**
+ * Serializes a <url> value.
+ *
+ * @param {Array<object>} val - The AST value.
+ * @returns {string|undefined} The serialized url.
+ */
+function serializeURL(val) {
   const [item] = val;
   const { type, value } = item ?? {};
   if (type !== AST_TYPES.URL) {
@@ -540,15 +525,15 @@ const parseUrl = (val) => {
   }
   const str = value.replace(/\\\\/g, "\\").replaceAll('"', '\\"');
   return `url("${str}")`;
-};
+}
 
 /**
- * Parses a <string> value.
+ * Serializes a <string> value.
  *
  * @param {Array<object>} val - The AST value.
- * @returns {string|undefined} The parsed string.
+ * @returns {string|undefined} The serialized string.
  */
-const parseString = (val) => {
+function serializeString(val) {
   const [item] = val;
   const { type, value } = item ?? {};
   if (type !== AST_TYPES.STRING) {
@@ -556,15 +541,15 @@ const parseString = (val) => {
   }
   const str = value.replace(/\\\\/g, "\\").replaceAll('"', '\\"');
   return `"${str}"`;
-};
+}
 
 /**
- * Parses a <color> value.
+ * Serializes a <color> value.
  *
  * @param {Array<object>} val - The AST value.
- * @returns {string|undefined} The parsed color.
+ * @returns {string|undefined} The serialized color.
  */
-const parseColor = (val) => {
+function serializeColor(val) {
   const [item] = val;
   const { name, type, value } = item ?? {};
   switch (type) {
@@ -600,15 +585,15 @@ const parseColor = (val) => {
     }
     default:
   }
-};
+}
 
 /**
- * Parses a <gradient> value.
+ * Serializes a <gradient> value.
  *
  * @param {Array<object>} val - The AST value.
- * @returns {string|undefined} The parsed gradient.
+ * @returns {string|undefined} The serialized gradient.
  */
-const parseGradient = (val) => {
+function serializeGradient(val) {
   const [item] = val;
   const { name, type, value } = item ?? {};
   if (type !== AST_TYPES.FUNCTION) {
@@ -620,7 +605,7 @@ const parseGradient = (val) => {
   if (res) {
     return res;
   }
-};
+}
 
 /**
  * Resolves a keyword value.
@@ -629,7 +614,7 @@ const parseGradient = (val) => {
  * @param {object} [opt={}] - The options for parsing.
  * @returns {string|undefined} The resolved keyword or undefined.
  */
-const resolveKeywordValue = (value, opt = {}) => {
+function resolveKeywordValue(value, opt = {}) {
   const [{ name, type }] = value;
   const { length } = opt;
   switch (type) {
@@ -644,7 +629,7 @@ const resolveKeywordValue = (value, opt = {}) => {
     }
     default:
   }
-};
+}
 
 /**
  * Resolves a function value.
@@ -653,7 +638,7 @@ const resolveKeywordValue = (value, opt = {}) => {
  * @param {object} [opt={}] - The options for parsing.
  * @returns {string|undefined} The resolved function or undefined.
  */
-const resolveFunctionValue = (value, opt = {}) => {
+function resolveFunctionValue(value, opt = {}) {
   const [{ name, type, value: itemValue }] = value;
   const { length } = opt;
   switch (type) {
@@ -671,16 +656,16 @@ const resolveFunctionValue = (value, opt = {}) => {
     }
     default:
   }
-};
+}
 
 /**
- * Resolves a length or percentage or number value.
+ * Resolves a numeric value.
  *
- * @param {Array<object>} value - The AST node array containing the value.
+ * @param {Array<object>} value - The AST node array containing the numeric value.
  * @param {object} [opt={}] - The options for parsing.
  * @returns {string|undefined} The resolved length/percentage/number or undefined.
  */
-const resolveNumericValue = (value, opt = {}) => {
+function resolveNumericValue(value, opt = {}) {
   const [{ name, type: itemType, value: itemValue }] = value;
   const { length, type } = opt;
   switch (itemType) {
@@ -689,9 +674,11 @@ const resolveNumericValue = (value, opt = {}) => {
     }
     case AST_TYPES.DIMENSION: {
       if (type === "angle") {
-        return parseAngle(value, opt);
+        return serializeAngle(value, opt);
+      } else if (type === "length") {
+        return serializeLength(value, opt);
       }
-      return parseLength(value, opt);
+      return serializeDimension(value, opt);
     }
     case AST_TYPES.GLOBAL_KEYWORD: {
       if (length > 1) {
@@ -705,25 +692,25 @@ const resolveNumericValue = (value, opt = {}) => {
     case AST_TYPES.NUMBER: {
       switch (type) {
         case "angle": {
-          return parseAngle(value, opt);
+          return serializeAngle(value, opt);
         }
         case "length": {
-          return parseLength(value, opt);
+          return serializeLength(value, opt);
         }
         case "percentage": {
-          return parsePercentage(value, opt);
+          return serializePercentage(value, opt);
         }
         default: {
-          return parseNumber(value, opt);
+          return serializeNumber(value, opt);
         }
       }
     }
     case AST_TYPES.PERCENTAGE: {
-      return parsePercentage(value, opt);
+      return serializePercentage(value, opt);
     }
     default:
   }
-};
+}
 
 /**
  * Resolves a color value.
@@ -732,7 +719,7 @@ const resolveNumericValue = (value, opt = {}) => {
  * @param {object} [opt={}] - The options for parsing.
  * @returns {string|undefined} The resolved color or undefined.
  */
-const resolveColorValue = (value, opt = {}) => {
+function resolveColorValue(value, opt = {}) {
   const [{ name, type }] = value;
   const { length } = opt;
   switch (type) {
@@ -743,19 +730,19 @@ const resolveColorValue = (value, opt = {}) => {
       return name;
     }
     default: {
-      return parseColor(value, opt);
+      return serializeColor(value, opt);
     }
   }
-};
+}
 
 /**
- * Resolves a gradient or URL value.
+ * Resolves an image value.
  *
- * @param {Array<object>} value - The AST node array containing the color value.
+ * @param {Array<object>} value - The AST node array containing the image value.
  * @param {object} [opt={}] - The options for parsing.
  * @returns {string|undefined} The resolved gradient/url or undefined.
  */
-const resolveGradientUrlValue = (value, opt = {}) => {
+function resolveImageValue(value, opt = {}) {
   const [{ name, type }] = value;
   const { length } = opt;
   switch (type) {
@@ -769,13 +756,13 @@ const resolveGradientUrlValue = (value, opt = {}) => {
       return name;
     }
     case AST_TYPES.URL: {
-      return parseUrl(value, opt);
+      return serializeURL(value, opt);
     }
     default: {
-      return parseGradient(value, opt);
+      return serializeGradient(value, opt);
     }
   }
-};
+}
 
 /**
  * Resolves a border shorthand value.
@@ -785,7 +772,7 @@ const resolveGradientUrlValue = (value, opt = {}) => {
  * @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) => {
+function resolveBorderShorthandValue(value, subProps, parsedValues) {
   const [{ isNumber, name, type, value: itemValue }] = value;
   const { color: colorProp, style: styleProp, width: widthProp } = subProps;
   switch (type) {
@@ -800,7 +787,7 @@ const resolveBorderShorthandValue = (value, subProps, parsedValues) => {
       if (parsedValues.has(widthProp)) {
         return;
       }
-      const parsedValue = parseLength(value, { min: 0 });
+      const parsedValue = serializeLength(value, { min: 0 });
       if (!parsedValue) {
         return;
       }
@@ -811,7 +798,7 @@ const resolveBorderShorthandValue = (value, subProps, parsedValues) => {
       if (parsedValues.has(colorProp)) {
         return;
       }
-      const parsedValue = parseColor(value);
+      const parsedValue = serializeColor(value);
       if (!parsedValue) {
         return;
       }
@@ -841,7 +828,7 @@ const resolveBorderShorthandValue = (value, subProps, parsedValues) => {
     }
     default:
   }
-};
+}
 
 module.exports = {
   AST_TYPES,
@@ -849,23 +836,24 @@ module.exports = {
   hasVarFunc,
   isGlobalKeyword,
   isValidPropertyValue,
-  parseAngle,
   parseCSS,
-  parseColor,
-  parseGradient,
-  parseLength,
-  parseNumber,
-  parsePercentage,
   parsePropertyValue,
-  parseString,
-  parseUrl,
   prepareValue,
   resolveBorderShorthandValue,
   resolveCalc,
   resolveColorValue,
   resolveFunctionValue,
-  resolveGradientUrlValue,
+  resolveImageValue,
   resolveKeywordValue,
   resolveNumericValue,
+  serializeAngle,
+  serializeColor,
+  serializeDimension,
+  serializeGradient,
+  serializeLength,
+  serializeNumber,
+  serializePercentage,
+  serializeString,
+  serializeURL,
   splitValue
 };