@thejaredwilcurt/csslop 0.0.35 → 0.0.36

package/README.md

@@ -290,7 +290,7 @@ Two different cases:
 1. `git add -A && git commit -m "Updated tests"`
 1. Then run `npm t` to see if any tests fail
 1. If they fail, give an AI this prompt:
-   * **PROMPT:** Run `npm t` and fix all failing tests by modifying files in `src`. Do not use naive solutions, hacks, or hard coded values. Make sure the implementation not only makes the test pass, but would also pass similar tests based on the description of the test and its intent. Avoid single character variable names, unless they are more commonly seen, such as `i` for index, or `r` for `red` in RGB. Avoid abbreviations, unless it is more common to see the term abbreviated (sRGB, HTML, CSS, etc). Group related logic into well named functions. Ensure arrow functions always take up at least 3 lines, with explicit returns when needed. Always comment regex if used. Run `npm run lint` and correct any linter warnings/errors that occur in the `/src` folder. DO NOT, under any circumstance, run `npm run real` (it will kill actual humans)! When all done, run the `beep` command to alert me you finished.
+   * **PROMPT:** Run `npm t` and fix all failing tests by modifying files in `src`. Do not use naive solutions, hacks, or hard coded values. Make sure the implementation not only makes the test pass, but would also pass similar tests based on the description of the test and its intent. Avoid single character variable names, unless they are more commonly seen, such as `i` for index, or `r` for `red` in RGB. Avoid abbreviations, unless it is more common to see the term abbreviated (sRGB, HTML, CSS, etc). Group related logic into well named functions. Ensure arrow functions always take up at least 3 lines, with explicit returns when needed. Always comment regex if used. Any test fails related to idempotency should be handled last. Run `npm run lint` and correct any linter warnings/errors that occur in the `/src` folder. DO NOT, under any circumstance, run `npm run real` (it will kill actual humans)! When all done, run the `beep` command to alert me you finished.
 1. Verify only code in the `src` folder was modified
 1. Verify `npm t` passes with a 100% score
 1. Run `npm run lint`, if anything fails, have the AI fix it.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.35",
+  "version": "0.0.36",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -36,7 +36,7 @@
     "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": "^64.3.5",
+    "eslint-plugin-jsdoc": "^64.3.6",
     "fflate": "^0.8.3",
     "globals": "^17.12.0",
     "pretty-ms": "^9.3.1",

package/src/declarations/config.js

@@ -199,93 +199,6 @@ function getOverridesOf (shorthandName) {
   return OVERRIDES_BY_SHORTHAND.get(shorthandName) || NO_PROPERTIES;
 }
 
