RobotDaily/node_modules/cssstyle/lib/parsers.js

"use strict";

const {
  resolve: resolveColor,
  utils: { cssCalc, resolveGradient, splitValue }
} = 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_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_COLORS = new Set([
  "accentcolor",
  "accentcolortext",
  "activeborder",
  "activecaption",
  "activetext",
  "appworkspace",
  "background",
  "buttonborder",
  "buttonface",
  "buttonhighlight",
  "buttonshadow",
  "buttontext",
  "canvas",
  "canvastext",
  "captiontext",
  "field",
  "fieldtext",
  "graytext",
  "highlight",
  "highlighttext",
  "inactiveborder",
  "inactivecaption",
  "inactivecaptiontext",
  "infobackground",
  "infotext",
  "linktext",
  "mark",
  "marktext",
  "menu",
  "menutext",
  "scrollbar",
  "selecteditem",
  "selecteditemtext",
  "threeddarkshadow",
  "threedface",
  "threedhighlight",
  "threedlightshadow",
  "threedshadow",
  "visitedtext",
  "window",
  "windowframe",
  "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)";
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\(/;

// Patched css-tree
const cssTree = csstree.fork(syntaxes);

// 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 "";
  }
  return `${value}`.trim();
};

/**
 * 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));
};

/**
 * 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);
};

/**
 * 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);
};

/**
 * 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);
  }
  return ast;
};

/**
 * 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_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") {
    return cachedValue;
  }
  let result;
  try {
    const ast = parseCSS(val, {
      context: "value"
    });
    const { error, matched } = cssTree.lexer.matchProperty(prop, ast);
    result = error === null && matched !== null;
  } catch {
    result = false;
  }
  lruCache.set(cacheKey, result);
  return result;
};

/**
 * 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 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;
  }
  const { children: items } = obj;
  const values = [];
  for (const item of items) {
    const { type: itemType, name: itemName, value: itemValue } = item;
    if (itemType === AST_TYPES.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);
      }
    } else if (itemType === AST_TYPES.STRING) {
      values.push(`"${itemValue}"`);
    } else {
      values.push(itemName ?? itemValue);
    }
  }
  const resolvedValue = values.join(" ");
  lruCache.set(cacheKey, resolvedValue);
  return resolvedValue;
};

/**
 * 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 (hasCalcFunc(val)) {
    const calculatedValue = resolveCalc(val, {
      format: "specifiedValue"
    });
    if (typeof calculatedValue !== "string") {
      return;
    }
    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_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;
      }
    } else {
      parsedValue = false;
    }
  } 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 {
                  values.push({
                    type: AST_TYPES.CALC,
                    isNumber: false,
                    value: asciiLowercase(itemValue),
                    name,
                    raw
                  });
                }
              } else {
                values.push({
                  type,
                  name,
                  value: asciiLowercase(itemValue),
                  raw
                });
              }
              break;
            }
            case AST_TYPES.IDENTIFIER: {
              if (caseSensitive) {
                values.push(item);
              } else {
                values.push({
                  type,
                  name: asciiLowercase(name)
                });
              }
              break;
            }
            default: {
              values.push(item);
            }
          }
        }
        parsedValue = values;
      } else {
        parsedValue = val;
      }
    } catch {
      parsedValue = false;
    }
  }
  lruCache.set(cacheKey, parsedValue);
  if (parsedValue === false) {
    return;
  }
  return parsedValue;
};

/**
 * 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, unit } = item ?? {};
  if (!validateType(type, value, unit)) {
    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;
  }
  return {
    num,
    unit: unit ? asciiLowercase(unit) : null,
    type
  };
};

/**
 * 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;
  }
  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}${unit}`;
  }
};

/**
 * 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 { num } = res;
  return `${num}%`;
};

/**
 * 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 { 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.
 *
 * @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 !== AST_TYPES.URL) {
    return;
  }
  const str = value.replace(/\\\\/g, "\\").replaceAll('"', '\\"');
  return `url("${str}")`;
};

/**
 * 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 !== AST_TYPES.STRING) {
    return;
  }
  const str = value.replace(/\\\\/g, "\\").replaceAll('"', '\\"');
  return `"${str}"`;
};

/**
 * 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 AST_TYPES.FUNCTION: {
      const res = resolveColor(`${name}(${value})`, {
        format: "specifiedValue"
      });
      if (res) {
        return res;
      }
      break;
    }
    case AST_TYPES.HASH: {
      const res = resolveColor(`#${value}`, {
        format: "specifiedValue"
      });
      if (res) {
        return res;
      }
      break;
    }
    case AST_TYPES.IDENTIFIER: {
      if (SYS_COLORS.has(name)) {
        return name;
      }
      const res = resolveColor(name, {
        format: "specifiedValue"
      });
      if (res) {
        return res;
      }
      break;
    }
    default:
  }
};

/**
 * 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 !== AST_TYPES.FUNCTION) {
    return;
  }
  const res = resolveGradient(`${name}(${value})`, {
    format: "specifiedValue"
  });
  if (res) {
    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
};