postcss-merge-idents 9.0.2 → 9.0.4

package/src/lib/grammar.js

@@ -0,0 +1,271 @@
+import { TokenType } from '@csstools/css-tokenizer';
+import cssnanoUtils from 'cssnano-utils';
+import specData from '../data/mergeIdents.json' with { type: 'json' };
+
+const { asciiLowerCase, decoded, tokens } = cssnanoUtils;
+
+const VENDOR_PREFIX = /^-(webkit|moz|o)-/v;
+
+const CSS_WIDE_KEYWORDS = new Set(specData.cssWideKeywords);
+
+const KEYFRAMES_NAME_RESERVED = new Set([
+  ...CSS_WIDE_KEYWORDS,
+  'default',
+  'none',
+]);
+
+// css-animations-2 spells <single-animation-composition> only in the
+// animation-composition property grammar; the shorthand grammar webref gives
+// does not reach it yet, so these keywords stay hand-written.
+const ANIMATION_COMPOSITION_KEYWORDS = new Set([
+  'accumulate',
+  'add',
+  'replace',
+]);
+
+const KEYFRAMES_SHORTHAND_KEYWORDS = new Set([
+  ...CSS_WIDE_KEYWORDS,
+  ...specData.keyframes.shorthandKeywords,
+  ...ANIMATION_COMPOSITION_KEYWORDS,
+]);
+
+const COUNTER_STYLE_NAME_RESERVED = new Set([
+  ...CSS_WIDE_KEYWORDS,
+  'default',
+  'decimal',
+  'none',
+]);
+
+// The predefined counter style names are specified in prose (CSS Counter
+// Styles Level 3 §6) rather than in any grammar, so webref cannot list them.
+const PREDEFINED_COUNTER_STYLES = [
+  'arabic-indic',
+  'armenian',
+  'bengali',
+  'cambodian',
+  'circle',
+  'cjk-decimal',
+  'cjk-earthly-branch',
+  'cjk-heavenly-stem',
+  'cjk-ideographic',
+  'decimal',
+  'decimal-leading-zero',
+  'devanagari',
+  'disc',
+  'disclosure-closed',
+  'disclosure-open',
+  'ethiopic-numeric',
+  'georgian',
+  'gujarati',
+  'gurmukhi',
+  'hebrew',
+  'hiragana',
+  'hiragana-iroha',
+  'japanese-formal',
+  'japanese-informal',
+  'kannada',
+  'katakana',
+  'katakana-iroha',
+  'khmer',
+  'korean-hangul-formal',
+  'korean-hanja-formal',
+  'korean-hanja-informal',
+  'lao',
+  'lower-alpha',
+  'lower-armenian',
+  'lower-greek',
+  'lower-latin',
+  'lower-roman',
+  'malayalam',
+  'mongolian',
+  'myanmar',
+  'oriya',
+  'persian',
+  'simp-chinese-formal',
+  'simp-chinese-informal',
+  'square',
+  'tamil',
+  'telugu',
+  'thai',
+  'tibetan',
+  'trad-chinese-formal',
+  'trad-chinese-informal',
+  'upper-alpha',
+  'upper-armenian',
+  'upper-latin',
+  'upper-roman',
+];
+
+const COUNTER_STYLE_RESERVED = new Set([
+  ...CSS_WIDE_KEYWORDS,
+  ...specData.counterStyle.keywords,
+  ...PREDEFINED_COUNTER_STYLES,
+]);
+
+const COUNTER_STYLE_FUNCTIONS = new Map(
+  Object.entries(specData.counterStyle.functions).map(([name, args]) => [
+    // Stylesheets spell a function without the trailing `()` webref names it
+    // by, preserving the historical lookup behavior.
+    name.slice(0, -2),
+    args,
+  ])
+);
+
+const CONDITIONAL_GROUP_RULES = new Set([
+  'media',
+  'supports',
+  'container',
+  'document',
+]);
+
+/**
+ * @param {string} name
+ * @return {boolean}
+ */
+function isConditionalGroupRule(name) {
+  const lower = asciiLowerCase(name);
+  return CONDITIONAL_GROUP_RULES.has(lower) || lower.endsWith('document');
+}
+
+/**
+ * @param {string} params
+ * @param {string} atRuleName
+ * @return {{ isString: boolean, isReservedName: boolean, key: string, tokenText: string } | null}
+ */
+function parseAtRuleName(params, atRuleName) {
+  const trimmed = params.trim();
+  if (!trimmed) {
+    return null;
+  }
+  const tokenList = tokens(trimmed).filter(
+    (t) => t[0] !== TokenType.Whitespace && t[0] !== TokenType.Comment
+  );
+  if (tokenList.length !== 1) {
+    return null;
+  }
+  const isCounterStyle = atRuleName.endsWith('counter-style');
+  const first = tokenList[0];
+  if (first[0] === TokenType.Ident) {
+    const val = decoded(first);
+    const lower = asciiLowerCase(val);
+    const isReserved = isCounterStyle
+      ? COUNTER_STYLE_NAME_RESERVED.has(lower)
+      : KEYFRAMES_NAME_RESERVED.has(lower);
+    if (isReserved) {
+      return null;
+    }
+    const isReservedName = isCounterStyle
+      ? COUNTER_STYLE_RESERVED.has(lower)
+      : KEYFRAMES_SHORTHAND_KEYWORDS.has(lower) || val.startsWith('--');
+    return {
+      isString: false,
+      isReservedName,
+      key: `ident:${val}`,
+      tokenText: first[1],
+    };
+  }
+  if (!isCounterStyle && first[0] === TokenType.String) {
+    const val = /** @type {{value: string}} */ (first[4]).value;
+    return {
+      isString: true,
+      isReservedName: false,
+      key: `str:${val}`,
+      tokenText: first[1],
+    };
+  }
+  return null;
+}
+
+/**
+ * @param {import('postcss').Declaration} decl
+ * @return {{ targetAtRuleName: string, kind: 'animation-shorthand' | 'animation-name' | 'counter-style' | 'counter-style-func' } | null}
+ */
+function classifyDeclaration(decl) {
+  const prop = asciiLowerCase(decl.prop);
+  if (prop.startsWith('--')) {
+    return null;
+  }
+
+  const prefixMatch = prop.match(VENDOR_PREFIX);
+  const prefix = prefixMatch ? prefixMatch[0] : '';
+  const unprefixed = prefix ? prop.slice(prefix.length) : prop;
+
+  if (unprefixed === 'animation') {
+    return {
+      targetAtRuleName: `${prefix}keyframes`,
+      kind: 'animation-shorthand',
+    };
+  }
+  if (unprefixed === 'animation-name') {
+    return { targetAtRuleName: `${prefix}keyframes`, kind: 'animation-name' };
+  }
+  if (unprefixed === 'list-style' || unprefixed === 'list-style-type') {
+    return { targetAtRuleName: 'counter-style', kind: 'counter-style' };
+  }
+
+  if (
+    decl.parent?.type === 'atrule' &&
+    asciiLowerCase(decl.parent.name).endsWith('counter-style')
+  ) {
+    if (prop === 'system' || prop === 'fallback' || prop === 'speak-as') {
+      return {
+        targetAtRuleName: asciiLowerCase(decl.parent.name),
+        kind: 'counter-style',
+      };
+    }
+  }
+
+  if (
+    unprefixed === 'content' ||
+    unprefixed === 'bookmark-label' ||
+    unprefixed === 'copy-into' ||
+    unprefixed === 'string-set'
+  ) {
+    return { targetAtRuleName: 'counter-style', kind: 'counter-style-func' };
+  }
+
+  return null;
+}
+
+/**
+ * @param {import('postcss').Node} node
+ * @return {import('postcss').Container}
+ */
+function getContainer(node) {
+  let curr = node.parent;
+  while (curr && curr.type !== 'root') {
+    if (
+      curr.type === 'atrule' &&
+      isConditionalGroupRule(
+        /** @type {import('postcss').AtRule} */ (curr).name
+      )
+    ) {
+      return curr;
+    }
+    curr = curr.parent;
+  }
+  return curr ?? node.root();
+}
+
+/**
+ * @param {{ rule: import('postcss').AtRule, body?: string }} entry
+ * @return {string}
+ */
+function getBody(entry) {
+  if (entry.body === undefined) {
+    entry.body = entry.rule.nodes ? entry.rule.nodes.toString() : '';
+  }
+  return entry.body;
+}
+
+export {
+  CSS_WIDE_KEYWORDS,
+  KEYFRAMES_SHORTHAND_KEYWORDS,
+  COUNTER_STYLE_RESERVED,
+  COUNTER_STYLE_FUNCTIONS,
+  isConditionalGroupRule,
+  parseAtRuleName,
+  classifyDeclaration,
+  getContainer,
+  getBody,
+};

