@thejaredwilcurt/csslop 0.0.38 → 0.0.40

package/src/rules/custom-properties.js

@@ -2,6 +2,9 @@
  * @file Custom property value whitespace and comment processing for CSS minification.
  */
 
+import { tokenizeCssValue } from '../parser/tokenizer.js';
+import { formatCompactNumber } from '../value/shared.js';
+
 /**
  * Removes spaces after commas only inside parenthesized groups (function
  * calls like `var()`, `calc()`), leaving top-level comma spacing intact.
@@ -34,15 +37,89 @@ function removeSpacesAfterCommasInsideFunctions (value) {
 }
 
 /**
- * Strips leading zeros from decimal numbers in a custom property value
- * (e.g. `0.5` becomes `.5`, `-0.02em` becomes `-.02em`).
+ * The token types whose text begins with a number, and so may hold digits that
+ * are written out longer than they need to be.
+ *
+ * @type {Set<string>}
+ */
+const NUMERIC_TOKEN_TYPES = new Set(['number', 'dimension', 'percentage']);
+
+/**
+ * Splits a numeric token into the decimal number it states and the unit
+ * written on it. A number carrying a scientific exponent does not match, since
+ * its digits cannot be restated without reading the exponent along with them,
+ * and neither does a whole number, which has no zeros to shed.
+ *
+ * @type {RegExp}
+ */
+const DECIMAL_NUMBER_TOKEN = /^([+-]?(?:\d+\.\d+|\.\d+))([a-zA-Z%]*)$/;
+
+/**
+ * Restates a numeric token as the shortest way of writing the same number,
+ * dropping the zeros that lead the decimal point and the ones that trail the
+ * digits behind it (`-0.020em` becomes `-.02em`). A token that is not a plain
+ * decimal, or whose number is only expressible in scientific notation, is left
+ * exactly as it was written.
+ *
+ * @param  {string} tokenText  The text of a number, dimension, or percentage token.
+ * @return {string}            The shortest way of writing that same token.
+ */
+function shortenNumericToken (tokenText) {
+  const decimalNumber = tokenText.match(DECIMAL_NUMBER_TOKEN);
+  if (!decimalNumber) {
+    return tokenText;
+  }
+  const [, number, unit] = decimalNumber;
+  const shortened = formatCompactNumber(number);
+  // A number too small or too large to write out plainly comes back in
+  // scientific notation, which reads as a different token once a unit follows
+  if (shortened.includes('e')) {
+    return tokenText;
+  }
+  return shortened + unit;
+}
+
+/**
+ * Reports whether two token lists say the same thing, which is what tells a
+ * rewritten value apart from one whose tokens have run together. Shortening
+ * the numbers of `1.0.0` would leave `10`, a single number where two stood.
+ *
+ * @param  {Array}   tokens           The tokens the value was read as.
+ * @param  {Array}   rewrittenTokens  The tokens the rewritten value reads as.
+ * @return {boolean}                  Whether the rewrite left every token boundary in place.
+ */
+function hasSameTokenBoundaries (tokens, rewrittenTokens) {
+  if (tokens.length !== rewrittenTokens.length) {
+    return false;
+  }
+  return tokens.every((token, index) => {
+    return token.type === rewrittenTokens[index].type;
+  });
+}
+
+/**
+ * Writes every number in a custom property value the shortest way it can be
+ * written. A custom property holds an arbitrary token sequence, so the value
+ * is walked token by token: only the tokens that state a number are rewritten,
+ * leaving strings, urls, and hash tokens exactly as the author wrote them.
  *
  * @param  {string} value  The custom property value string.
- * @return {string}        The value with leading zeros removed from decimals.
+ * @return {string}        The value with its numbers shortened.
  */
