@thejaredwilcurt/csslop 0.0.52 → 0.0.53

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.52",
+  "version": "0.0.53",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/pre/start.js",
@@ -35,12 +35,12 @@
     "eslint-config-tjw-import-x": "^1.0.1",
     "eslint-config-tjw-jsdoc": "^2.0.1",
     "eslint-plugin-import-x": "^4.17.0",
-    "eslint-plugin-jsdoc": "^65.4.2",
+    "eslint-plugin-jsdoc": "^65.4.4",
     "fflate": "^0.8.3",
     "globals": "^17.14.0",
     "pretty-ms": "^10.0.0",
     "real-world-css-libraries": "^1.0.9",
-    "vite": "^8.3.5"
+    "vite": "^8.3.6"
   },
   "author": "The Jared Wilcurt",
   "homepage": "https://github.com/TheJaredWilcurt/csslop#readme",
@@ -61,7 +61,7 @@
     },
     "packageManager": {
       "name": "npm",
-      "version": "12.2.1"
+      "version": "12.2.2"
     }
   }
 }

package/src/declarations/process.js

@@ -186,6 +186,17 @@ function usesVendorPrefixedDisplayValue (value) {
   });
 }
 
+/**
+ * Checks if a declaration value contains the IE6-IE9 double !important hack.
+ *
+ * @param  {string}  value  The minified CSS value string.
+ * @return {boolean}        Whether the value contains double !important.
+ */
+function hasDoubleImportant (value) {
+  // Match !important appearing twice in the value
+  return /!important.*!important/.test(value);
+}
+
 /**
  * Normalizes a vendor-prefixed display value to its standard equivalent.
  *
@@ -366,6 +377,11 @@ function deduplicateDeclarations (declarations) {
       continue;
     }
 
+    // IE6-IE9 double !important properties are invalid and should be removed
+    if (hasDoubleImportant(minifiedValue)) {
+      continue;
+    }
+
     // A vendor-prefixed property that repeats the value of its unprefixed
     // form is dead code for browsers that read the unprefixed one
     if (propertyName.startsWith('-') && !propertyName.startsWith('--')) {

package/src/rules/normalize.js

@@ -141,6 +141,17 @@ function normalizeLayerNames (layerNames) {
   return String(layerNames ?? '').trim().replace(/\s*,\s*/g, ',');
 }
 
+/**
+ * Checks if a media query contains the IE10/IE11 exclusive `\0` hack.
+ *
+ * @param  {string}  media  The media query string to check.
+ * @return {boolean}        True if the media query contains the IE hack.
+ */
+function containsIEHack (media) {
+  // Match the \0 character which is used as an IE10/IE11 exclusive hack
+  return /\\0/.test(media);
+}
+
 /**
  * Normalizes a `@media` query string by collapsing whitespace, stripping the default "all and" prefix, and converting min/max-width to range syntax.
  *
@@ -236,6 +247,7 @@ function canUnwrapSupports (supports) {
 
 export {
   canUnwrapSupports,
+  containsIEHack,
   normalizeLayerNames,
   normalizeMedia,
   normalizeRuleSelectors,

package/src/rules/optimize/at-rules.js

@@ -3,10 +3,26 @@
  */
 
 import {
+  containsIEHack,
   normalizeLayerNames,
   normalizeMedia
 } from '../normalize.js';
 