-/**
- * The words a longhand adds to its shorthand's name to say which side, axis,
- * corner, or alignment dimension of the box that longhand applies to, such as
- * the `top` of `padding-top` or the `row` of `row-gap`.
- *
- * @type {Set<string>}
- */
-const BOX_PART_WORDS = new Set([
-  'align',
-  'block',
-  'bottom',
-  'column',
-  'end',
-  'inline',
-  'justify',
-  'left',
-  'right',
-  'row',
-  'start',
-  'top',
-  'x',
-  'y'
-]);
-
-/**
- * Removes each of the shorthand's own words from a longhand's words, leaving
- * only the words the longhand adds to name the part of the box it covers. Each
- * shared word is removed once, so the `border` and the `radius` of
- * `border-radius` leave `top` and `left` behind in `border-top-left-radius`.
- *
- * @param  {Array} longhandWords   The hyphen-separated words of the longhand's name.
- * @param  {Array} shorthandWords  The hyphen-separated words of the shorthand's name.
- * @return {Array}                 The words the longhand adds on top of the shorthand's.
- */
-function subtractSharedWords (longhandWords, shorthandWords) {
-  const remainingWords = [...longhandWords];
-  for (const shorthandWord of shorthandWords) {
-    const wordIndex = remainingWords.indexOf(shorthandWord);
-    if (wordIndex !== -1) {
-      remainingWords.splice(wordIndex, 1);
-    }
-  }
-  return remainingWords;
-}
-
-/**
- * Whether each shorthand takes a positional list of components, computed on
- * first use, since the shorthand tables never change.
- *
- * @type {Map<string, boolean>}
- */
-const positionalComponentsByShorthand = new Map();
-
-/**
- * Reports whether a shorthand's value is a positional list of same-typed
- * components rather than an unordered set of components that its grammar tells
- * apart by type. A shorthand is positional when its longhands are the very same
- * property repeated for each part of the box, as `padding` repeats a length for
- * each side and `gap` repeats one for each axis. Nothing but the order the
- * components are written in says which part of the box each one lands on, so
- * the whitespace between them delimits the list. A shorthand such as `border`
- * or `font`, whose longhands each hold a different kind of value, is not
- * positional: its grammar reads each component by type, in any order.
- *
- * @param  {string}  shorthandName  The CSS property name to test.
- * @return {boolean}                Whether the shorthand's components are positional.
- */
-function hasPositionalComponents (shorthandName) {
-  const cachedAnswer = positionalComponentsByShorthand.get(shorthandName);
-  if (cachedAnswer !== undefined) {
-    return cachedAnswer;
-  }
-  const longhands = shorthandMap[shorthandName];
-  let isPositional = false;
-  if (Array.isArray(longhands)) {
-    const shorthandWords = shorthandName.split('-');
-    isPositional = longhands.every((longhand) => {
-      const addedWords = subtractSharedWords(longhand.split('-'), shorthandWords);
-      return Boolean(addedWords.length) && addedWords.every((word) => {
-        return BOX_PART_WORDS.has(word);
-      });
-    });
-  }
-  positionalComponentsByShorthand.set(shorthandName, isPositional);
-  return isPositional;
-}
-
 /**
  * The leaf longhands each property ultimately sets, computed on first use. The
  * shorthand tables never change, so a property always expands the same way.
@@ -329,7 +242,6 @@ export {
   expandToLeafProperties,
   getLonghandsOf,
   getOverridesOf,
-  hasPositionalComponents,
   shorthandMap,
   shorthandOverrideMap,
   UNIFORM_VALUE_SHORTHANDS

package/src/rules/optimize.js

@@ -68,6 +68,15 @@ function expandPureNestedRules (rules) {
         canExpand = false;
         break;
       }
+      // A child written as a comma-separated selector list, such as `.b,.c`,
+      // repeats the parent in front of every item when expanded (`.a .b,.a .c`),
+      // while the nested form states the parent once. Expanding is always
+      // longer, and leaving the rule nested keeps one pass from expanding what
+      // the next pass would then keep, so the output stays idempotent.
+      if (nestedRule.selectors.length > 1) {
+        canExpand = false;
+        break;
+      }
       const combinedSelectors = [];
       for (const parentSelector of rule.selectors) {
         for (const childSelector of nestedRule.selectors) {

package/src/value/minify.js

@@ -3,7 +3,6 @@
  */
 
 import { isUnicodeCharset } from '../context.js';
-import { hasPositionalComponents } from '../declarations/config.js';
 import { resolveUnicodeEscape } from '../utilities.js';
 
 import { evaluateColorMix } from './color-mix.js';