-function stripLeadingZerosFromDecimals (value) {
-  // Match a boundary (start, whitespace, comma, open-paren), optional sign, then leading zeros before a decimal
-  return value.replace(/(^|\s|,|\()(-?)0+(\.\d+)/g, '$1$2$3');
+function shortenNumbers (value) {
+  const tokens = tokenizeCssValue(value);
+  const rewritten = tokens
+    .map((token) => {
+      if (!NUMERIC_TOKEN_TYPES.has(token.type)) {
+        return token.text;
+      }
+      return shortenNumericToken(token.text);
+    })
+    .join('');
+  if (!hasSameTokenBoundaries(tokens, tokenizeCssValue(rewritten))) {
+    return value;
+  }
+  return rewritten;
 }
 
 /**
@@ -69,7 +146,7 @@ function processCustomPropertyComments (value) {
  * Collapses whitespace in a custom property value while preserving
  * token boundaries. Each whitespace sequence is reduced to a single
  * space, spaces after commas inside function calls are removed, and
- * leading zeros on decimal numbers are stripped.
+ * every number is written the shortest way it can be.
  *
  * @param  {string} value  The raw custom property value string.
  * @return {string}        The minified custom property value.
@@ -79,8 +156,8 @@ function collapseCustomPropertyWhitespace (value) {
   let collapsed = value.replace(/\s+/g, ' ');
   // Remove spaces after commas only inside function calls (e.g. var(--bar, 1.5) → var(--bar,1.5))
   collapsed = removeSpacesAfterCommasInsideFunctions(collapsed);
-  // Strip leading zeros from decimals (e.g. 0.5 → .5, -0.02em → -.02em)
-  collapsed = stripLeadingZerosFromDecimals(collapsed);
+  // Shorten decimals (e.g. 0.5 → .5, -0.020em → -.02em)
+  collapsed = shortenNumbers(collapsed);
   return collapsed;
 }
 export {

package/src/rules/lang.js

@@ -5,9 +5,12 @@
  */
 
 import {
-  findMatchingCloseParenthesis,
-  findNextFunctionCallOutsideStrings
-} from './selectors.js';
+  findMatchingParenthesis,
+  skipParenthesizedGroup,
+  splitTopLevel
+} from '../parser/source-search.js';
+
+import { findNextFunctionCallOutsideStrings } from './selectors.js';
 
 /**
  * The `:lang()` pseudo-class opening, as it is written in minified output.
@@ -79,49 +82,6 @@ function requiresEscape (character) {
   );
 }
 
-/**
- * Splits the argument list of a `:lang()` into its individual language-codes,
- * treating only the commas outside of a quoted code as separators.
- *
- * @param  {string} argumentList  The text between the parentheses of a `:lang()`.
- * @return {Array}                The language-codes, still in the form they were written in.
- */
-function splitLanguageCodes (argumentList) {
-  const codes = [];
-  let current = '';
-  let openQuote = '';
-  for (let index = 0; index < argumentList.length; index++) {
-    const character = argumentList[index];
-    const nextCharacter = argumentList[index + 1] ?? '';
-    if (character === '\\') {
-      // An escape carries the character behind it along, whatever it may be
-      current += character + nextCharacter;
-      index++;
-      continue;
-    }
-    if (openQuote) {
-      current += character;
-      if (character === openQuote) {
-        openQuote = '';
-      }
-      continue;
-    }
-    if (character === '"' || character === '\'') {
-      openQuote = character;
-      current += character;
-      continue;
-    }
-    if (character === ',') {
-      codes.push(current);
-      current = '';
-      continue;
-    }
-    current += character;
-  }
-  codes.push(current);
-  return codes;
-}
-
 /**
  * Reads the plain language-code out of one `:lang()` argument, stripping the
  * quotes or escapes that were only there to let it be written. Arguments this
@@ -191,7 +151,7 @@ function formatLanguageCode (code) {
  */
 function minifyLanguageArguments (argumentList) {
   const codes = [];
-  for (const argument of splitLanguageCodes(argumentList)) {
+  for (const argument of splitTopLevel(argumentList, ',')) {
     const code = readLanguageCode(argument);
     if (code === null) {
       return null;
@@ -217,7 +177,7 @@ function findLanguageFunctions (selector) {
       break;
     }
     const openIndex = startIndex + LANGUAGE_FUNCTION.length - 1;
-    const closeIndex = findMatchingCloseParenthesis(selector, openIndex);
+    const closeIndex = findMatchingParenthesis(selector, openIndex);
     if (closeIndex === -1) {
       break;
     }
@@ -271,15 +231,19 @@ function minifyLanguageSelector (selector) {
  * @return {boolean}           True when an enclosing parenthesis is still open at that position.
  */
 function isInsideFunction (selector, index) {
-  let depth = 0;
-  for (const character of selector.slice(0, index)) {
-    if (character === '(') {
-      depth++;
-    } else if (character === ')') {
-      depth--;
+  let position = 0;
+  while (position < index) {
+    if (selector[position] !== '(') {
+      position++;
+      continue;
+    }
+    const afterGroupIndex = skipParenthesizedGroup(selector, position);
+    if (afterGroupIndex > index) {
+      return true;
     }
+    position = afterGroupIndex;
   }
-  return depth > 0;
+  return false;
 }
 
 /**
@@ -305,7 +269,7 @@ function splitAroundLanguageCodes (selector) {
   if (isInsideFunction(selector, startIndex)) {
     return null;
   }
-  const codes = splitLanguageCodes(selector.slice(openIndex + 1, closeIndex)).map((code) => {
+  const codes = splitTopLevel(selector.slice(openIndex + 1, closeIndex), ',').map((code) => {
     return code.trim();
   });
   if (codes.some((code) => {

package/src/rules/normalize.js

@@ -48,6 +48,85 @@ function unescapeSelector (selector) {
   });
 }
 
+/**
+ * Matches a single whitespace character.
+ *
+ * @type {RegExp}
+ */
+const WHITESPACE_CHARACTER = /\s/;
+
+/**
+ * Collapses every run of whitespace in a selector down to the single space a
+ * descendant combinator is written with, and trims the ends. Whitespace held
+ * inside a quoted string, or written as an escape, is copied through untouched:
+ * there it is part of the value being matched rather than a combinator.
+ *
+ * @param  {string} selector  The raw selector string.
+ * @return {string}           The selector with its combinator whitespace normalized.
+ */
+function normalizeSelectorWhitespace (selector) {
+  let normalized = '';
+  let quoteDelimiter = '';
+  let index = 0;
+  while (index < selector.length) {
+    const character = selector[index];
+    if (quoteDelimiter) {
+      if (character === '\\') {
+        normalized += selector.slice(index, index + 2);
+        index += 2;
+        continue;
+      }
+      if (character === quoteDelimiter) {
+        quoteDelimiter = '';
+      }
+      normalized += character;
+      index++;
+      continue;
+    }
+    if (character === '"' || character === '\'') {
+      quoteDelimiter = character;
+      normalized += character;
+      index++;
+      continue;
+    }
+    if (character === '\\') {
+      normalized += selector.slice(index, index + 2);
+      index += 2;
+      continue;
+    }
+    if (WHITESPACE_CHARACTER.test(character)) {
+      normalized += ' ';
+      while (index < selector.length && WHITESPACE_CHARACTER.test(selector[index])) {
+        index++;
+      }
+      continue;
+    }
+    normalized += character;
+    index++;
+  }
+  return normalized.trim();
+}
+
+/**
+ * Rewrites every selector in a stylesheet into its whitespace-normalized form,
+ * descending into nested rules and the bodies of at-rules. Running this before
+ * any rule is rewritten means each later pass compares, nests, and prints
+ * selectors that are already written the one canonical way, so a selector that
+ * happens to be spaced out in the source cannot leak that spacing into a
+ * selector the minifier builds from it.
+ *
+ * @param {Array} rules  The AST rule nodes to normalize.
+ */
+function normalizeRuleSelectors (rules) {
+  for (const rule of rules || []) {
+    if (rule?.selectors?.length) {
+      rule.selectors = rule.selectors.map(normalizeSelectorWhitespace);
+    }
+    normalizeRuleSelectors(rule?.rules);
+    normalizeRuleSelectors(rule?.declarations);
+  }
+}
+
 /**
  * Normalizes a `@layer` cascade layer name list by trimming it and removing the
  * optional whitespace that may surround the commas separating the layer names.
@@ -126,6 +205,7 @@ export {
   canUnwrapSupports,
   normalizeLayerNames,
   normalizeMedia,
+  normalizeRuleSelectors,
   normalizeSupports,
   unescapeIdent,
   unescapeSelector