+/**
+ * Removes `@media` rules that contain IE10/IE11 exclusive hacks (the `\0` character).
+ *
+ * @param  {Array} rules  The AST rule nodes to process.
+ * @return {Array}        A new array of rules with IE-exclusive media queries removed.
+ */
+function removeIEMediaRules (rules) {
+  return rules.filter((rule) => {
+    if (rule.type === 'media' && containsIEHack(rule.media)) {
+      return false;
+    }
+    return true;
+  });
+}
+
 /**
  * Merges adjacent `@media` rules that share an identical normalized query string and deduplicates their child selector rules.
  *
@@ -109,5 +125,6 @@ function mergeLayerRules (rules, mergeSelectorRules) {
 export {
   deduplicateKeyframes,
   mergeLayerRules,
-  mergeMediaRules
+  mergeMediaRules,
+  removeIEMediaRules
 };

package/src/rules/optimize/index.js

@@ -5,7 +5,8 @@
 import {
   deduplicateKeyframes,
   mergeLayerRules,
-  mergeMediaRules
+  mergeMediaRules,
+  removeIEMediaRules
 } from './at-rules.js';
 import { removeEmptyRules } from './empty-rules.js';
 import { expandPureNestedRules } from './expand-nesting.js';
@@ -43,6 +44,7 @@ function clearSelectorCaches () {
  */
 function optimizeRuleList (rules) {
   let result = expandPureNestedRules(rules);
+  result = removeIEMediaRules(result);
   result = mergeLayerRules(result, mergeSelectorRules);
   result = mergeMediaRules(result, mergeSelectorRules);
   result = deduplicateKeyframes(result);

package/src/rules/optimize/merge-declarations.js

@@ -175,7 +175,193 @@ function mergeRuleIntoPredecessor (previousRule, rule) {
 }
 
 /**
- * Merges consecutive rules whose declarations are a subset of the following rule, combining their selectors and splitting out any extra declarations.
+ * Finds properties that are present in all adjacent rules with matching values.
+ *
+ * @param  {Array} adjacentRules  The consecutive rule nodes to compare.
+ * @return {Map}                  Map of property name to value for properties common to all rules.
+ */
+function findCommonProperties (adjacentRules) {
+  if (adjacentRules.length < 2) {
+    return new Map();
+  }
+
+  const firstRuleBody = partitionRuleBody(adjacentRules[0].declarations);
+  const commonProperties = new Map(
+    firstRuleBody.plainDeclarations.map((declaration) => {
+      return [declaration.property, (declaration.value || '').trim()];
+    })
+  );
+
+  for (let ruleIndex = 1; ruleIndex < adjacentRules.length; ruleIndex++) {
+    const currentRuleBody = partitionRuleBody(adjacentRules[ruleIndex].declarations);
+    const currentValueByProperty = new Map(
+      currentRuleBody.plainDeclarations.map((declaration) => {
+        return [declaration.property, (declaration.value || '').trim()];
+      })
+    );
+
+    for (const [property, value] of commonProperties) {
+      if (currentValueByProperty.get(property) !== value) {
+        commonProperties.delete(property);
+      }
+    }
+  }
+
+  return commonProperties;
+}
+
+/**
+ * Checks if a rule contains the `all` property, which resets all other properties.
+ *
+ * @param  {object}  rule  The rule node to check.
+ * @return {boolean}       True if the rule contains the `all` property.
+ */
+function hasAllProperty (rule) {
+  const ruleBody = partitionRuleBody(rule.declarations);
+  return ruleBody.plainDeclarations.some((declaration) => {
+    return declaration.property === 'all';
+  });
+}
+
+/**
+ * Checks if any rule in a list contains the `all` property.
+ *
+ * @param  {Array}   rules  The rule nodes to check.
+ * @return {boolean}        True if any rule contains the `all` property.
+ */
+function anyRuleHasAllProperty (rules) {
+  return rules.some(hasAllProperty);
+}
+
+/**
+ * Checks if any rule has nested blocks.
+ *
+ * @param  {Array}   rules  The rule nodes to check.
+ * @return {boolean}        True if any rule has nested blocks.
+ */
+function anyRuleHasNestedBlocks (rules) {
+  return rules.some((rule) => {
+    const ruleBody = partitionRuleBody(rule.declarations);
+    return ruleBody.nestedBlocks.length > 0;
+  });
+}
+
+/**
+ * Combines adjacent rules that share common properties by creating a merged rule
+ * with all properties from the first rule, and keeping only the differing properties
+ * in each subsequent rule.
+ *
+ * @param  {Array} adjacentRules  The consecutive rule nodes to merge.
+ * @param  {Map}   commonProps    The properties common to all rules.
+ * @return {Array}                The rules after merging common properties.
+ */
+function mergeCommonProperties (adjacentRules, commonProps) {
+  if (commonProps.size === 0) {
+    return adjacentRules;
+  }
+
+  // Skip merging if any rule has the `all` property
+  if (anyRuleHasAllProperty(adjacentRules)) {
+    return adjacentRules;
+  }
+
+  // Skip merging if any rule has nested blocks
+  if (anyRuleHasNestedBlocks(adjacentRules)) {
+    return adjacentRules;
+  }
+
+  const firstRuleBody = partitionRuleBody(adjacentRules[0].declarations);
+
+  const combinedSelectors = [];
+  for (const rule of adjacentRules) {
+    combinedSelectors.push(...rule.selectors);
+  }
+
+  const mergedRule = {
+    ...adjacentRules[0],
+    selectors: deduplicateSelectors(combinedSelectors),
+    declarations: firstRuleBody.plainDeclarations
+  };
+
+  const result = [mergedRule];
+
+  for (let ruleIndex = 1; ruleIndex < adjacentRules.length; ruleIndex++) {
+    const rule = adjacentRules[ruleIndex];
+    const ruleBody = partitionRuleBody(rule.declarations);
+    const differingDeclarations = ruleBody.plainDeclarations.filter((declaration) => {
+      const firstRuleValue = firstRuleBody.plainDeclarations.find((decl) => {
+        return decl.property === declaration.property;
+      });
+      if (!firstRuleValue) {
+        return true;
+      }
+      return (declaration.value || '').trim() !== (firstRuleValue.value || '').trim();
+    });
+
+    if (differingDeclarations.length > 0) {
+      result.push({
+        ...rule,
+        declarations: differingDeclarations
+      });
+    }
+  }
+
+  // Check if the merge actually reduces size
+  const originalSize = adjacentRules.reduce((sum, rule) => {
+    return sum + calculateRuleSize(rule);
+  }, 0);
+
+  const mergedSize = result.reduce((sum, rule) => {
+    return sum + calculateRuleSize(rule);
+  }, 0);
+
+  if (mergedSize >= originalSize) {
+    return adjacentRules;
+  }
+
+  return result;
+}
+
+/**
+ * Calculates the approximate character size of a rule's selectors.
+ *
+ * @param  {object} rule  The rule node.
+ * @return {number}       The total character count of all selectors.
+ */
+function calculateSelectorSize (rule) {
+  if (!rule.selectors) {
+    return 0;
+  }
+  return rule.selectors.join(',').length;
+}
+
+/**
+ * Calculates the approximate character size of a rule's declarations.
+ *
+ * @param  {object} rule  The rule node.
+ * @return {number}       The total character count of all declarations.
+ */
+function calculateDeclarationSize (rule) {
+  const ruleBody = partitionRuleBody(rule.declarations);
+  let size = 0;
+  for (const declaration of ruleBody.plainDeclarations) {
+    size += declaration.property.length + 1 + (declaration.value || '').length;
+  }
+  return size;
+}
+
+/**
+ * Calculates the approximate character size of a rule.
+ *
+ * @param  {object} rule  The rule node.
+ * @return {number}       The total character count of the rule.
+ */
+function calculateRuleSize (rule) {
+  return calculateSelectorSize(rule) + calculateDeclarationSize(rule);
+}
+
+/**
+ * Merges consecutive rules whose declarations are a subset of the following rule, combining their selectors and splitting out any extra declarations. Also combines common properties across adjacent rules.
  *
  * @param  {Array} rules  The AST rule nodes to merge.
  * @return {Array}        A new array of rules with declaration-compatible consecutive rules combined.
@@ -191,7 +377,36 @@ function mergeByDeclarations (rules) {
     }
     result.push(rule);
   }
-  return result;
+
+  // Pass to combine common properties across adjacent rules
+  const finalResult = [];
+  let adjacentRules = [];
+
+  for (const rule of result) {
+    if (rule.type === 'rule' && rule.selectors?.length) {
+      adjacentRules.push(rule);
+    } else {
+      if (adjacentRules.length >= 2) {
+        const commonProps = findCommonProperties(adjacentRules);
+        const merged = mergeCommonProperties(adjacentRules, commonProps);
+        finalResult.push(...merged);
+      } else if (adjacentRules.length === 1) {
+        finalResult.push(adjacentRules[0]);
+      }
+      adjacentRules = [];
+      finalResult.push(rule);
+    }
+  }
+
+  if (adjacentRules.length >= 2) {
+    const commonProps = findCommonProperties(adjacentRules);
+    const merged = mergeCommonProperties(adjacentRules, commonProps);
+    finalResult.push(...merged);
+  } else if (adjacentRules.length === 1) {
+    finalResult.push(adjacentRules[0]);
+  }
+
+  return finalResult;
 }
 
 export {