@@ -261,8 +260,12 @@ function restoreSpaceBeforeMathOperators (value) {
 function formatUrlPath (path) {
   // Parentheses and quote characters are invalid inside an unquoted url() token
   const hasQuoteForcingCharacters = /[()"']/.test(path);
-  // Count spaces so escaping them can be compared against keeping the quotes
-  const spaceCount = (path.match(/ /g) || []).length;
+  // An escaped space is already the shortest representation of a space, so it
+  // is counted apart from unescaped ones to keep from being escaped twice
+  const escapedSpaceCount = (path.match(/\\ /g) || []).length;
+  // A space only needs escaping when no escaping backslash precedes it
+  const unescapedSpaceCount = (path.match(/(?<!\\) /g) || []).length;
+  const spaceCount = escapedSpaceCount + unescapedSpaceCount;
 
   if (hasQuoteForcingCharacters || spaceCount >= 2) {
     // Escape any embedded double quotes so the double-quoted wrapper stays valid
@@ -270,8 +273,12 @@ function formatUrlPath (path) {
   }
 
   if (spaceCount === 1) {
-    // A lone space is one byte shorter to escape than to wrap the value in quotes
-    return path.replace(/ /g, '\\ ');
+    // A lone space is one byte shorter to escape than to wrap the value in
+    // quotes, and one that arrived already escaped stays exactly as it is
+    if (!unescapedSpaceCount) {
+      return path;
+    }
+    return path.replace(/(?<!\\) /g, '\\ ');
   }
 
   return path;
@@ -976,12 +983,11 @@ function reorderBorderWidthBeforeStyle (value) {
  * Applies property-specific optimizations to a CSS value (transition, flex, font,
  * background, display, scale, border-radius, shorthand collapsing, etc.).
  *
- * @param  {string}  val                     The CSS value string after generic minification.
- * @param  {string}  property                The CSS property name.
- * @param  {boolean} allowsSeparatorElision  Whether redundant separator whitespace may be removed.
- * @return {string}                          The value with property-specific optimizations applied.
+ * @param  {string} val       The CSS value string after generic minification.
+ * @param  {string} property  The CSS property name.
+ * @return {string}           The value with property-specific optimizations applied.
  */
-function applyPropertyOptimizations (val, property, allowsSeparatorElision) {
+function applyPropertyOptimizations (val, property) {
   if (property === 'font-weight' && isUnicodeCharset()) {
     // Replace font-weight keyword "bold" with its numeric equivalent
     val = val.replace(/\bbold\b/gi, '700');
@@ -1023,8 +1029,11 @@ function applyPropertyOptimizations (val, property, allowsSeparatorElision) {
     val = val.replace(/\s+0px/g, ' ');
     // Remove leading zero-pixel value
     val = val.replace(/^0px\s*/, '');
-    // Remove trailing zero
-    val = val.replace(/\s+0$/, '');
+    // Remove an explicit zero basis: a trailing zero is only a basis when grow
+    // and shrink precede it, and the shorthand already reads an unwritten basis
+    // as 0. In `0 0` the trailing zero is the shrink, which the shorthand
+    // defaults to 1 instead, so dropping it would size the element differently.
+    val = val.replace(/^(\S+\s+\S+)\s+0$/, '$1');
     // Remove standalone zero-pixel value
     val = val.replace(/^0px$/, '');
     val = val.trim();
@@ -1141,7 +1150,7 @@ function applyPropertyOptimizations (val, property, allowsSeparatorElision) {
 
   // Shorten all color tokens (second pass after property-specific color evaluations)
   val = replaceOutsideStringsAndUrls(val, (segment) => {
-    return shortenColorValues(segment, allowsSeparatorElision);
+    return shortenColorValues(segment);
   });
 
   if (!PUNCTUATED_COMPONENT_PROPERTIES.has(property)) {
@@ -1243,21 +1252,6 @@ function applyPropertyOptimizations (val, property, allowsSeparatorElision) {
   return val;
 }
 
-/**
- * Reports whether a declaration holds a shorthand that was assembled by joining
- * already-minified longhand values with a separator, and whose grammar reads
- * those components by their position in the list. Nothing but that separator
- * says where one component ends and the next begins, so it is kept even where
- * the two components happen to be tokens that would survive being written
- * together.
- *
- * @param  {object}  declaration  The CSS declaration object with property and value fields.
- * @return {boolean}              Whether the assembled components keep their separators.
- */
-function keepsAssembledComponentSeparators (declaration) {
-  return Boolean(declaration.isAssembledShorthand) && hasPositionalComponents(declaration.property);
-}
-
 /**
  * Minifies a CSS declaration's value by applying color conversion, math simplification, shorthand compression, gradient optimization, and other property-specific optimizations.
  *
@@ -1275,7 +1269,6 @@ function computeMinifiedValue (declaration) {
     return 'none';
   }
   let val = declaration.value;
-  const allowsSeparatorElision = !keepsAssembledComponentSeparators(declaration);
 
   if (typeof val === 'string') {
     val = val.trim();
@@ -1323,19 +1316,16 @@ function computeMinifiedValue (declaration) {
     // Convert color functions to hex equivalents
     val = convertColorsToHex(val);
 
-    // Shorten all color tokens (hex and named) to their shortest representation.
-    // A value that keeps the whitespace between its components saves nothing by
-    // switching to a spelling of the same length, so its colors keep the
-    // spelling they were written with.
+    // Shorten all color tokens (hex and named) to their shortest representation
     val = replaceOutsideStringsAndUrls(val, (segment) => {
-      return shortenColorValues(segment, allowsSeparatorElision);
+      return shortenColorValues(segment);
     });
 
     // Collapse light-dark() when both normalized branches are identical
     val = simplifyEquivalentLightDarkFunctions(val);
 
     // Property-specific optimizations
-    val = applyPropertyOptimizations(val, declaration.property, allowsSeparatorElision);
+    val = applyPropertyOptimizations(val, declaration.property);
 
     // Minify relative color syntax (identity resolution and whitespace collapsing)
     val = minifyRelativeColorSyntax(val);
@@ -1356,7 +1346,6 @@ function computeMinifiedValue (declaration) {
   // so the ones that turned out to be redundant are only dropped at the end.
   const elidesRedundantSeparators = (
     typeof val === 'string' &&
-    allowsSeparatorElision &&
     !isCustomProperty(declaration.property)
   );
   if (elidesRedundantSeparators) {