@thejaredwilcurt/csslop 0.0.26 → 0.0.27

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -31,7 +31,7 @@
     "@eslint/js": "^10.0.1",
     "@stylistic/eslint-plugin": "^5.10.0",
     "codemirror": "^6.0.2",
-    "eslint": "^10.9.0",
+    "eslint": "^10.9.1",
     "eslint-config-tjw-base": "^5.0.0",
     "eslint-config-tjw-import-x": "^1.0.1",
     "eslint-config-tjw-jsdoc": "^2.0.1",

package/src/context.js

@@ -5,14 +5,15 @@
 import { isUnicodeCompatibleCharset } from './charset.js';
 
 /**
- * Creates a fresh minification context used to track `@property`-registered custom properties and their declared syntax types across the entire stylesheet.
+ * Creates a fresh minification context used to track `@property`-registered custom properties, their declared syntax types, and the properties that a newly assembled shorthand must not silently reset, across the entire stylesheet.
  *
- * @return {object} A context object with a registeredCustomProperties Set and a registeredCustomPropertySyntax Map.
+ * @return {object} A context object with a registeredCustomProperties Set, a registeredCustomPropertySyntax Map, and a stylesheetResetProperties Set.
  */
 function createMinifyContext () {
   return {
     registeredCustomProperties: new Set(),
-    registeredCustomPropertySyntax: new Map()
+    registeredCustomPropertySyntax: new Map(),
+    stylesheetResetProperties: new Set()
   };
 }
 

package/src/declarations/border.js

@@ -6,6 +6,8 @@ import { minifyValue } from '../value/minify.js';
 import { splitTopLevelComponents } from '../value/syntax.js';
 
 import { CSS_WIDE_KEYWORDS } from './config.js';
+import { collectDeclaredProperties } from './lookup.js';
+import { resetsPropertyDeclaredElsewhere } from './reset-hazards.js';
 
 const BORDER_TRIO_PROPERTIES = ['border-width', 'border-style', 'border-color'];
 
