@thejaredwilcurt/csslop 0.0.4 → 0.0.6

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.4",
+  "version": "0.0.6",
   "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/rules/stringify.js

@@ -283,8 +283,8 @@ function stringifyRule (rule, context, nested = false) {
 
         // Minify double-quoted attribute selectors: remove inner whitespace and escape when shorter
         minified = minified.replace(/\[\s*([^=]+)\s*=\s*"(.*?)"\s*\]/g, (match, attribute, value) => {
-          // Escape special characters that require quoting, and compare lengths
-          let escaped = value.replace(/([#.:/])/g, '\\$1');
+          // Escape special characters that require quoting (spaces, #, ., :, /), and compare lengths
+          let escaped = value.replace(/([ #.:/])/g, '\\$1');
           if (escaped.length < value.length + 2) {
             return '[' + attribute + '=' + escaped + ']';
           }
@@ -292,8 +292,8 @@ function stringifyRule (rule, context, nested = false) {
         });
         // Minify single-quoted attribute selectors: remove inner whitespace and escape when shorter
         minified = minified.replace(/\[\s*([^=]+)\s*=\s*'(.*?)'\s*\]/g, (match, attribute, value) => {
-          // Escape special characters that require quoting, and compare lengths
-          let escaped = value.replace(/([#.:/])/g, '\\$1');
+          // Escape special characters that require quoting (spaces, #, ., :, /), and compare lengths
+          let escaped = value.replace(/([ #.:/])/g, '\\$1');
           if (escaped.length < value.length + 2) {
             return '[' + attribute + '=' + escaped + ']';
           }
@@ -301,8 +301,8 @@ function stringifyRule (rule, context, nested = false) {
         });
         // Minify unquoted attribute selectors: quote when unescaping produces a shorter result
         minified = minified.replace(/\[\s*([^=]+)\s*=\s*([^"'].*?)\s*\]/g, (match, attribute, value) => {
-          // Unescape special characters and compare with quoted form
-          let unescaped = value.replace(/\\([#.:/])/g, '$1');
+          // Unescape special characters (spaces, #, ., :, /) and compare with quoted form
+          let unescaped = value.replace(/\\([ #.:/])/g, '$1');
           if (unescaped.length + 2 < value.length) {
             return '[' + attribute + '="' + unescaped + '"]';
           }