@thejaredwilcurt/csslop 0.0.45 → 0.0.47

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/pre/start.js",
@@ -23,9 +23,9 @@
     "proto": "proto pin node latest --resolve --tool-native && proto pin npm latest --resolve --tool-native && git status"
   },
   "devDependencies": {
-    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/autocomplete": "^6.20.4",
     "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/view": "^6.43.14",
+    "@codemirror/view": "^6.43.15",
     "@eslint/js": "^10.0.1",
     "@node-projects/css-parser": "^5.2.0",
     "@stylistic/eslint-plugin": "^5.10.0",
@@ -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.3.11",
+    "eslint-plugin-jsdoc": "^65.4.2",
     "fflate": "^0.8.3",
     "globals": "^17.13.0",
     "pretty-ms": "^10.0.0",
     "real-world-css-libraries": "^1.0.8",
-    "vite": "^8.3.4"
+    "vite": "^8.3.5"
   },
   "author": "The Jared Wilcurt",
   "homepage": "https://github.com/TheJaredWilcurt/csslop#readme",
@@ -57,11 +57,11 @@
   "devEngines": {
     "runtime": {
       "name": "node",
-      "version": "26.12.0"
+      "version": "26.12.1"
     },
     "packageManager": {
       "name": "npm",
-      "version": "12.2.0"
+      "version": "12.2.1"
     }
   }
 }

package/src/declarations/border.js

