@thejaredwilcurt/csslop 0.0.20 → 0.0.22

package/src/value/minify.js

@@ -30,6 +30,7 @@ import {
 } from './relative-colors.js';
 import {
   collapseShorthandParts,
+  convertAbsoluteLengthToPx,
   normalizeScaleComponent,
   parseAlphaString,
   parseAngleToDegrees,
@@ -59,7 +60,9 @@ const POSITION_AREA_SHORTHANDS = {
  * Regex matching hex color tokens (#rgb, #rgba, #rrggbb, #rrggbbaa) and CSS named
  * color keywords. Hex patterns are ordered longest-first to avoid partial matches.
  * Named colors are sorted longest-first so longer names like `darkslategray` are
- * matched before shorter substrings.
+ * matched before shorter substrings. A named color only counts as a color keyword
+ * when it is a complete identifier, so hyphens on either side disqualify it (this
+ * keeps identifiers such as the custom property name in `var(--grey)` intact).
  *
  * @type {RegExp}
  */
@@ -68,11 +71,11 @@ const COLOR_TOKEN_PATTERN = new RegExp(
   '#[0-9a-fA-F]{6}(?![0-9a-fA-F])|' +
   '#[0-9a-fA-F]{4}(?![0-9a-fA-F])|' +
   '#[0-9a-fA-F]{3}(?![0-9a-fA-F])|' +
-  '\\b(?:' +
+  '(?<![\\w-])(?:' +
   Object.keys(namedColors).sort((a, b) => {
     return b.length - a.length;
   }).join('|') +
-  ')\\b',
+  ')(?![\\w-])',
   'gi'
 );
 
@@ -180,6 +183,37 @@ function replaceOutsideStringsAndUrls (value, replacer) {
   return result;
 }
 
+/**
+ * Lowercases every hex color token in a CSS value, since uppercase hex digits
+ * compress worse and are equivalent to their lowercase form.
+ *
+ * @param  {string} value  The CSS value string.
+ * @return {string}        The value with all hex color tokens lowercased.
+ */
+function lowercaseHexColors (value) {
+  return replaceOutsideStringsAndUrls(value, (segment) => {
+    // Match hex color tokens of 3 to 8 hex digits
+    return segment.replace(/#([0-9a-fA-F]{3,8})\b/gi, (hexColor) => {
+      return hexColor.toLowerCase();
+    });
+  });
+}
+
+/**
+ * Removes whitespace that precedes a hex color token. A `#` unambiguously starts
+ * a hash token in CSS, so no separator is required between it and a preceding
+ * ident, keyword, or number (e.g. `1px solid #f00` becomes `1px solid#f00`).
+ *
+ * @param  {string} value  The CSS value string.
+ * @return {string}        The value with spaces before hex colors removed.
+ */
+function elideSpaceBeforeHexColors (value) {
+  return replaceOutsideStringsAndUrls(value, (segment) => {
+    // Match whitespace followed by a hex color token of 3 to 8 hex digits
+    return segment.replace(/\s+#([0-9a-fA-F]{3,8})\b/gi, '#$1');
+  });
+}
+
 /**
  * Chooses the shortest valid representation for the path inside a `url(...)`
  * token, weighing an unquoted form, an escaped single space, and a quoted form.
@@ -678,15 +712,59 @@ function convertMillisecondsToSeconds (value) {
   });
 }
 
+/**
+ * Matches an absolute CSS length token: an optionally signed number followed by
+ * an absolute length unit. The lookbehind rejects digits that belong to a larger
+ * identifier, such as the custom property name in `var(--size-2in)`, where the
+ * digits and unit do not form a value of their own.
+ *
+ * @type {RegExp}
+ */
+const ABSOLUTE_LENGTH_PATTERN = /(?<![\w#.%-])(-?(?:\d+|\d*\.\d+))(pt|pc|in|cm|mm|q)\b/gi;
+
+/**
+ * The largest difference in pixels that a rounded conversion may introduce and
+ * still count as exact, which allows for binary floating point error without
+ * allowing a visible change to the rendered length.
+ *
+ * @type {number}
+ */
+const PIXEL_ROUNDING_TOLERANCE = 1e-6;
+
+/**
+ * Converts absolute length values (pt, pc, in, cm, mm, Q) to their pixel
+ * equivalent when the conversion is exact and the pixel form is no longer than
+ * the original. Normalizing to px also improves compression by reducing the
+ * number of distinct unit strings in the output.
+ *
+ * @param  {string} value  A CSS value segment, outside strings and urls.
+ * @return {string}        The segment with eligible absolute lengths converted to px.
+ */
+function convertAbsoluteLengthsToPx (value) {
+  return value.replace(ABSOLUTE_LENGTH_PATTERN, (token, amount, unit) => {
+    const pixels = convertAbsoluteLengthToPx(amount, unit);
+    if (pixels === null) {
+      return token;
+    }
+    const converted = roundCompactNumber(pixels) + 'px';
+    const isExact = Math.abs(parseFloat(converted) - pixels) < PIXEL_ROUNDING_TOLERANCE;
+    if (!isExact || converted.length > token.length) {
+      return token;
+    }
+    return converted;
+  });
+}
+
 /**
  * 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.
- * @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.
+ * @param  {boolean} allowsHexSpaceElision  Whether the space preceding a hex color may be removed.
+ * @return {string}                         The value with property-specific optimizations applied.
  */
-function applyPropertyOptimizations (val, property) {
+function applyPropertyOptimizations (val, property, allowsHexSpaceElision) {
   if (property === 'font-weight' && isUnicodeCharset()) {
     // Replace font-weight keyword "bold" with its numeric equivalent
     val = val.replace(/\bbold\b/gi, '700');
@@ -833,11 +911,11 @@ function applyPropertyOptimizations (val, property) {
     });
   }
 
-  if (property === 'font-size') {
-    // Convert point (pt) font-size values to their pixel (px) equivalent
-    val = val.replace(/^(-?(?:\d+|\d*\.\d+))pt$/i, (match, amount) => {
-      return roundCompactNumber(parseFloat(amount) * (96 / 72)) + 'px';
-    });
+  // Custom properties hold an arbitrary token stream rather than a typed value,
+  // so a unit-like token in one is not necessarily a length.
+  const isCustomProperty = Boolean(property) && property.startsWith('--');
+  if (!isCustomProperty) {
+    val = replaceOutsideStringsAndUrls(val, convertAbsoluteLengthsToPx);
   }
 
   if (property === 'syntax') {
@@ -859,12 +937,9 @@ function applyPropertyOptimizations (val, property) {
   val = replaceOutsideStringsAndUrls(val, shortenColorValues);
 
   // Remove space before hex colors (second pass after color evaluations)
-  val = replaceOutsideStringsAndUrls(val, (segment) => {
-    // Preserve space after border style keywords (solid, dashed, etc.) before hex colors
-    segment = segment.replace(/\b(solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|none)\s+#([0-9a-fA-F]{3,8})\b/gi, '$1 #$2');
-    // Then remove other spaces before hex colors
-    return segment.replace(/\s+#([0-9a-fA-F]{3,8})\b/gi, '#$1');
-  });
+  if (allowsHexSpaceElision) {
+    val = elideSpaceBeforeHexColors(val);
+  }
   if (property !== 'transform' && property !== 'background' && property !== 'src') {
     // Restore space after close-paren when followed by an alphanumeric, hash, or hyphen
     val = val.replace(/\)(?=[0-9a-zA-Z#-])/g, ') ');
@@ -911,9 +986,6 @@ function applyPropertyOptimizations (val, property) {
   if (property === 'border') {
     // Remove default "medium" border-width keyword
     val = val.replace(/\bmedium\s+/g, '');
-    // Restore missing space between border-style and a 4-digit hex color (with alpha) when they are adjacent
-    // This is needed because solid#0000 could be parsed as solid followed by #000 followed by position 0
-    val = val.replace(/\b(solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|none)#([0-9a-fA-F]{4})\b/gi, '$1 #$2');
   }
 
   if (property === 'outline') {
@@ -982,6 +1054,10 @@ function minifyValue (declaration) {
     return 'none';
   }
   let val = declaration.value;
+  // Values assembled from already-minified longhands keep the separator spaces
+  // between their components, because those spaces delimit the shorthand's
+  // parts rather than the authored whitespace of a single written value.
+  const allowsHexSpaceElision = !declaration.isAssembledShorthand;
 
   if (typeof val === 'string') {
     val = val.trim();
@@ -1024,20 +1100,10 @@ function minifyValue (declaration) {
       val = roundCompactNumber(rawNumber, 4) + rawUnit;
     }
 
-    // Remove space before hex colors
-    val = replaceOutsideStringsAndUrls(val, (segment) => {
-      // Preserve space after border style keywords by using a temporary placeholder
-      segment = segment.replace(/\b(solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|none)\s+#([0-9a-fA-F]{3,8})\b/gi, '$1__BORDER_SPACE__#$2');
-      // Remove other spaces before hex colors
-      segment = segment.replace(/\s+#([0-9a-fA-F]{3,8})\b/gi, '#$1');
-      // Restore the preserved space
-      segment = segment.replace(/__BORDER_SPACE__#/g, ' #');
-      // Lowercase hex color tokens for consistency and shorter output
-      segment = segment.replace(/#([0-9a-fA-F]{3,8})\b/gi, (m) => {
-        return m.toLowerCase();
-      });
-      return segment;
-    });
+    val = lowercaseHexColors(val);
+    if (allowsHexSpaceElision) {
+      val = elideSpaceBeforeHexColors(val);
+    }
 
     // Convert color functions to hex equivalents
     val = convertColorsToHex(val);
@@ -1049,7 +1115,7 @@ function minifyValue (declaration) {
     val = simplifyEquivalentLightDarkFunctions(val);
 
     // Property-specific optimizations
-    val = applyPropertyOptimizations(val, declaration.property);
+    val = applyPropertyOptimizations(val, declaration.property, allowsHexSpaceElision);
 
     // Minify relative color syntax (identity resolution and whitespace collapsing)
     val = minifyRelativeColorSyntax(val);

package/src/value/syntax.js

@@ -53,4 +53,85 @@ function findMatchingParenthesis (value, openParenIndex) {
   return -1;
 }
 
-export { findMatchingParenthesis };
+/**
+ * Splits a CSS value into its top-level components, keeping parenthesized
+ * function arguments and quoted strings intact. Components are separated by
+ * whitespace, or by a `#`, which always starts a hash token and therefore ends
+ * any component already in progress.
+ *
+ * For example, `rgb(0 0 0) red` yields `["rgb(0 0 0)", "red"]`, and the
+ * minified `red#00f` yields `["red", "#00f"]`.
+ *
+ * @param  {string} value  The CSS value to split.
+ * @return {Array}         The top-level components of the value.
+ */
+function splitTopLevelComponents (value) {
+  const components = [];
+  let current = '';
+  let depth = 0;
+  let activeQuote = '';
+  let index = 0;
+
+  while (index < value.length) {
+    const character = value[index];
+
+    if (activeQuote) {
+      current += character;
+      if (character === '\\') {
+        current += value[index + 1] ?? '';
+        index += 2;
+        continue;
+      }
+      if (character === activeQuote) {
+        activeQuote = '';
+      }
+      index++;
+      continue;
+    }
+
+    if (character === '"' || character === '\'') {
+      activeQuote = character;
+      current += character;
+      index++;
+      continue;
+    }
+
+    if (character === '(') {
+      depth++;
+    }
+    if (character === ')' && depth > 0) {
+      depth--;
+    }
+
+    // Match any whitespace character, which separates components at depth zero
+    const isSeparator = depth === 0 && /\s/.test(character);
+    if (isSeparator) {
+      if (current) {
+        components.push(current);
+        current = '';
+      }
+      index++;
+      continue;
+    }
+
+    const startsHashToken = character === '#' && depth === 0 && current !== '';
+    if (startsHashToken) {
+      components.push(current);
+      current = '';
+    }
+
+    current += character;
+    index++;
+  }
+
+  if (current) {
+    components.push(current);
+  }
+
+  return components;
+}
+
+export {
+  findMatchingParenthesis,
+  splitTopLevelComponents
+};