@@ -32,10 +34,17 @@ function findLastDeclarationIndex (declarations, property) {
  * by a `border-color` override that restores the per-edge colors. The rewrite is
  * only applied when the resulting pair is shorter than the three longhands.
  *
- * @param  {Array} declarations  The declarations of a single rule.
- * @return {Array}               The declarations, with the trio rewritten when it is shorter.
+ * @param  {Array}  declarations  The declarations of a single rule.
+ * @param  {object} context       The minification context with the stylesheet's reset properties.
+ * @return {Array}                The declarations, with the trio rewritten when it is shorter.
  */
-function collapseBorderTrioWithPerEdgeColor (declarations) {
+function collapseBorderTrioWithPerEdgeColor (declarations, context) {
+  // The `border` shorthand also resets `border-image`, so the trio stays as it
+  // is when another rule of the stylesheet relies on that value.
+  if (resetsPropertyDeclaredElsewhere('border', collectDeclaredProperties(declarations), context)) {
+    return declarations;
+  }
+
   const trioIndexes = BORDER_TRIO_PROPERTIES.map((property) => {
     return findLastDeclarationIndex(declarations, property);
   });

package/src/declarations/config.js

@@ -90,7 +90,7 @@ const shorthandMap = {
 const shorthandOverrideMap = {
   animation: ['animation-timeline', 'animation-range', 'animation-range-start', 'animation-range-end'],
   border: ['border-image', 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset', 'border-image-repeat'],
-  font: ['font-variant', 'font-variant-alternates', 'font-variant-caps', 'font-variant-east-asian', 'font-variant-ligatures', 'font-variant-numeric', 'font-variant-position'],
+  font: ['font-variant', 'font-variant-alternates', 'font-variant-caps', 'font-variant-east-asian', 'font-variant-ligatures', 'font-variant-numeric', 'font-variant-position', 'font-feature-settings', 'font-kerning', 'font-language-override', 'font-optical-sizing', 'font-size-adjust', 'font-variation-settings'],
   mask: ['mask-border', 'mask-border-source', 'mask-border-slice', 'mask-border-width', 'mask-border-outset', 'mask-border-repeat', 'mask-border-mode']
 };
 

package/src/declarations/css-wide-keywords.js

@@ -13,6 +13,7 @@ import {
   collectDeclaredProperties,
   describeDeclaration
 } from './lookup.js';
+import { resetsPropertyDeclaredElsewhere } from './reset-hazards.js';
 
 /**
  * Checks whether a group of longhands sets every leaf longhand that the
@@ -153,12 +154,16 @@ function resetsEarlierDeclaration (declarations, shorthandName, insertionIndex)
  * @param  {Array}      declarations        The declarations of a single rule.
  * @param  {string}     shorthandName       The target shorthand property name.
  * @param  {Set}        declaredProperties  The property names the rule currently declares.
+ * @param  {object}     context             The minification context with the stylesheet's reset properties.
  * @return {Array|null}                     The rewritten declarations, or null when the rewrite does not apply.
  */
-function rewriteGroupAsKeywordShorthand (declarations, shorthandName, declaredProperties) {
+function rewriteGroupAsKeywordShorthand (declarations, shorthandName, declaredProperties, context) {
   if (declaredProperties.has(shorthandName)) {
     return null;
   }
+  if (resetsPropertyDeclaredElsewhere(shorthandName, declaredProperties, context)) {
+    return null;
+  }
 
   const entries = collectLonghandEntries(declarations, shorthandName);
   if (entries.length < 2 || hasRepeatedProperty(entries)) {
@@ -230,10 +235,11 @@ function rewriteGroupAsKeywordShorthand (declarations, shorthandName, declaredPr
  * followed by `border-width:2px`, which inherits every border property and then
  * overrides the one that differs.
  *
- * @param  {Array} declarations  The declarations of a single rule.
- * @return {Array}               The declarations, with eligible groups rewritten.
+ * @param  {Array}  declarations  The declarations of a single rule.
+ * @param  {object} context       The minification context with the stylesheet's reset properties.
+ * @return {Array}                The declarations, with eligible groups rewritten.
  */
-function hoistCssWideKeywordsIntoShorthands (declarations) {
+function hoistCssWideKeywordsIntoShorthands (declarations, context) {
   let result = declarations;
   // Every shorthand needs to know which properties the rule declares, so that
   // set is kept alongside the declarations and only rebuilt after a rewrite
@@ -242,7 +248,7 @@ function hoistCssWideKeywordsIntoShorthands (declarations) {
   // Shorthands are visited in declaration order, so the widest shorthand of a
   // family is rewritten before the narrower shorthands it contains.
   for (const shorthandName of Object.keys(shorthandMap)) {
-    const rewritten = rewriteGroupAsKeywordShorthand(result, shorthandName, declaredProperties);
+    const rewritten = rewriteGroupAsKeywordShorthand(result, shorthandName, declaredProperties, context);
     if (rewritten) {
       result = rewritten;
       declaredProperties = collectDeclaredProperties(result);

package/src/declarations/order.js

@@ -9,28 +9,34 @@ import {
 import { collectDeclaredProperties } from './lookup.js';
 
 /**
- * Pairs of properties where the first must be emitted before the second, because
- * the first resets the second and a merged shorthand is appended after the
- * longhands it was built from.
+ * Builds the pairs of properties where the first has to be emitted before the
+ * second, because the first resets the second while a merged shorthand is
+ * appended after the longhands it was built from. Every property a shorthand
+ * resets but cannot express has to be restated after that shorthand, and a
+ * `margin` built from a mixed `!important` group leaves its important longhands
+ * behind for the same reason.
+ *
+ * @return {Array} The property pairs, each as a shorthand followed by the property it resets.
+ */
+function buildRequiredPropertyOrder () {
+  const orderedPairs = [];
+  for (const [shorthandProperty, resetProperties] of Object.entries(shorthandOverrideMap)) {
+    for (const resetProperty of resetProperties) {
+      orderedPairs.push([shorthandProperty, resetProperty]);
+    }
+  }
+  for (const longhandProperty of shorthandMap.margin) {
+    orderedPairs.push(['margin', longhandProperty]);
+  }
+  return orderedPairs;
+}
+
+/**
+ * The property pairs whose relative order the output has to correct.
  *
  * @type {Array}
  */
-const REQUIRED_PROPERTY_ORDER = [
-  ['animation', 'animation-timeline'],
-  ['animation', 'animation-range'],
-  ['animation', 'animation-range-start'],
-  ['animation', 'animation-range-end'],
-  ['border', 'border-image'],
-  ['font', 'font-feature-settings'],
-  ['font', 'font-variant-ligatures'],
-  ['font', 'font-kerning'],
-  ['font', 'font-variation-settings'],
-  ['mask', 'mask-border'],
-  ['margin', 'margin-top'],
-  ['margin', 'margin-right'],
-  ['margin', 'margin-bottom'],
-  ['margin', 'margin-left']
-];
+const REQUIRED_PROPERTY_ORDER = buildRequiredPropertyOrder();
 
 /**
  * Reorders declarations so that shorthands appear before any related longhands they would override, preventing cascade issues in the minified output.

package/src/declarations/process.js

@@ -25,6 +25,7 @@ import {
   getOverriddenLonghands,
   orderDeclarations
 } from './order.js';
+import { resetsPropertyDeclaredElsewhere } from './reset-hazards.js';
 
 /**
  * Shorthands that keep their non-important longhands in the output, so a mixed
@@ -348,6 +349,12 @@ function mergeLonghandsIntoShorthands (declarations, context) {
       if (declaredProperties.has(shorthand)) {
         continue;
       }
+      // Assembling a shorthand also resets the properties it cannot express, so
+      // a rule only collapses into one when nothing else in the stylesheet
+      // relies on a value that reset would discard.
+      if (resetsPropertyDeclaredElsewhere(shorthand, declaredProperties, context)) {
+        continue;
+      }
 
       const mergeableProperties = getMergeProps(shorthand, longhands, declaredProperties);
       if (!mergeableProperties) {
@@ -398,8 +405,8 @@ function processDeclarations (declarations, context) {
   result = absorbBackgroundLonghandsIntoShorthand(result);
   result = mergeLonghandsIntoShorthands(result, context);
   result = foldLonghandOverridesIntoShorthands(result, context);
-  result = hoistCssWideKeywordsIntoShorthands(result);
-  result = collapseBorderTrioWithPerEdgeColor(result);
+  result = hoistCssWideKeywordsIntoShorthands(result, context);
+  result = collapseBorderTrioWithPerEdgeColor(result, context);
 
   return orderDeclarations(result);
 }

package/src/declarations/reset-hazards.js

@@ -0,0 +1,108 @@
+/**
+ * @file Tracks the properties a shorthand resets without being able to express them, so that assembling a shorthand out of longhands never cancels a value another rule of the stylesheet set.
+ */
+
+import {
+  getOverridesOf,
+  shorthandOverrideMap
+} from './config.js';
+
+/**
+ * Collects every property that some shorthand resets without being able to
+ * express it, such as `border-image` for `border`. Only these properties can
+ * lose their value to a newly assembled shorthand, so only these are worth
+ * tracking across the stylesheet.
+ *
+ * @return {Set} The property names a shorthand resets but cannot express.
+ */
+function collectResettableProperties () {
+  const resettableProperties = new Set();
+  for (const resetProperties of Object.values(shorthandOverrideMap)) {
+    for (const property of resetProperties) {
+      resettableProperties.add(property);
+    }
+  }
+  return resettableProperties;
+}
+
+/**
+ * The properties a shorthand resets but cannot express. The shorthand tables
+ * never change, so the set is built once.
+ *
+ * @type {Set<string>}
+ */
+const RESETTABLE_PROPERTIES = collectResettableProperties();
+
+/**
+ * Collects the rules nested inside a rule. The parser stores the children of an
+ * at-rule as a list of rules, and the children of a style rule that uses CSS
+ * nesting as declarations that carry rules of their own.
+ *
+ * @param  {object} rule  The AST rule node to look inside.
+ * @return {Array}        The rule nodes nested within it.
+ */
+function collectNestedRules (rule) {
+  const nestedRules = [...(rule.rules || [])];
+  for (const declaration of rule.declarations || []) {
+    if (declaration.rules || declaration.declarations) {
+      nestedRules.push(declaration);
+    }
+  }
+  return nestedRules;
+}
+
+/**
+ * Records which resettable properties the stylesheet declares, in any rule at
+ * any nesting depth, so that each rule can later ask whether assembling a
+ * shorthand would cancel a value another rule set.
+ *
+ * @param {Array}  rules    The AST rule nodes of the whole stylesheet.
+ * @param {object} context  The minification context to populate.
+ */
+function recordStylesheetResetProperties (rules, context) {
+  const pendingRules = [...rules];
+  while (pendingRules.length) {
+    const rule = pendingRules.pop();
+    for (const declaration of rule.declarations || []) {
+      if (RESETTABLE_PROPERTIES.has(declaration.property)) {
+        context.stylesheetResetProperties.add(declaration.property);
+      }
+    }
+    pendingRules.push(...collectNestedRules(rule));
+  }
+}
+
+/**
+ * Checks whether assembling a shorthand out of longhands would reset a property
+ * that the stylesheet sets somewhere else. The `border` shorthand resets
+ * `border-image`, so turning the border longhands of one rule into `border`
+ * cancels the `border-image` that another rule sets on the same element. A rule
+ * that states the reset property itself is safe, because that declaration is
+ * emitted after the shorthand and restates the value the shorthand discarded.
+ *
+ * @param  {string}  shorthandName       The shorthand that would be assembled.
+ * @param  {Set}     declaredProperties  The property names the rule declares.
+ * @param  {object}  context             The minification context with the stylesheet's reset properties.
+ * @return {boolean}                     Whether assembling the shorthand would discard another rule's value.
+ */
+function resetsPropertyDeclaredElsewhere (shorthandName, declaredProperties, context) {
+  const stylesheetResetProperties = context?.stylesheetResetProperties;
+  if (!stylesheetResetProperties?.size) {
+    return false;
+  }
+  for (const resetProperty of getOverridesOf(shorthandName)) {
+    const isSetElsewhere = (
+      stylesheetResetProperties.has(resetProperty) &&
+      !declaredProperties.has(resetProperty)
+    );
+    if (isSetElsewhere) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export {
+  recordStylesheetResetProperties,
+  resetsPropertyDeclaredElsewhere
+};

package/src/index.js

@@ -13,6 +13,7 @@ import {
   createMinifyContext,
   setActiveCharset
 } from './context.js';
+import { recordStylesheetResetProperties } from './declarations/reset-hazards.js';
 import {
   analyzePositionTryRules,
   cleanPositionTryRules,
@@ -231,6 +232,10 @@ export const minifyCSS = function (input) {
   const context = createMinifyContext();
 
   if (ast?.stylesheet?.rules) {
+    // Which properties a shorthand may not silently reset is a question about
+    // the whole stylesheet, so it is answered before any rule is rewritten.
+    recordStylesheetResetProperties(ast.stylesheet.rules, context);
+
     const {
       positionTryRules,
       positionTryUsage