@@ -182,7 +182,7 @@ function collapseBorderTrioWithPerEdgeOverrides (declarations, context) {
   const borderValue = buildBorderShorthandValue(
     widthComponents.length === 1 ? width : '',
     styleComponents.length === 1 ? style : '',
-    colorComponents[0]
+    colorComponents.length === 1 ? colorComponents[0] : ''
   ) + importantSuffix;
   const overrides = BORDER_TRIO_PROPERTIES.flatMap((property, index) => {
     if (componentsByProperty[index].length === 1) {

package/src/parser/source-search.js

@@ -162,8 +162,8 @@ function startsUrlToken (source, index) {
 
 /**
  * Finds the first of several delimiter characters that is written at the top
- * level of the text, meaning it is not escaped, quoted, or nested inside a
- * group.
+ * level of the text, meaning it is not escaped, quoted, inside a comment, or
+ * nested inside a group.
  *
  * @param  {string} source      The raw CSS text being scanned.
  * @param  {string} delimiters  The delimiter characters to look for.
@@ -174,6 +174,11 @@ function findTopLevelDelimiter (source, delimiters, startIndex) {
   let index = startIndex;
   while (index < source.length) {
     const character = source[index];
+    if (character === '/' && source[index + 1] === '*') {
+      const closingIndex = source.indexOf('*/', index + 2);
+      index = closingIndex === -1 ? source.length : closingIndex + 2;
+      continue;
+    }
     if (character === '\\') {
       index += 2;
       continue;

package/src/rules/optimize.js

@@ -262,6 +262,9 @@ function createNestedSelectorMatcher (parentSelector) {
 
   return (childSelector) => {
     const child = childSelector.trim();
+    if (child === parent) {
+      return '&';
+    }
     if (child.startsWith(parent + ':') || child.startsWith(parent + '::')) {
       return '&' + child.slice(parent.length);
     }
@@ -497,7 +500,7 @@ function factorCommonParents (rules) {
   while (index < rules.length) {
     const rule = rules[index];
     if (rule.type === 'rule' && rule.selectors?.length > 1) {
-      const candidateParent = extractLeadingCompound(rule.selectors[0]);
+      const candidateParent = extractLeadingCompound(rule.selectors[0]) || rule.selectors[0];
       if (candidateParent) {
         const matchNestedSelector = createNestedSelectorMatcher(candidateParent);
         const childSelectors = rule.selectors.map(matchNestedSelector);
@@ -571,8 +574,8 @@ function factorCommonParents (rules) {
 }
 
 /**
- * Shares a descendant prefix through `:is()` when the parent itself is also
- * in the selector list, preventing a nesting wrapper from saving space.
+ * Shares a descendant prefix through `:is()` when a nesting wrapper did not
+ * save enough space to factor the parent out of the selector list.
  *
  * @param {object} rule  The style rule whose selector list may be shortened.
  */

package/src/rules/stringify.js

@@ -3,8 +3,16 @@
  */
 
 import { processDeclarations } from '../declarations/process.js';
-import { splitTopLevelCommaList } from '../parser/source-search.js';
+import {
+  findMatchingParenthesis,
+  skipParenthesizedGroup,
+  skipQuotedString,
+  splitTopLevelCommaList,
+  startsUrlToken
+} from '../parser/source-search.js';
+import { tokenizeCssValue } from '../parser/tokenizer.js';
 import { minifyValueForOutput } from '../value/minify.js';
+import { elideRedundantSeparators } from '../value/tokens.js';
 
 import {
   collapseCustomPropertyWhitespace,
@@ -67,7 +75,20 @@ const LAYER_STATEMENT_PATTERN = /^@layer [^{}();'"]*;$/;
  */
 function removeRedundantLayerStatementSemicolon (ruleStrings) {
   const lastIndex = ruleStrings.length - 1;
-  if (lastIndex < 0 || !LAYER_STATEMENT_PATTERN.test(ruleStrings[lastIndex])) {
+  if (lastIndex < 0) {
+    return ruleStrings;
+  }
+  const lastRule = ruleStrings[lastIndex];
+  const isTrailingLayerStatement = LAYER_STATEMENT_PATTERN.test(lastRule);
+  const isTrailingImportStatement = (
+    lastRule.endsWith(';') &&
+    (
+      lastRule.startsWith('@import ') ||
+      lastRule.startsWith('@import"') ||
+      lastRule.startsWith('@import\'')
+    )
+  );
+  if (!isTrailingLayerStatement && !isTrailingImportStatement) {
     return ruleStrings;
   }
   const result = [...ruleStrings];
@@ -75,6 +96,47 @@ function removeRedundantLayerStatementSemicolon (ruleStrings) {
   return result;
 }
 
+/**
+ * Normalizes every `supports()` condition in an import prelude while leaving
+ * nested functions and quoted strings to the condition parser.
+ *
+ * @param  {string} importStatement  The import prelude being minified.
+ * @return {string}                  The import prelude with normalized conditions.
+ */
+function normalizeImportSupports (importStatement) {
+  let result = '';
+  let index = 0;
+  const normalizedStatement = importStatement.toLowerCase();
+  while (index < importStatement.length) {
+    let supportsIndex = -1;
+    let scanIndex = index;
+    while (scanIndex < importStatement.length) {
+      if (importStatement[scanIndex] === '"' || importStatement[scanIndex] === '\'') {
+        scanIndex = skipQuotedString(importStatement, scanIndex);
+        continue;
+      }
+      if (normalizedStatement.startsWith('supports(', scanIndex)) {
+        supportsIndex = scanIndex;
+        break;
+      }
+      scanIndex++;
+    }
+    if (supportsIndex === -1) {
+      break;
+    }
+    const openIndex = supportsIndex + 'supports'.length;
+    const closeIndex = findMatchingParenthesis(importStatement, openIndex);
+    if (closeIndex === -1) {
+      break;
+    }
+    const condition = importStatement.slice(openIndex + 1, closeIndex);
+    result += importStatement.slice(index, openIndex + 1);
+    result += normalizeSupports(condition) + ')';
+    index = closeIndex + 1;
+  }
+  return result + importStatement.slice(index);
+}
+
 /**
  * Recursively stringifies child rules into a concatenated minified CSS string.
  *
@@ -111,6 +173,67 @@ function minifyFunctionPrelude (prelude) {
   return functionName + '(' + minifiedParameters.join(',') + ')';
 }
 
+/**
+ * Removes comments between namespace tokens while leaving strings, URLs, and
+ * escaped characters intact.
+ *
+ * @param  {string} prelude  The namespace prelude as written.
+ * @return {string}          The prelude with comments replaced by separators.
+ */
+function removeNamespaceComments (prelude) {
+  let result = '';
+  let index = 0;
+  while (index < prelude.length) {
+    if (prelude.startsWith('/*', index)) {
+      const closingIndex = prelude.indexOf('*/', index + 2);
+      index = closingIndex === -1 ? prelude.length : closingIndex + 2;
+      result += ' ';
+      continue;
+    }
+    let end = index + 1;
+    if (prelude[index] === '"' || prelude[index] === '\'') {
+      end = skipQuotedString(prelude, index);
+    } else if (prelude[index] === '\\') {
+      end = Math.min(index + 2, prelude.length);
+    } else if (startsUrlToken(prelude, index)) {
+      end = skipParenthesizedGroup(prelude, index + 3);
+    }
+    result += prelude.slice(index, end);
+    index = end;
+  }
+  return result;
+}
+
+/**
+ * Unwraps quoted namespace URLs and removes token separators without changing
+ * whitespace or escapes inside the namespace name's string.
+ *
+ * @param  {string} prelude  The optional namespace prefix and its URL.
+ * @return {string}          The minified namespace statement.
+ */
+function stringifyNamespace (prelude) {
+  const tokens = tokenizeCssValue(removeNamespaceComments(prelude)).filter((token) => {
+    return token.type !== 'whitespace';
+  });
+  const parts = ['@namespace'];
+  for (let index = 0; index < tokens.length; index++) {
+    const token = tokens[index];
+    const isQuotedUrl = (
+      token.type === 'function' &&
+      token.text.toLowerCase() === 'url(' &&
+      tokens[index + 1]?.type === 'string' &&
+      tokens[index + 2]?.text === ')'
+    );
+    if (isQuotedUrl) {
+      parts.push(tokens[index + 1].text);
+      index += 2;
+    } else {
+      parts.push(token.text);
+    }
+  }
+  return elideRedundantSeparators(parts.join(' ')) + ';';
+}
+
 /**
  * Stringifies a generic `at-rule` AST node into minified CSS, with specialized
  * prelude minification for `@function` rules and generic whitespace handling
@@ -466,6 +589,10 @@ function stringifyRule (rule, context) {
     return '@charset ' + rule.charset + ';';
   }
 
+  if (rule.type === 'namespace') {
+    return stringifyNamespace(rule.namespace);
+  }
+
   if (rule.type === 'import') {
     let importStatement = rule.import;
     // Unwrap url() with a quoted string to just the quoted string
@@ -478,13 +605,7 @@ function stringifyRule (rule, context) {
     importStatement = importStatement.replace(/^(".*?"|'.*?') /, '$1');
     // Remove space between closing paren and next at-rule condition keyword
     importStatement = importStatement.replace(/\) ([a-zA-Z])/g, ')$1');
-    // Minify property:value pairs inside supports() by removing whitespace around colons
-    importStatement = importStatement.replace(
-      /supports\(([^()]*)\)/g,
-      (fullMatch, content) => {
-        return 'supports(' + content.replace(/\s*:\s*/g, ':') + ')';
-      }
-    );
+    importStatement = normalizeImportSupports(importStatement);
     const startsWithQuote = importStatement.startsWith('"') || importStatement.startsWith('\'');
     let importSeparator;
     if (startsWithQuote) {

package/src/value/math-expression.js

@@ -66,17 +66,29 @@ const MAXIMUM_NESTING_DEPTH = 32;
  * length is held as the pixels it measures, since every length stating the
  * same measurement then totals under the same unit.
  *
- * @param  {number} number  The number the quantity is written from.
- * @param  {string} unit    The unit the quantity is written with, or the empty string when it is a plain number.
- * @return {Map}            The unit totals the quantity states.
+ * @param  {number}  number                   The number the quantity is written from.
+ * @param  {string}  unit                     The unit the quantity is written with, or the empty string when it is a plain number.
+ * @param  {boolean} preserveWrittenQuantity  Whether to retain the original spelling for a standalone quantity.
+ * @return {Map}                              The unit totals the quantity states.
  */
-function createUnitTotals (number, unit) {
+function createUnitTotals (number, unit, preserveWrittenQuantity = false) {
   const lowercasedUnit = unit.toLowerCase();
   const pixels = convertAbsoluteLengthToPx(number, lowercasedUnit);
+  let totals;
   if (pixels === null) {
-    return new Map([[lowercasedUnit, number]]);
+    totals = new Map([[lowercasedUnit, number]]);
+  } else {
+    totals = new Map([['px', pixels]]);
+  }
+  if (preserveWrittenQuantity) {
+    totals.writtenQuantity = {
+      number,
+      unit: lowercasedUnit,
+      canonicalUnit: pixels === null ? lowercasedUnit : 'px',
+      canonicalNumber: pixels === null ? number : pixels
+    };
   }
-  return new Map([['px', pixels]]);
+  return totals;
 }
 
 /**
@@ -162,6 +174,16 @@ function multiplyUnitTotals (left, right) {
   if (isPlainNumber(left)) {
     return scaleUnitTotals(right, left.get(UNITLESS));
   }
+  const leftQuantity = readSingleQuantity(left);
+  const rightQuantity = readSingleQuantity(right);
+  if (leftQuantity && rightQuantity) {
+    if (leftQuantity.unit.startsWith('reciprocal:') && leftQuantity.unit.slice('reciprocal:'.length) === rightQuantity.unit) {
+      return createUnitTotals(leftQuantity.number * rightQuantity.number, UNITLESS);
+    }
+    if (rightQuantity.unit.startsWith('reciprocal:') && rightQuantity.unit.slice('reciprocal:'.length) === leftQuantity.unit) {
+      return createUnitTotals(leftQuantity.number * rightQuantity.number, UNITLESS);
+    }
+  }
   return null;
 }
 
@@ -175,14 +197,28 @@ function multiplyUnitTotals (left, right) {
  * @return {Map|null}        The totals of the quotient, or null when the division cannot be worked out.
  */
 function divideUnitTotals (left, right) {
-  if (!isPlainNumber(right)) {
-    return null;
+  if (isPlainNumber(right)) {
+    const divisor = right.get(UNITLESS);
+    if (divisor === 0) {
+      return null;
+    }
+    return scaleUnitTotals(left, 1 / divisor);
   }
-  const divisor = right.get(UNITLESS);
-  if (divisor === 0) {
+  const dividendQuantity = readSingleQuantity(left);
+  const divisorQuantity = readSingleQuantity(right);
+  if (!dividendQuantity || !divisorQuantity || divisorQuantity.number === 0) {
     return null;
   }
-  return scaleUnitTotals(left, 1 / divisor);
+  if (dividendQuantity.unit === divisorQuantity.unit) {
+    return createUnitTotals(dividendQuantity.number / divisorQuantity.number, UNITLESS);
+  }
+  if (dividendQuantity.unit === UNITLESS) {
+    return createUnitTotals(
+      dividendQuantity.number / divisorQuantity.number,
+      'reciprocal:' + divisorQuantity.unit
+    );
+  }
+  return null;
 }
 
 /**
@@ -478,7 +514,7 @@ function parseOperand (reader) {
   }
   if (token.type === 'number') {
     reader.index++;
-    return createUnitTotals(token.number, token.unit);
+    return createUnitTotals(token.number, token.unit, true);
   }
   if (token.type === 'identifier') {
     reader.index++;
@@ -661,7 +697,8 @@ function evaluateMinimum (argumentList) {
   if (!comparable) {
     return null;
   }
-  return createUnitTotals(Math.min(...comparable.numbers), comparable.unit);
+  const winningIndex = comparable.numbers.indexOf(Math.min(...comparable.numbers));
+  return argumentList[winningIndex].value;
 }
 
 /**
@@ -675,7 +712,8 @@ function evaluateMaximum (argumentList) {
   if (!comparable) {
     return null;
   }
-  return createUnitTotals(Math.max(...comparable.numbers), comparable.unit);
+  const winningIndex = comparable.numbers.indexOf(Math.max(...comparable.numbers));
+  return argumentList[winningIndex].value;
 }
 
 /**
@@ -1043,7 +1081,22 @@ function writeTermNumber (total) {
  * @return {string|null}         The value the calculation resolved to, or null when it cannot be written faithfully.
  */
 function formatUnitTotals (totals) {
+  const writtenQuantity = totals.writtenQuantity;
+  if (
+    writtenQuantity &&
+    totals.size === 1 &&
+    totals.has(writtenQuantity.canonicalUnit) &&
+    totals.get(writtenQuantity.canonicalUnit) === writtenQuantity.canonicalNumber
+  ) {
+    return formatResolvedNumber(writtenQuantity.number) + writtenQuantity.unit;
+  }
   const mergedTotals = mergeUnitsOfSameKind(totals);
+  const hasUnrepresentableReciprocalUnit = [...mergedTotals.keys()].some((unit) => {
+    return unit.startsWith('reciprocal:');
+  });
+  if (hasUnrepresentableReciprocalUnit) {
+    return null;
+  }
   const outputTerms = collectOutputTerms(mergedTotals);
   if (dropsPercentageBasis(mergedTotals, outputTerms)) {
     return null;

package/src/value/math.js

@@ -453,6 +453,30 @@ const NON_NEGATIVE_PROPERTIES = new Set([
   'width'
 ]);
 
+/**
+ * Properties whose computed math values must be integers.
+ *
+ * @type {Set<string>}
+ */
+const INTEGER_VALUE_PROPERTIES = new Set([
+  'column-count',
+  'order',
+  'orphans',
+  'widows',
+  'z-index'
+]);
+
+/**
+ * The inclusive bounds that CSS applies to numeric property values after
+ * resolving a math expression.
+ *
+ * @type {Map<string, {minimum?: number, maximum?: number}>}
+ */
+const NUMERIC_PROPERTY_RANGES = new Map([
+  ['column-count', { minimum: 1 }],
+  ['opacity', { minimum: 0, maximum: 1 }]
+]);
+
 /**
  * Matches a value written as a single negative number, with or without the
  * unit or percent sign that follows its digits.
@@ -461,6 +485,14 @@ const NON_NEGATIVE_PROPERTIES = new Set([
  */
 const NEGATIVE_NUMBER_VALUE = /^-(?:\d+|\d*\.\d+)(?:[a-z]+|%)?$/i;
 
+/**
+ * Matches a resolved unitless number whose value can be rounded or clamped by
+ * a property's numeric range.
+ *
+ * @type {RegExp}
+ */
+const UNIT_LESS_NUMBER_VALUE = /^[+-]?(?:\d+|\d*\.\d+)$/;
+
 /**
  * Clamps what a math function resolved to into the range its property
  * accepts. A negative length written out directly makes the declaration
@@ -475,11 +507,39 @@ const NEGATIVE_NUMBER_VALUE = /^-(?:\d+|\d*\.\d+)(?:[a-z]+|%)?$/i;
  * @return {string}                The resolved value, held inside the property's range.
  */
 function clampResolvedValueToPropertyRange (resolvedValue, property) {
-  const acceptsNegativeValues = !NON_NEGATIVE_PROPERTIES.has(String(property).toLowerCase());
-  if (acceptsNegativeValues || !NEGATIVE_NUMBER_VALUE.test(resolvedValue)) {
+  const normalizedProperty = String(property).toLowerCase();
+  const acceptsNegativeValues = !NON_NEGATIVE_PROPERTIES.has(normalizedProperty);
+  const hasPropertyRange = NUMERIC_PROPERTY_RANGES.has(normalizedProperty);
+  const range = NUMERIC_PROPERTY_RANGES.get(normalizedProperty) || {};
+  const isNegativeNonNegativeValue = !acceptsNegativeValues && NEGATIVE_NUMBER_VALUE.test(resolvedValue);
+  if (isNegativeNonNegativeValue) {
+    const isUnitlessNumber = UNIT_LESS_NUMBER_VALUE.test(resolvedValue);
+    if (!isUnitlessNumber) {
+      return formatResolvedNumber(range.minimum === undefined ? 0 : range.minimum);
+    }
+    if (!hasPropertyRange && !INTEGER_VALUE_PROPERTIES.has(normalizedProperty)) {
+      return '0';
+    }
+  }
+  if (!hasPropertyRange && !INTEGER_VALUE_PROPERTIES.has(normalizedProperty)) {
     return resolvedValue;
   }
-  return '0';
+  if (!UNIT_LESS_NUMBER_VALUE.test(resolvedValue)) {
+    return resolvedValue;
+  }
+
+  const shouldRoundToInteger = INTEGER_VALUE_PROPERTIES.has(normalizedProperty);
+  let numericValue = Number(resolvedValue);
+  if (shouldRoundToInteger) {
+    numericValue = Math.round(numericValue);
+  }
+  if (range.minimum !== undefined) {
+    numericValue = Math.max(range.minimum, numericValue);
+  }
+  if (range.maximum !== undefined) {
+    numericValue = Math.min(range.maximum, numericValue);
+  }
+  return formatResolvedNumber(numericValue);
 }
 
 /**

package/src/value/minify.js

@@ -38,6 +38,7 @@ import {
 import {
   collapseShorthandParts,
   convertAbsoluteLengthToPx,
+  formatCompactNumber,
   formatResolvedNumber,
   hasSubstitutedParts,
   normalizeScaleComponent,
@@ -623,6 +624,40 @@ function isCssDigit (character) {
   return character >= '0' && character <= '9';
 }
 
+/**
+ * Converts OKLCH lightness and chroma percentages when doing so is shorter,
+ * including the separator each spelling needs before the hue.
+ *
+ * @param  {string} value  The normalized arguments of an `oklch()` function.
+ * @return {string}        The arguments with shorter percentage spellings.
+ */
+function minifyOklchPercentages (value) {
+  const slashIndex = value.indexOf('/');
+  const componentsText = slashIndex === -1 ? value : value.slice(0, slashIndex);
+  const alphaText = slashIndex === -1 ? '' : value.slice(slashIndex + 1);
+  const components = componentsText.trim().split(' ');
+  if (components.length !== 3) {
+    return value;
+  }
+
+  let [lightness, chroma, hue] = components;
+  if (lightness.endsWith('%')) {
+    lightness = formatCompactNumber(Number.parseFloat(lightness) / 100);
+  }
+  if (chroma.endsWith('%')) {
+    const convertedChroma = formatCompactNumber(
+      Number.parseFloat(chroma) / 100 * OKLCH_CHROMA_PERCENT_REFERENCE
+    );
+    const convertedWithHueSeparator = convertedChroma.length + 1;
+    if (chroma.length < convertedWithHueSeparator) {
+      return [lightness, chroma + hue].join(' ') + (slashIndex === -1 ? '' : '/' + alphaText);
+    }
+    chroma = convertedChroma;
+  }
+
+  return [lightness, chroma, hue].join(' ') + (slashIndex === -1 ? '' : '/' + alphaText);
+}
+
 /**
  * Converts `oklch()` colors that fall inside the sRGB gamut to their hex
  * equivalent when that is shorter. Out-of-gamut colors have no sRGB
@@ -747,6 +782,9 @@ function convertColorsToHex (val) {
       return integer;
     });
     minified = compactNegativeColorChannelSpacing(func, minified);
+    if (func.toLowerCase() === 'oklch') {
+      minified = minifyOklchPercentages(minified);
+    }
     return func + '(' + minified.trim() + ')';
   });