@thejaredwilcurt/csslop 0.0.5 → 0.0.7

package/README.md

@@ -14,7 +14,7 @@
 
 * Use the tests from the open source, 3rd-party, CSS minification auditing library [css-minify-tests](https://github.com/keithamus/css-minify-tests).
 * Have AI completely generate the library logic to pass all tests.
-* Have me (an experienced library author) validate the outcomes and [make upstream corrections](https://github.com/keithamus/css-minify-tests/pulls?q=is%3Apr+author%3ATheJaredWilcurt) to the tests library.
+* Have me (an experienced library author) validate the outcomes and [make upstream corrections](https://github.com/keithamus/css-minify-tests/issues?q=author%3ATheJaredWilcurt) to the tests library.
 
 **The Results:**
 

package/package.json

@@ -2,12 +2,12 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Experimental CSS minification",
   "scripts": {
     "copy": "node ./scripts/copyTests.js",
-    "test": "node ./tests/css/index.test.js",
-    "real": "node ./tests/css/realworld.test.js",
+    "test": "node ./tests/index.test.js",
+    "real": "node ./tests/realworld.test.js",
     "lint": "eslint *.js scripts src tests --fix",
     "bump": "npx --yes -- @jsdevtools/version-bump-prompt && npm i",
     "publish": "npm publish --access=public"

package/src/index.js

@@ -20,11 +20,13 @@ import {
 import {
   deduplicateKeyframes,
   expandPureNestedRules,
+  factorCommonParents,
   mergeByDeclarations,
   mergeLayerRules,
   mergeMediaRules,
   mergeSelectorRules,
-  nestFlatRules
+  nestFlatRules,
+  removeEmptyRules
 } from './rules/optimize.js';
 import { stringifyRule } from './rules/stringify.js';
 import { minifyValue } from './value/minify.js';
@@ -84,7 +86,10 @@ export const minifyCSS = function (input) {
 
     const mergedRules = mergeSelectorRules(ast.stylesheet.rules);
     const declarationMergedRules = mergeByDeclarations(mergedRules);
-    const finalRules = nestFlatRules(declarationMergedRules);
+    const nestedRules = nestFlatRules(declarationMergedRules);
+    const nonEmptyRules = removeEmptyRules(nestedRules);
+    const factoredRules = factorCommonParents(nonEmptyRules);
+    const finalRules = nestFlatRules(factoredRules);
 
     for (const rule of finalRules) {
       output.push(stringifyRule(rule, context));

package/src/rules/optimize.js

@@ -123,6 +123,50 @@ function tryNestSelector (parentSel, childSel) {
   return null;
 }
 
+/**
+ * Determines whether a rule is effectively empty, containing no meaningful
+ * CSS output after minification. A rule is effectively empty when it has
+ * no declarations, or all of its entries are whitespace, non-important
+ * comments, or recursively empty nested rules.
+ *
+ * @param  {object}  rule  The AST rule node to evaluate.
+ * @return {boolean}       True if the rule produces no CSS output.
+ */
+function isRuleEffectivelyEmpty (rule) {
+  if (rule.type !== 'rule') {
+    return false;
+  }
+  const nonWhitespaceEntries = (rule.declarations || []).filter((declaration) => {
+    return declaration.type !== 'whitespace';
+  });
+  if (nonWhitespaceEntries.length === 0) {
+    return true;
+  }
+  return nonWhitespaceEntries.every((entry) => {
+    if (entry.type === 'comment') {
+      return !entry.comment?.startsWith('!');
+    }
+    if (entry.type === 'rule') {
+      return isRuleEffectivelyEmpty(entry);
+    }
+    return false;
+  });
+}
+
+/**
+ * Filters out effectively empty rules from the rules array, preventing
+ * empty rules from being nested into parent rules during later
+ * optimization passes and producing incorrect non-empty output.
+ *
+ * @param  {Array} rules  The AST rule nodes to filter.
+ * @return {Array}        A new array with effectively empty rules removed.
+ */
+function removeEmptyRules (rules) {
+  return rules.filter((rule) => {
+    return !isRuleEffectivelyEmpty(rule);
+  });
+}
+
 /**
  * Groups flat CSS rules into nested structures where a child selector can be expressed relative to a preceding parent, reducing output size through CSS nesting.
  *
@@ -171,6 +215,102 @@ function nestFlatRules (rules) {
   return result;
 }
 
+/**
+ * Extracts the leading compound selector of a complex selector: everything up to
+ * the first top-level combinator (descendant whitespace, `>`, `+`, or `~`).
+ * Combinator characters nested inside `()` or `[]` (such as `:nth-child(2n+1)` or
+ * `[a~=b]`) are ignored so only structural combinators split the selector.
+ *
+ * @param  {string}      selector  The selector string to inspect.
+ * @return {string|null}           The leading compound selector, or null when the selector has no descendant part to factor out.
+ */
+function extractLeadingCompound (selector) {
+  const trimmed = selector.trim();
+  let bracketDepth = 0;
+  for (let index = 0; index < trimmed.length; index++) {
+    const character = trimmed[index];
+    if (character === '(' || character === '[') {
+      bracketDepth++;
+    } else if (character === ')' || character === ']') {
+      bracketDepth--;
+    } else if (
+      bracketDepth === 0 &&
+      (character === ' ' || character === '>' || character === '+' || character === '~')
+    ) {
+      const compound = trimmed.slice(0, index).trim();
+      return compound.length ? compound : null;
+    }
+  }
+  return null;
+}
+
+/**
+ * Groups consecutive sibling rules that share a common leading compound selector
+ * (such as `.foo` in `.foo .a`, `.foo .b`) into a synthesized parent rule with the
+ * shared portion factored out, but only when nesting trims more characters from the
+ * child selectors than the wrapper itself costs.
+ *
+ * @param  {Array} rules  The flat AST rule nodes to factor.
+ * @return {Array}        A new array of rules with shared parent selectors factored into nesting wrappers.
+ */
+function factorCommonParents (rules) {
+  const result = [];
+  let index = 0;
+  while (index < rules.length) {
+    const rule = rules[index];
+    // Only single-selector style rules can act as a factoring candidate.
+    if (rule.type !== 'rule' || rule.selectors?.length !== 1) {
+      result.push(rule);
+      index++;
+      continue;
+    }
+    const candidateParent = extractLeadingCompound(rule.selectors[0]);
+    if (candidateParent === null) {
+      result.push(rule);
+      index++;
+      continue;
+    }
+    // Collect the run of consecutive rules that can all nest under the candidate.
+    const run = [];
+    const nestedForms = [];
+    let lookahead = index;
+    while (lookahead < rules.length) {
+      const sibling = rules[lookahead];
+      if (sibling.type !== 'rule' || sibling.selectors?.length !== 1) {
+        break;
+      }
+      const nestedSelector = tryNestSelector(candidateParent, sibling.selectors[0]);
+      if (nestedSelector === null) {
+        break;
+      }
+      run.push(sibling);
+      nestedForms.push(nestedSelector);
+      lookahead++;
+    }
+    // The wrapper writes the shared selector once plus its surrounding braces.
+    const wrapperCost = candidateParent.length + 2;
+    const charactersSaved = run.reduce((total, sibling, position) => {
+      return total + sibling.selectors[0].trim().length - nestedForms[position].length;
+    }, 0);
+    if (run.length >= 2 && charactersSaved > wrapperCost) {
+      const children = run.map((sibling, position) => {
+        return { ...sibling, selectors: [nestedForms[position]] };
+      });
+      result.push({
+        type: 'rule',
+        selectors: [candidateParent],
+        // Recurse so deeper shared prefixes among the children also factor out.
+        declarations: factorCommonParents(children)
+      });
+      index = lookahead;
+    } else {
+      result.push(rule);
+      index++;
+    }
+  }
+  return result;
+}
+
 /**
  * Merges adjacent `@media` rules that share an identical normalized query string and deduplicates their child selector rules.
  *
@@ -367,9 +507,11 @@ function mergeLayerRules (rules, mergeSelectorRules) {
 export {
   deduplicateKeyframes,
   expandPureNestedRules,
+  factorCommonParents,
   mergeByDeclarations,
   mergeLayerRules,
   mergeMediaRules,
   mergeSelectorRules,
-  nestFlatRules
+  nestFlatRules,
+  removeEmptyRules
 };

package/src/value/minify.js

@@ -27,6 +27,7 @@ import {
   roundCompactNumber
 } from './shared.js';
 import { minifyTransformValue } from './transforms.js';
+import { optimizeUnicodeRange } from './unicode-range.js';
 
 /**
  * Map of position-area two-keyword values to their single-keyword equivalents.
@@ -692,27 +693,9 @@ function minifyValue (declaration) {
     val = minifyGradients(val);
   }
 
-  // Unicode range compaction: U+0000-00FF -> U+??
+  // Unicode range optimization: dedup, merge overlapping/adjacent, wildcard compression
   if (declaration.property === 'unicode-range') {
-    val = val.replace(/U\+([0-9a-fA-F]+)-([0-9a-fA-F]+)/gi, (match, startHex, endHex) => {
-      const len = Math.max(startHex.length, endHex.length);
-      const s = startHex.padStart(len, '0').toUpperCase();
-      const e = endHex.padStart(len, '0').toUpperCase();
-      let prefixLen = 0;
-      while (prefixLen < len && s[prefixLen] === e[prefixLen]) {
-        prefixLen++;
-      }
-      const suffixS = s.slice(prefixLen);
-      const suffixE = e.slice(prefixLen);
-      // Check if the suffix range spans all values (all-zeros start, all-F end) for wildcard replacement
-      if (/^0*$/.test(suffixS) && /^F*$/i.test(suffixE)) {
-        const wildcardCount = len - prefixLen;
-        // Strip leading zeros from the common prefix
-        const prefix = s.slice(0, prefixLen).replace(/^0+/, '');
-        return 'U+' + prefix + '?'.repeat(wildcardCount);
-      }
-      return match;
-    });
+    val = optimizeUnicodeRange(val);
   }
 
   return val;

package/src/value/unicode-range.js

@@ -0,0 +1,176 @@
+/**
+ * @file Optimizes CSS unicode-range values by deduplicating, merging overlapping
+ * and adjacent ranges, collapsing consecutive single values into ranges, and
+ * applying wildcard compression.
+ */
+
+/**
+ * Parses a single unicode-range token into a numeric start/end pair.
+ * Handles single values (U+1F170), explicit ranges (U+2000-2002),
+ * and wildcard notation (U+4??).
+ *
+ * @param  {string}      token  A trimmed unicode-range token.
+ * @return {object|null}        Object with numeric start and end, or null if unparseable.
+ */
+function parseUnicodeRangeToken (token) {
+  const trimmed = token.trim();
+
+  // Match wildcard notation: U+ followed by optional hex prefix then one or more ?
+  const wildcardMatch = trimmed.match(/^U\+([0-9a-fA-F]*)(\?+)$/i);
+  if (wildcardMatch) {
+    const prefix = wildcardMatch[1] || '';
+    const wildcardCount = wildcardMatch[2].length;
+    const start = parseInt(prefix + '0'.repeat(wildcardCount), 16);
+    const end = parseInt(prefix + 'F'.repeat(wildcardCount), 16);
+    return { start, end };
+  }
+
+  // Match explicit range: U+XXXX-YYYY
+  const rangeMatch = trimmed.match(/^U\+([0-9a-fA-F]+)-([0-9a-fA-F]+)$/i);
+  if (rangeMatch) {
+    return {
+      start: parseInt(rangeMatch[1], 16),
+      end: parseInt(rangeMatch[2], 16)
+    };
+  }
+
+  // Match single code point: U+XXXX
+  const singleMatch = trimmed.match(/^U\+([0-9a-fA-F]+)$/i);
+  if (singleMatch) {
+    const codePoint = parseInt(singleMatch[1], 16);
+    return { start: codePoint, end: codePoint };
+  }
+
+  return null;
+}
+
+/**
+ * Sorts ranges by start value and merges any that overlap or are adjacent
+ * (where the gap between them is zero or negative after +1 adjustment).
+ *
+ * @param  {Array} ranges  Array of {start, end} objects.
+ * @return {Array}         New array of merged {start, end} objects.
+ */
+function mergeOverlappingRanges (ranges) {
+  if (ranges.length <= 1) {
+    return ranges.map((range) => {
+      return { start: range.start, end: range.end };
+    });
+  }
+
+  const sorted = [...ranges].sort((rangeA, rangeB) => {
+    return rangeA.start - rangeB.start || rangeB.end - rangeA.end;
+  });
+
+  const merged = [{ start: sorted[0].start, end: sorted[0].end }];
+  for (let index = 1; index < sorted.length; index++) {
+    const current = sorted[index];
+    const previous = merged[merged.length - 1];
+
+    if (current.start <= previous.end + 1) {
+      previous.end = Math.max(previous.end, current.end);
+    } else {
+      merged.push({ start: current.start, end: current.end });
+    }
+  }
+
+  return merged;
+}
+
+/**
+ * Attempts to express a numeric range as wildcard notation (e.g. U+5??).
+ * Wildcards are only possible when the suffix of the start is all zeros
+ * and the suffix of the end is all F's, meaning the range covers an
+ * entire block aligned to a power-of-16 boundary.
+ *
+ * @param  {number}      start  The range start code point.
+ * @param  {number}      end    The range end code point.
+ * @return {string|null}        Wildcard string like "U+5??", or null if not representable.
+ */
+function tryWildcardNotation (start, end) {
+  if (start > end) {
+    return null;
+  }
+
+  const startHex = start.toString(16).toUpperCase();
+  const endHex = end.toString(16).toUpperCase();
+  const digitCount = Math.max(startHex.length, endHex.length);
+  const paddedStart = startHex.padStart(digitCount, '0');
+  const paddedEnd = endHex.padStart(digitCount, '0');
+
+  let commonPrefixLength = 0;
+  while (commonPrefixLength < digitCount && paddedStart[commonPrefixLength] === paddedEnd[commonPrefixLength]) {
+    commonPrefixLength++;
+  }
+
+  const startSuffix = paddedStart.slice(commonPrefixLength);
+  const endSuffix = paddedEnd.slice(commonPrefixLength);
+
+  // Wildcard requires suffix to span the full 0-F range (all zeros to all F's)
+  const suffixIsAllZeros = /^0+$/.test(startSuffix);
+  const suffixIsAllFs = /^F+$/i.test(endSuffix);
+  if (startSuffix.length > 0 && suffixIsAllZeros && suffixIsAllFs) {
+    const wildcardCount = digitCount - commonPrefixLength;
+    // Strip leading zeros from the fixed-width prefix
+    const prefix = paddedStart.slice(0, commonPrefixLength).replace(/^0+/, '');
+    return 'U+' + prefix + '?'.repeat(wildcardCount);
+  }
+
+  return null;
+}
+
+/**
+ * Formats a single merged range back into the shortest valid unicode-range token.
+ * Tries wildcard notation first, then falls back to explicit range or single value.
+ *
+ * @param  {number} start  The range start code point.
+ * @param  {number} end    The range end code point.
+ * @return {string}        The formatted unicode-range token.
+ */
+function formatUnicodeRange (start, end) {
+  const wildcardForm = tryWildcardNotation(start, end);
+  if (wildcardForm) {
+    return wildcardForm;
+  }
+
+  const startHex = start.toString(16).toUpperCase();
+  if (start === end) {
+    return 'U+' + startHex;
+  }
+
+  const endHex = end.toString(16).toUpperCase();
+  return 'U+' + startHex + '-' + endHex;
+}
+
+/**
+ * Optimizes a CSS unicode-range value by parsing all tokens, merging
+ * overlapping/adjacent/duplicate ranges, and re-encoding with the
+ * shortest possible notation (wildcards where applicable).
+ *
+ * @param  {string} value  The raw unicode-range CSS value (comma-separated tokens).
+ * @return {string}        The optimized unicode-range value.
+ */
+function optimizeUnicodeRange (value) {
+  const tokens = value.split(',');
+
+  const ranges = [];
+  for (const token of tokens) {
+    const parsed = parseUnicodeRangeToken(token);
+    if (parsed) {
+      ranges.push(parsed);
+    }
+  }
+
+  if (ranges.length === 0) {
+    return value;
+  }
+
+  const merged = mergeOverlappingRanges(ranges);
+
+  const formatted = merged.map((range) => {
+    return formatUnicodeRange(range.start, range.end);
+  });
+  return formatted.join(',');
+}
+
+export { optimizeUnicodeRange };