@thejaredwilcurt/csslop 0.0.49 → 0.0.51

package/README.md

@@ -321,6 +321,5 @@ Two different cases:
    * Ensure arrow functions always take up at least 3 lines, with explicit returns when needed.
    * Always comment regex if used.
 1. After all other code edits, run `npm run lint` and ensure the linter passes.
-1. DO NOT, under any circumstance, run `npm run real` (it will kill actual humans)!
 1. When all done, run the `beep` command to alert me you finished.
 ```

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.49",
+  "version": "0.0.51",
   "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/border.js

@@ -3,8 +3,8 @@
  */
 
 import { splitTopLevelComponents } from '../parser/source-search.js';
+import { namedColors } from '../value/color/named.js';
 import { minifyValue } from '../value/minify.js';
-import { namedColors } from '../value/named-colors.js';
 import {
   collapseShorthandParts,
   hasSubstitutedParts

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/index.js

@@ -14,19 +14,19 @@ import {
 import { recordStylesheetResetProperties } from './declarations/reset-hazards.js';
 import { parse } from './parser/index.js';
 import { splitTopLevelCommaList } from './parser/source-search.js';
-import {
-  analyzePositionTryRules,
-  cleanPositionTryRules,
-  collectRuleMetadata,
-  filterUnusedPositionTry
-} from './position-try.js';
 import { preprocessDeclarationBlocks } from './preprocess.js';
 import { combineLanguageSelectors } from './rules/lang.js';
 import { normalizeRuleSelectors } from './rules/normalize.js';
 import {
   clearSelectorCaches,
   optimizeRuleList
-} from './rules/optimize.js';
+} from './rules/optimize/index.js';
+import {
+  analyzePositionTryRules,
+  cleanPositionTryRules,
+  collectRuleMetadata,
+  filterUnusedPositionTry
+} from './rules/position-try.js';
 import { combineLegacyAnySelectors } from './rules/selectors.js';
 import {
   removeRedundantLayerStatementSemicolon,

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

@@ -0,0 +1,113 @@
+/**
+ * @file Consolidates grouping at-rules by merging matching `@media` and `@layer` blocks, and drops the `@keyframes` that a later definition replaces.
+ */
+
+import {
+  normalizeLayerNames,
+  normalizeMedia
+} from '../normalize.js';
+
+/**
+ * Merges adjacent `@media` rules that share an identical normalized query string and deduplicates their child selector rules.
+ *
+ * @param  {Array}                  rules               The AST rule nodes to process.
+ * @param  {function(Array): Array} mergeSelectorRules  Callback to merge selector rules within each media block.
+ * @return {Array}                                      A new array of rules with consecutive identical `@media` blocks combined.
+ */
+function mergeMediaRules (rules, mergeSelectorRules) {
+  const mediaMap = new Map();
+  const result = [];
+  for (const rule of rules) {
+    if (rule.type === 'media') {
+      const normalizedQuery = normalizeMedia(rule.media);
+      if (mediaMap.has(normalizedQuery)) {
+        mediaMap.get(normalizedQuery).rules.push(...(rule.rules || []));
+      } else {
+        mediaMap.set(normalizedQuery, rule);
+        result.push(rule);
+      }
+    } else {
+      // Clearing a map replaces its storage, so an already empty one is left alone
+      if (rule.type !== 'whitespace' && mediaMap.size) {
+        mediaMap.clear();
+      }
+      result.push(rule);
+    }
+  }
+  for (const rule of result) {
+    if (rule.type === 'media' && rule.rules && rule.rules.length) {
+      rule.rules = mergeSelectorRules(rule.rules);
+    }
+  }
+  return result;
+}
+
+/**
+ * Removes duplicate `@keyframes` definitions, keeping only the last occurrence of each named animation.
+ *
+ * @param  {Array} rules  The AST rule nodes to deduplicate.
+ * @return {Array}        A new array of rules with earlier duplicate `@keyframes` removed.
+ */
+function deduplicateKeyframes (rules) {
+  const lastIndexByName = new Map();
+  for (let i = 0; i < rules.length; i++) {
+    if (rules[i].type === 'keyframes' && rules[i].name) {
+      lastIndexByName.set(rules[i].name, i);
+    }
+  }
+  return rules.filter((rule, index) => {
+    if (rule.type === 'keyframes' && rule.name) {
+      return lastIndexByName.get(rule.name) === index;
+    }
+    return true;
+  });
+}
+
+/**
+ * Merges `@layer` blocks with the same name by combining their child rules, deduplicates layer statements, and merges selector rules within each block.
+ *
+ * @param  {Array}                  rules               The AST rule nodes to process.
+ * @param  {function(Array): Array} mergeSelectorRules  Callback to merge selector rules within each layer block.
+ * @return {Array}                                      A new array of rules with same-name `@layer` blocks combined.
+ */
+function mergeLayerRules (rules, mergeSelectorRules) {
+  const layerBlockMap = new Map();
+  const layerStatementSeen = new Set();
+  const result = [];
+  for (const rule of rules) {
+    if (rule.type === 'layer') {
+      const layerName = normalizeLayerNames(rule.layer);
+      if (rule.rules && rule.rules.length > 0) {
+        if (layerName && layerBlockMap.has(layerName)) {
+          layerBlockMap.get(layerName).rules.push(...rule.rules);
+        } else {
+          if (layerName) {
+            layerBlockMap.set(layerName, rule);
+          }
+          result.push(rule);
+        }
+      } else {
+        if (!layerName || !layerStatementSeen.has(layerName)) {
+          if (layerName) {
+            layerStatementSeen.add(layerName);
+          }
+          result.push(rule);
+        }
+      }
+    } else {
+      result.push(rule);
+    }
+  }
+  for (const rule of result) {
+    if (rule.type === 'layer' && rule.rules && rule.rules.length) {
+      rule.rules = mergeSelectorRules(rule.rules);
+    }
+  }
+  return result;
+}
+
+export {
+  deduplicateKeyframes,
+  mergeLayerRules,
+  mergeMediaRules
+};

package/src/rules/optimize/declaration-writes.js

@@ -0,0 +1,70 @@
+/**
+ * @file Describes what a declaration writes to: whether it declares a property at all, which leaf properties it can override, and whether it is flagged important.
+ */
+
+import {
+  expandToLeafProperties,
+  getOverridesOf
+} from '../../declarations/config.js';
+
+/**
+ * The leaf properties each declared property can write to, computed on first
+ * use. The shorthand tables never change, so a property always expands the same
+ * way.
+ *
+ * @type {Map<string, Set<string>>}
+ */
+const overridablePropertiesByProperty = new Map();
+
+/**
+ * Expands a declared property into every leaf longhand it can write to,
+ * including the extras a shorthand resets beyond its own longhands. Two
+ * declarations can only override one another when these sets intersect, which
+ * is what makes `margin` conflict with `margin-top` but not with `color`.
+ *
+ * @param  {string} property  The declared property name.
+ * @return {Set}              The leaf property names the declaration writes to.
+ */
+function expandToOverridableProperties (property) {
+  const cachedProperties = overridablePropertiesByProperty.get(property);
+  if (cachedProperties) {
+    return cachedProperties;
+  }
+  const overridableProperties = new Set(expandToLeafProperties(property));
+  for (const resetProperty of getOverridesOf(property)) {
+    for (const leafProperty of expandToLeafProperties(resetProperty)) {
+      overridableProperties.add(leafProperty);
+    }
+  }
+  overridablePropertiesByProperty.set(property, overridableProperties);
+  return overridableProperties;
+}
+
+/**
+ * Reports whether an entry of a rule's body is a declaration whose standing in
+ * the cascade can be read off the property it writes. Anything else a body may
+ * hold, such as a nested rule, is never shadowed by a declaration beside it.
+ *
+ * @param  {object}  entry  An entry of a rule's declaration list.
+ * @return {boolean}        True when the entry is a property declaration.
+ */
+function isPropertyDeclaration (entry) {
+  return entry.type === 'declaration' && Boolean(entry.property);
+}
+
+/**
+ * Determines whether a declaration carries a trailing `!important` flag.
+ *
+ * @param  {object}  declaration  The AST declaration node.
+ * @return {boolean}              True when the declaration is important.
+ */
+function isImportantDeclaration (declaration) {
+  // A trailing !important suffix on the raw declaration value
+  return /!\s*important\s*$/i.test(declaration.rawValue || declaration.value || '');
+}
+
+export {
+  expandToOverridableProperties,
+  isImportantDeclaration,
+  isPropertyDeclaration
+};

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

@@ -0,0 +1,51 @@
+/**
+ * @file Detects and removes rules that produce no CSS output once minified.
+ */
+
+/**
+ * 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);
+  });
+}
+
+export {
+  removeEmptyRules
+};