package/src/lib/layerRegistry.js

@@ -0,0 +1,224 @@
+import { TokenType } from '@csstools/css-tokenizer';
+import cssnanoUtils from 'cssnano-utils';
+
+const { asciiLowerCase, decoded, tokens } = cssnanoUtils;
+
+/**
+ * Parses a @layer parameter list into decoded layer-name paths. A period is a
+ * separator only as a Delim token between idents; an escaped dot is part of
+ * the preceding identifier's value, so `a\.b` is one segment named "a.b".
+ * Whitespace and comments around separators are allowed, preserving the
+ * previous handling of `a . b`.
+ *
+ * @param {string} params
+ * @return {string[][] | null} one decoded segment path per declared name
+ */
+function parseLayerNameList(params) {
+  const tokenList = tokens(params).filter(
+    (t) => t[0] !== TokenType.Whitespace && t[0] !== TokenType.Comment
+  );
+  /** @type {string[][]} */
+  const names = [];
+  /** @type {string[] | null} */
+  let current = null;
+  let expectIdent = true;
+  for (const token of tokenList) {
+    const type = token[0];
+    if (type === TokenType.Comma) {
+      if (expectIdent || !current) {
+        return null;
+      }
+      names.push(current);
+      current = null;
+      expectIdent = true;
+    } else if (type === TokenType.Delim && token[1] === '.') {
+      if (expectIdent || !current) {
+        return null;
+      }
+      expectIdent = true;
+    } else if (type === TokenType.Ident && expectIdent) {
+      current ??= [];
+      current.push(decoded(token));
+      expectIdent = false;
+    } else {
+      return null;
+    }
+  }
+  if (expectIdent) {
+    return null;
+  }
+  if (current) {
+    names.push(current);
+  }
+  return names;
+}
+
+/**
+ * @param {import('postcss').Node} node
+ * @return {import('postcss').AtRule[]} enclosing @layer at-rules, outermost first
+ */
+function enclosingLayerRules(node) {
+  /** @type {import('postcss').AtRule[]} */
+  const chain = [];
+  let curr = node.parent;
+  while (curr && curr.type !== 'root') {
+    if (
+      curr.type === 'atrule' &&
+      asciiLowerCase(/** @type {import('postcss').AtRule} */ (curr).name) ===
+        'layer'
+    ) {
+      chain.unshift(/** @type {import('postcss').AtRule} */ (curr));
+    }
+    curr = curr.parent;
+  }
+  return chain;
+}
+
+class LayerRegistry {
+  constructor() {
+    this.nextIndex = 0;
+    /** @type {Map<string, { index: number, children: LayerRegistry }>} */
+    this.layers = new Map();
+    /** @type {Map<import('postcss').AtRule, { index: number, children: LayerRegistry }>} */
+    this.anonymous = new Map();
+  }
+
+  /**
+   * @param {string} name
+   * @return {{ index: number, children: LayerRegistry }}
+   */
+  getOrCreate(name) {
+    let entry = this.layers.get(name);
+    if (!entry) {
+      entry = { index: this.nextIndex++, children: new LayerRegistry() };
+      this.layers.set(name, entry);
+    }
+    return entry;
+  }
+
+  /**
+   * Entry for a layer with no name or an unparseable name: every occurrence
+   * is a unique cascade layer, but names nested inside still order beneath
+   * it through the child registry.
+   *
+   * @param {import('postcss').AtRule} layerRule
+   * @return {{ index: number, children: LayerRegistry }}
+   */
+  getOrCreateAnonymous(layerRule) {
+    let entry = this.anonymous.get(layerRule);
+    if (!entry) {
+      entry = { index: this.nextIndex++, children: new LayerRegistry() };
+      this.anonymous.set(layerRule, entry);
+    }
+    return entry;
+  }
+
+  /**
+   * The registry entry a single layer at-rule occupies, creating missing
+   * segments as needed. Statement lists and unparseable names fall back to a
+   * unique anonymous entry so they order but never match another spelling.
+   *
+   * @param {import('postcss').AtRule} layerRule
+   * @return {{ index: number, children: LayerRegistry }}
+   */
+  entryFor(layerRule) {
+    const names = layerRule.params.trim()
+      ? parseLayerNameList(layerRule.params)
+      : null;
+    if (names === null || names.length !== 1) {
+      return this.getOrCreateAnonymous(layerRule);
+    }
+    let entry = this.getOrCreate(names[0][0]);
+    for (let i = 1; i < names[0].length; i++) {
+      entry = entry.children.getOrCreate(names[0][i]);
+    }
+    return entry;
+  }
+
+  /**
+   * Registers the layers a @layer at-rule declares, in document order and
+   * nested beneath any enclosing layers, so later lookups observe the real
+   * layer tree.
+   *
+   * @param {import('postcss').AtRule} layerRule
+   * @return {void}
+   */
+  declareLayerAtRule(layerRule) {
+    /** @type {LayerRegistry} */
+    let current = this;
+    for (const parent of enclosingLayerRules(layerRule)) {
+      current = current.entryFor(parent).children;
+    }
+    if (!layerRule.params.trim()) {
+      // An unnamed block layer is itself a unique anonymous layer; register
+      // it so nested names order beneath it.
+      if (layerRule.nodes) {
+        current.getOrCreateAnonymous(layerRule);
+      }
+      return;
+    }
+    const names = parseLayerNameList(layerRule.params);
+    if (names === null) {
+      return;
+    }
+    for (const segments of names) {
+      let entry = current.getOrCreate(segments[0]);
+      for (let i = 1; i < segments.length; i++) {
+        entry = entry.children.getOrCreate(segments[i]);
+      }
+    }
+  }
+
+  /**
+   * @param {import('postcss').Node} node
+   * @return {number[]}
+   */
+  getPriority(node) {
+    const chain = enclosingLayerRules(node);
+    if (chain.length === 0) {
+      return [Infinity];
+    }
+
+    /** @type {number[]} */
+    const priority = [];
+    /** @type {LayerRegistry} */
+    let current = this;
+    for (const layerRule of chain) {
+      const entry = current.entryFor(layerRule);
+      priority.push(entry.index);
+      current = entry.children;
+    }
+    priority.push(Infinity);
+    return priority;
+  }
+}
+
+/**
+ * @param {number[]} p1
+ * @param {number[]} p2
+ * @return {number}
+ */
+function compareLayerPriority(p1, p2) {
+  const len = Math.min(p1.length, p2.length);
+  for (let i = 0; i < len; i++) {
+    if (p1[i] !== p2[i]) {
+      return p1[i] - p2[i];
+    }
+  }
+  return p1.length - p2.length;
+}
+
+/**
+ * @param {{ layerPriority: number[], documentIndex: number }} a
+ * @param {{ layerPriority: number[], documentIndex: number }} b
+ * @return {number}
+ */
+function compareAtRulePriority(a, b) {
+  const layerCmp = compareLayerPriority(a.layerPriority, b.layerPriority);
+  if (layerCmp !== 0) {
+    return layerCmp;
+  }
+  return a.documentIndex - b.documentIndex;
+}
+
+export { LayerRegistry, compareAtRulePriority };