@thejaredwilcurt/csslop 0.0.50 → 0.0.52

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/pre/start.js",
@@ -37,7 +37,7 @@
     "eslint-plugin-import-x": "^4.17.0",
     "eslint-plugin-jsdoc": "^65.4.2",
     "fflate": "^0.8.3",
-    "globals": "^17.13.0",
+    "globals": "^17.14.0",
     "pretty-ms": "^10.0.0",
     "real-world-css-libraries": "^1.0.9",
     "vite": "^8.3.5"

package/src/declarations/process.js

@@ -106,6 +106,33 @@ function collectCandidateShorthands (declaredProperties) {
  */
 const PARSE_TIME_FALLBACK_MARKERS = ['calc(', 'env(', '-webkit-'];
 
+/**
+ * Vendor-prefixed gradient functions that should be removed when the standard
+ * version is present. These are obsolete as all modern browsers support the
+ * unprefixed versions.
+ *
+ * @type {Array}
+ */
+const VENDOR_PREFIXED_GRADIENTS = [
+  '-moz-linear-gradient',
+  '-webkit-linear-gradient',
+  '-o-linear-gradient',
+  '-ms-linear-gradient'
+];
+
+/**
+ * Vendor-prefixed display values that should be removed when the standard
+ * version is present. These are obsolete as all modern browsers support the
+ * unprefixed versions.
+ *
+ * @type {Array}
+ */
+const VENDOR_PREFIXED_DISPLAY_VALUES = [
+  '-webkit-box',
+  '-ms-flexbox',
+  '-webkit-flex'
+];
+
 /**
  * Determines whether a value relies on syntax that older browsers cannot parse,
  * which means a preceding declaration for the same property is an intentional
@@ -120,6 +147,61 @@ function needsParseTimeFallback (value) {
   });
 }
 
+/**
+ * Determines whether a value uses a vendor-prefixed gradient function.
+ *
+ * @param  {string}  value  The minified CSS value string.
+ * @return {boolean}        Whether the value contains a vendor-prefixed gradient.
+ */
+function usesVendorPrefixedGradient (value) {
+  return VENDOR_PREFIXED_GRADIENTS.some((gradient) => {
+    return value.includes(gradient);
+  });
+}
+
+/**
+ * Extracts the standard gradient from a vendor-prefixed gradient value by
+ * replacing the vendor prefix with the standard name.
+ *
+ * @param  {string} value  The minified CSS value string.
+ * @return {string}        The value with vendor prefixes replaced.
+ */
+function normalizeVendorPrefixedGradient (value) {
+  let normalized = value;
+  for (const prefixedGradient of VENDOR_PREFIXED_GRADIENTS) {
+    normalized = normalized.replace(prefixedGradient, 'linear-gradient');
+  }
+  return normalized;
+}
+
+/**
+ * Determines whether a value uses a vendor-prefixed display value.
+ *
+ * @param  {string}  value  The minified CSS value string.
+ * @return {boolean}        Whether the value contains a vendor-prefixed display value.
+ */
+function usesVendorPrefixedDisplayValue (value) {
+  return VENDOR_PREFIXED_DISPLAY_VALUES.some((displayValue) => {
+    return value === displayValue;
+  });
+}
+
+/**
+ * Normalizes a vendor-prefixed display value to its standard equivalent.
+ *
+ * @param  {string} value  The minified CSS value string.
+ * @return {string}        The normalized display value.
+ */
+function normalizeVendorPrefixedDisplayValue (value) {
+  // Map vendor-prefixed display values to their standard equivalents
+  const displayValueMap = {
+    '-webkit-box': 'flex',
+    '-ms-flexbox': 'flex',
+    '-webkit-flex': 'flex'
+  };
+  return displayValueMap[value] || value;
+}
+
 /**
  * Creates the bookkeeping for the declarations that survive deduplication.
  *
@@ -197,6 +279,21 @@ function findLastPositionOfProperty (survivors, property) {
   return positions[positions.length - 1];
 }
 
+/**
+ * Finds all surviving declarations that set a given property, in source order.
+ *
+ * @param  {object} survivors  The surviving-declaration bookkeeping.
+ * @param  {string} property   The property name to look for.
+ * @return {Array}             The positions of all matching declarations, in source order.
+ */
+function findAllPositionsOfProperty (survivors, property) {
+  const positions = survivors.positionsByProperty.get(property);
+  if (!positions?.length) {
+    return [];
+  }
+  return [...positions];
+}
+
 /**
  * Finds the surviving vendor-prefixed declarations that set a prefixed form of
  * a property, such as `-webkit-transform` for `transform`, including legacy
@@ -264,6 +361,11 @@ function deduplicateDeclarations (declarations) {
 
     const minifiedValue = minifyValue(declaration);
 
+    // IE6 hack properties starting with * are obsolete and should be removed
+    if (propertyName.startsWith('*')) {
+      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('--')) {
@@ -273,7 +375,7 @@ function deduplicateDeclarations (declarations) {
       }
     }
 
-    const previousPosition = findLastPositionOfProperty(survivors, propertyName);
+    let previousPosition = findLastPositionOfProperty(survivors, propertyName);
 
     // An unprefixed property with the same value also replaces every prefixed form of it
     let prefixedPositions = [];
@@ -288,6 +390,22 @@ function deduplicateDeclarations (declarations) {
       }
     }
 
+    // For display property, remove vendor-prefixed values when standard version is present
+    if (propertyName === 'display' && !usesVendorPrefixedDisplayValue(minifiedValue)) {
+      const allPositions = findAllPositionsOfProperty(survivors, propertyName);
+      for (const position of allPositions) {
+        const existingValue = minifyValue(survivors.slots[position]);
+        if (
+          usesVendorPrefixedDisplayValue(existingValue) &&
+          normalizeVendorPrefixedDisplayValue(existingValue) === minifiedValue
+        ) {
+          dropDeclaration(survivors, position);
+        }
+      }
+      // Recalculate previous position after dropping declarations
+      previousPosition = findLastPositionOfProperty(survivors, propertyName);
+    }
+
     if (previousPosition !== -1) {
       const previousValue = minifyValue(survivors.slots[previousPosition]);
 
@@ -295,6 +413,42 @@ function deduplicateDeclarations (declarations) {
         continue;
       }
 
+      // When the current value is a simple value that all browsers understand,
+      // remove ALL previous declarations of the same property since the current
+      // one works everywhere and makes all earlier ones redundant
+      if (!needsParseTimeFallback(minifiedValue)) {
+        const allPositions = findAllPositionsOfProperty(survivors, propertyName);
+        for (const position of allPositions) {
+          dropDeclaration(survivors, position);
+        }
+        keepDeclaration(survivors, declaration);
+        continue;
+      }
+
+      // When the current value is a standard gradient and the previous value
+      // is a vendor-prefixed version of the same gradient, remove the prefixed one
+      if (
+        !usesVendorPrefixedGradient(minifiedValue) &&
+        usesVendorPrefixedGradient(previousValue) &&
+        normalizeVendorPrefixedGradient(previousValue) === minifiedValue
+      ) {
+        dropDeclaration(survivors, previousPosition);
+        keepDeclaration(survivors, declaration);
+        continue;
+      }
+
+      // When the current value is a standard display value and the previous value
+      // is a vendor-prefixed version that maps to the same standard value, remove the prefixed one
+      if (
+        !usesVendorPrefixedDisplayValue(minifiedValue) &&
+        usesVendorPrefixedDisplayValue(previousValue) &&
+        normalizeVendorPrefixedDisplayValue(previousValue) === minifiedValue
+      ) {
+        dropDeclaration(survivors, previousPosition);
+        keepDeclaration(survivors, declaration);
+        continue;
+      }
+
       // Fallbacks for functions older browsers cannot parse should be kept
       if (needsParseTimeFallback(minifiedValue) && !needsParseTimeFallback(previousValue)) {
         keepDeclaration(survivors, declaration);

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

@@ -163,19 +163,56 @@ function nestFlatRules (rules) {
   const result = [];
   const indexBySelector = new Map();
   for (const rule of rules) {
-    if (rule.type !== 'rule' || rule.selectors?.length !== 1) {
+    if (rule.type !== 'rule') {
       result.push(rule);
       continue;
     }
-    const childSelector = rule.selectors[0].trim();
-    const nesting = findNestingParent(result, indexBySelector, childSelector);
-    if (nesting) {
-      const parentRule = result[nesting.parentIndex];
-      parentRule.declarations = parentRule.declarations || [];
-      parentRule.declarations.push({ ...rule, selectors: [nesting.nestedSelector] });
+    if (rule.selectors?.length === 1) {
+      const childSelector = rule.selectors[0].trim();
+      const nesting = findNestingParent(result, indexBySelector, childSelector);
+      if (nesting) {
+        const parentRule = result[nesting.parentIndex];
+        parentRule.declarations = parentRule.declarations || [];
+        parentRule.declarations.push({ ...rule, selectors: [nesting.nestedSelector] });
+        continue;
+      }
+      indexBySelector.set(childSelector, result.length);
+      result.push(rule);
+      continue;
+    }
+    if (rule.selectors?.length > 1) {
+      const nestedSelectors = [];
+      let commonParentIndex = null;
+      let canNestAll = true;
+
+      for (const childSelector of rule.selectors) {
+        const nesting = findNestingParent(result, indexBySelector, childSelector.trim());
+        if (!nesting) {
+          canNestAll = false;
+          break;
+        }
+        if (commonParentIndex === null) {
+          commonParentIndex = nesting.parentIndex;
+        } else if (nesting.parentIndex !== commonParentIndex) {
+          canNestAll = false;
+          break;
+        }
+        nestedSelectors.push(nesting.nestedSelector);
+      }
+
+      if (canNestAll && commonParentIndex !== null) {
+        const parentRule = result[commonParentIndex];
+        parentRule.declarations = parentRule.declarations || [];
+        parentRule.declarations.push({ ...rule, selectors: nestedSelectors });
+        continue;
+      }
+
+      for (const selector of rule.selectors) {
+        indexBySelector.set(selector.trim(), result.length);
+      }
+      result.push(rule);
       continue;
     }
-    indexBySelector.set(childSelector, result.length);
     result.push(rule);
   }
   for (const rule of result) {

package/src/rules/stringify.js

@@ -465,6 +465,19 @@ function stringifyRule (rule, context) {
 
     declarations = processDeclarations(declarations, context);
 
+    // Check if the rule is now effectively empty after processing declarations
+    const isEffectivelyEmptyAfterProcessing = (
+      declarations.length === 0 ||
+      declarations.every((declaration) => {
+        return (
+          declaration.type === 'comment' && !declaration.comment?.startsWith('!')
+        );
+      })
+    );
+    if (isEffectivelyEmptyAfterProcessing) {
+      return '';
+    }
+
     // We need to properly output nested rules vs normal declarations.
     // Wait, the processDeclarations will now correctly keep 'rule' types because we push them in processDeclarations.
     // If we have `.foo { .bar { color: red; } }`, the inner rule is a declaration of type 'rule' with selectors: ['.bar'].