@thejaredwilcurt/csslop 0.0.16 → 0.0.18

package/src/rules/stringify.js

@@ -5,6 +5,10 @@
 import { processDeclarations } from '../declarations/process.js';
 import { minifyValue } from '../value/minify.js';
 
+import {
+  collapseCustomPropertyWhitespace,
+  processCustomPropertyComments
+} from './custom-properties.js';
 import {
   canUnwrapSupports,
   normalizeMedia,
@@ -12,6 +16,12 @@ import {
   unescapeIdent,
   unescapeSelector
 } from './normalize.js';
+import {
+  flattenNestingParentIsSelector,
+  mergeAdjacentWherePseudoClasses,
+  processIsSelector,
+  splitParametersByComma
+} from './selectors.js';
 
 /**
  * Renders an array of CSS declaration objects as a minified semicolon-separated string, filtering out whitespace entries.
@@ -22,7 +32,7 @@ import {
 function stringifyDeclarations (declarations) {
   return declarations
     .filter((declaration) => {
-      return declaration.type !== 'whitespace';
+      return declaration.type !== 'whitespace' && declaration.type !== 'comment' && declaration.property;
     })
     .map((declaration) => {
       return [declaration.property, ':', minifyValue(declaration)].join('');
@@ -42,35 +52,6 @@ function stringifyChildRules (rules, context) {
     return stringifyRule(childRule, context);
   }).join('');
 }
-
-/**
- * Splits a parameter string by commas while respecting nested parentheses,
- * so commas inside function calls within default values are not treated as separators.
- *
- * @param  {string} parameterString  The comma-separated parameter string to split.
- * @return {Array}                   An array of individual parameter strings.
- */
-function splitParametersByComma (parameterString) {
-  const parameters = [];
-  let currentParameter = '';
-  let parenthesisDepth = 0;
-  for (const character of parameterString) {
-    if (character === '(') {
-      parenthesisDepth++;
-    } else if (character === ')') {
-      parenthesisDepth--;
-    }
-    if (character === ',' && parenthesisDepth === 0) {
-      parameters.push(currentParameter);
-      currentParameter = '';
-    } else {
-      currentParameter += character;
-    }
-  }
-  parameters.push(currentParameter);
-  return parameters;
-}
-
 /**
  * Minifies a `@function` prelude (signature) by collapsing whitespace around
  * parameter separators (commas) and default value delimiters (colons).
@@ -137,312 +118,6 @@ function stringifyAtRule (rule, context) {
   const separator = minifiedPrelude ? ' ' : '';
   return '@' + rule.name + separator + minifiedPrelude + '{' + body + '}';
 }
-
-/**
- * Finds the index of the closing parenthesis that matches the opening
- * parenthesis at the given position in the string.
- *
- * @param  {string} text       The string to search within.
- * @param  {number} openIndex  The index of the opening parenthesis.
- * @return {number}            The index of the matching closing parenthesis, or -1 if not found.
- */
-function findMatchingCloseParenthesis (text, openIndex) {
-  let depth = 0;
-  for (let index = openIndex; index < text.length; index++) {
-    if (text[index] === '(') {
-      depth++;
-    } else if (text[index] === ')') {
-      depth--;
-      if (depth === 0) {
-        return index;
-      }
-    }
-  }
-  return -1;
-}
-
-/**
- * Extracts the type selector or universal selector from the beginning of a
- * compound selector string, if one is present. A type selector is a bare
- * element name (e.g. `div`, `a`); the universal selector is `*`.
- *
- * @param  {string}      compoundSelector  A single compound CSS selector string.
- * @return {string|null}                   The type or universal selector, or null if none is present.
- */
-function extractTypeSelector (compoundSelector) {
-  // Match universal selector (*) or type selector (letter followed by alphanumeric chars or hyphens)
-  const match = compoundSelector.match(/^(\*|[a-zA-Z][a-zA-Z0-9-]*)/);
-  if (match) {
-    return match[0];
-  }
-  return null;
-}
-
-/**
- * Merges two simple/compound selectors into a single compound selector,
- * ensuring any type or universal selector appears first. Returns null when
- * merging is invalid because both sides contain a type or universal selector.
- *
- * @param  {string}      left   The first selector to merge.
- * @param  {string}      right  The second selector to merge.
- * @return {string|null}        The merged compound selector, or null if the merge is invalid.
- */
-function mergeCompoundSelectors (left, right) {
-  const leftTypeSelector = extractTypeSelector(left);
-  const rightTypeSelector = extractTypeSelector(right);
-  if (leftTypeSelector && rightTypeSelector) {
-    return null;
-  }
-  // When the right side has a type selector, it must come first in the compound
-  if (rightTypeSelector) {
-    return right + left;
-  }
-  return left + right;
-}
-
-/**
- * Builds the cartesian product of two selector lists by merging every
- * combination of left and right selectors into compound selectors.
- * Returns null if any combination produces an invalid merge.
- *
- * @param  {Array}      leftParts   Selectors from the first `:where()`.
- * @param  {Array}      rightParts  Selectors from the second `:where()`.
- * @return {Array|null}             The array of merged compound selectors, or null if any merge is invalid.
- */
-function buildWhereCartesianProduct (leftParts, rightParts) {
-  const products = [];
-  for (const leftSelector of leftParts) {
-    for (const rightSelector of rightParts) {
-      const merged = mergeCompoundSelectors(leftSelector.trim(), rightSelector.trim());
-      if (merged === null) {
-        return null;
-      }
-      products.push(merged);
-    }
-  }
-  return products;
-}
-
-/**
- * Scans a selector string for adjacent `:where(A):where(B)` patterns and
- * merges them into a single `:where(AB)` (or `:where()` with the cartesian
- * product of their selector lists) when the merged form is strictly shorter.
- * Type selectors are correctly repositioned to the front of each merged
- * compound, and merges that would produce invalid compound selectors (two
- * type selectors) are skipped.
- *
- * @param  {string} selector  A minified CSS selector string.
- * @return {string}           The selector with beneficial adjacent `:where()` merges applied.
- */
-function mergeAdjacentWherePseudoClasses (selector) {
-  let result = selector;
-  let position = 0;
-  while (position < result.length) {
-    const whereIndex = result.indexOf(':where(', position);
-    if (whereIndex === -1) {
-      break;
-    }
-    // Index of the '(' in the first ':where('
-    const firstOpenParenthesis = whereIndex + 6;
-    const firstCloseParenthesis = findMatchingCloseParenthesis(result, firstOpenParenthesis);
-    if (firstCloseParenthesis === -1) {
-      break;
-    }
-    const adjacentStart = firstCloseParenthesis + 1;
-    const adjacentWhereTag = ':where(';
-    if (result.slice(adjacentStart, adjacentStart + adjacentWhereTag.length) !== adjacentWhereTag) {
-      position = firstCloseParenthesis + 1;
-      continue;
-    }
-    // Index of the '(' in the second ':where('
-    const secondOpenParenthesis = adjacentStart + 6;
-    const secondCloseParenthesis = findMatchingCloseParenthesis(result, secondOpenParenthesis);
-    if (secondCloseParenthesis === -1) {
-      break;
-    }
-    const firstInnerContent = result.slice(firstOpenParenthesis + 1, firstCloseParenthesis);
-    const secondInnerContent = result.slice(secondOpenParenthesis + 1, secondCloseParenthesis);
-    const leftParts = splitParametersByComma(firstInnerContent);
-    const rightParts = splitParametersByComma(secondInnerContent);
-    const mergedParts = buildWhereCartesianProduct(leftParts, rightParts);
-    if (mergedParts === null) {
-      position = firstCloseParenthesis + 1;
-      continue;
-    }
-    const originalFragment = result.slice(whereIndex, secondCloseParenthesis + 1);
-    const mergedFragment = ':where(' + mergedParts.join(',') + ')';
-    if (mergedFragment.length < originalFragment.length) {
-      result = result.slice(0, whereIndex) + mergedFragment + result.slice(secondCloseParenthesis + 1);
-      // Don't advance position; the merged result may be adjacent to another :where()
-    } else {
-      position = firstCloseParenthesis + 1;
-    }
-  }
-  return result;
-}
-
-/**
- * Processes a bare `:is()` selector by merging `:link`+`:visited` into `:any-link`,
- * de-duplicating, sorting alphabetically, and conditionally expanding into individual
- * selectors when all parts are simple type/universal selectors with no modifications.
- *
- * @param  {string} selector  A minified CSS selector string.
- * @return {Array}            An array of one or more processed selector strings.
- */
-function processIsSelector (selector) {
-  // Replace :is(:link,:visited) and :is(:visited,:link) with :any-link
-  selector = selector.replace(/:is\(:link,:visited\)/g, ':any-link');
-  selector = selector.replace(/:is\(:visited,:link\)/g, ':any-link');
-  // Only process bare :is() selectors (where :is() is the entire selector)
-  if (!selector.startsWith(':is(')) {
-    return [selector];
-  }
-  let depth = 0;
-  let closingIndex = -1;
-  for (let index = 4; index < selector.length; index++) {
-    if (selector[index] === '(') {
-      depth++;
-    } else if (selector[index] === ')') {
-      if (depth === 0) {
-        closingIndex = index;
-        break;
-      }
-      depth--;
-    }
-  }
-  if (closingIndex !== selector.length - 1) {
-    return [selector];
-  }
-  const content = selector.slice(4, -1);
-  let parts = [];
-  let currentPart = '';
-  let parenDepth = 0;
-  for (const character of content) {
-    if (character === '(') {
-      parenDepth++;
-    } else if (character === ')') {
-      parenDepth--;
-    }
-    if (character === ',' && parenDepth === 0) {
-      parts.push(currentPart);
-      currentPart = '';
-    } else {
-      currentPart += character;
-    }
-  }
-  parts.push(currentPart);
-  const originalCount = parts.length;
-  // Replace :link + :visited with :any-link
-  const hasLink = parts.includes(':link');
-  const hasVisited = parts.includes(':visited');
-  if (hasLink && hasVisited) {
-    parts = parts.filter((part) => {
-      return part !== ':link' && part !== ':visited';
-    });
-    if (!parts.includes(':any-link')) {
-      parts.push(':any-link');
-    }
-  }
-  // De-duplicate
-  parts = [...new Set(parts)];
-  // Sort alphabetically
-  parts.sort();
-  // Unwrap :is() with a single selector
-  if (parts.length === 1) {
-    return parts;
-  }
-  // Expand if all parts are simple type/universal selectors and no dedup/replacement occurred
-  const allSimple = parts.every((part) => {
-    return /^[a-z*][a-z0-9-]*$/i.test(part);
-  });
-  if (allSimple && parts.length === originalCount) {
-    return parts;
-  }
-  return [':is(' + parts.join(',') + ')'];
-}
-
-/**
- * Removes spaces after commas only inside parenthesized groups (function
- * calls like `var()`, `calc()`), leaving top-level comma spacing intact.
- *
- * @param  {string} value  The whitespace-collapsed custom property value.
- * @return {string}        The value with post-comma spaces removed inside function calls only.
- */
-function removeSpacesAfterCommasInsideFunctions (value) {
-  let result = '';
-  let parenthesisDepth = 0;
-  for (let index = 0; index < value.length; index++) {
-    const character = value[index];
-    if (character === '(') {
-      parenthesisDepth++;
-    }
-    if (character === ')') {
-      parenthesisDepth--;
-    }
-    if (character === ',' && parenthesisDepth > 0) {
-      result += ',';
-      // Skip whitespace after the comma inside function calls
-      while (index + 1 < value.length && value[index + 1] === ' ') {
-        index++;
-      }
-    } else {
-      result += character;
-    }
-  }
-  return result;
-}
-
-/**
- * Strips leading zeros from decimal numbers in a custom property value
- * (e.g. `0.5` becomes `.5`, `-0.02em` becomes `-.02em`).
- *
- * @param  {string} value  The custom property value string.
- * @return {string}        The value with leading zeros removed from decimals.
- */
-function stripLeadingZerosFromDecimals (value) {
-  // Match a boundary (start, whitespace, comma, open-paren), optional sign, then leading zeros before a decimal
-  return value.replace(/(^|\s|,|\()(-?)0+(\.\d+)/g, '$1$2$3');
-}
-
-/**
- * Processes CSS comments within a custom property value. If the value
- * consists entirely of a comment, the comment is removed (producing an
- * empty value). If comments appear between other tokens, their content
- * is stripped but empty comment delimiters are kept as zero-width
- * token separators to preserve the token sequence.
- *
- * @param  {string} value  The raw custom property value string.
- * @return {string}        The value with comments processed.
- */
-function processCustomPropertyComments (value) {
-  // Match values that are entirely a comment (with optional surrounding whitespace)
-  const commentOnlyPattern = /^\s*\/\*.*?\*\/\s*$/s;
-  if (commentOnlyPattern.test(value)) {
-    return '';
-  }
-  // Strip comment content but keep empty markers as token separators
-  return value.replace(/\/\*.*?\*\//g, '/**/');
-}
-
-/**
- * Collapses whitespace in a custom property value while preserving
- * token boundaries. Each whitespace sequence is reduced to a single
- * space, spaces after commas inside function calls are removed, and
- * leading zeros on decimal numbers are stripped.
- *
- * @param  {string} value  The raw custom property value string.
- * @return {string}        The minified custom property value.
- */
-function collapseCustomPropertyWhitespace (value) {
-  // Collapse all whitespace sequences (newlines, tabs, multiple spaces) to a single space
-  let collapsed = value.replace(/\s+/g, ' ');
-  // Remove spaces after commas only inside function calls (e.g. var(--bar, 1.5) → var(--bar,1.5))
-  collapsed = removeSpacesAfterCommasInsideFunctions(collapsed);
-  // Strip leading zeros from decimals (e.g. 0.5 → .5, -0.02em → -.02em)
-  collapsed = stripLeadingZerosFromDecimals(collapsed);
-  return collapsed;
-}
-
 /**
  * Converts a parsed CSS AST rule node into a minified CSS string, dispatching to specialized handlers for each rule type including selectors, `@media`, `@keyframes`, `@layer`, and other at-rules.
  *
@@ -548,6 +223,15 @@ function stringifyRule (rule, context, nested = false) {
         minified = mergeAdjacentWherePseudoClasses(minified);
         return minified;
       });
+      // When this rule is a nesting parent, its whole selector list is treated
+      // as :is() for the children's specificity, so a top-level :is() can be
+      // safely lifted into the list without altering specificity.
+      const isNestingParent = (rule.declarations || []).some((declaration) => {
+        return declaration.type === 'rule';
+      });
+      if (isNestingParent) {
+        uniqueSelectors = uniqueSelectors.flatMap(flattenNestingParentIsSelector);
+      }
       uniqueSelectors = uniqueSelectors.flatMap(processIsSelector);
       uniqueSelectors = [...new Set(uniqueSelectors)];
       const headingSet = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
@@ -639,8 +323,11 @@ function stringifyRule (rule, context, nested = false) {
 
   if (rule.type === 'media') {
     const normalizedMedia = normalizeMedia(rule.media);
+    // A custom-media reference is a parenthesized dashed-ident like (--modern);
+    // no space is needed after @media when the query begins with such a token.
+    const isCustomMediaReference = normalizedMedia.startsWith('(--');
     let separator;
-    if (nested && normalizedMedia.startsWith('(')) {
+    if ((nested && normalizedMedia.startsWith('(')) || isCustomMediaReference) {
       separator = '';
     } else {
       separator = ' ';
@@ -796,6 +483,31 @@ function stringifyRule (rule, context, nested = false) {
   }
 
   if (rule.type === 'property') {
+    const propertyDeclarations = (rule.declarations || []).filter((declaration) => {
+      return declaration.type === 'declaration' && declaration.property;
+    });
+    const hasSyntaxDescriptor = propertyDeclarations.some((declaration) => {
+      return declaration.property === 'syntax';
+    });
+    const hasInheritsDescriptor = propertyDeclarations.some((declaration) => {
+      return declaration.property === 'inherits';
+    });
+    if (!hasSyntaxDescriptor || !hasInheritsDescriptor) {
+      return '';
+    }
+
+    const syntaxDeclaration = propertyDeclarations.find((declaration) => {
+      return declaration.property === 'syntax';
+    });
+    const syntaxValue = (syntaxDeclaration.value || '').replace(/["']/g, '').trim();
+    const isUniversalSyntax = syntaxValue === '*';
+    const hasInitialValue = propertyDeclarations.some((declaration) => {
+      return declaration.property === 'initial-value';
+    });
+    if (!isUniversalSyntax && !hasInitialValue) {
+      return '';
+    }
+
     let renderedDeclarations = stringifyDeclarations(rule.declarations || []);
     if (!renderedDeclarations) {
       return '';
@@ -905,6 +617,18 @@ function stringifyRule (rule, context, nested = false) {
     return '';
   }
 
+  if (rule.type === 'custom-media') {
+    // Collapse whitespace, strip spaces around commas, and tighten parentheses
+    const condition = (rule.media || '')
+      .replace(/\s+/g, ' ')
+      .replace(/\s*,\s*/g, ',')
+      .replace(/\(\s+/g, '(')
+      .replace(/\s+\)/g, ')')
+      .trim();
+    const conditionSeparator = condition ? ' ' : '';
+    return '@custom-media ' + rule.name + conditionSeparator + condition + ';';
+  }
+
   if (rule.type === 'at-rule') {
     return stringifyAtRule(rule, context);
   }