@thejaredwilcurt/csslop 0.0.19 → 0.0.21

package/src/value/minify.js

@@ -9,6 +9,7 @@ import { evaluateColorMix } from './color-mix.js';
 import {
   convertLabToHex,
   convertOklabToHex,
+  convertOklchToHex,
   hslToRgbChannels,
   hwbToRgbChannels,
   parseHex,
@@ -31,6 +32,7 @@ import {
   collapseShorthandParts,
   normalizeScaleComponent,
   parseAlphaString,
+  parseAngleToDegrees,
   roundCompactNumber
 } from './shared.js';
 import { findMatchingParenthesis } from './syntax.js';
@@ -57,7 +59,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}
  */
@@ -66,11 +70,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'
 );
 
@@ -178,6 +182,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.
@@ -336,6 +371,97 @@ function normalizeWhitespaceAndQuotes (val, property) {
   return val;
 }
 
+/**
+ * The OKLCH chroma value that `100%` resolves to, per CSS Color Level 4.
+ *
+ * @type {number}
+ */
+const OKLCH_CHROMA_PERCENT_REFERENCE = 0.4;
+
+/**
+ * Regex matching an `oklch()` function with three space-separated components
+ * and an optional slash-delimited alpha. Lightness and chroma accept numbers
+ * or percentages, hue accepts a number with an optional CSS angle unit, and
+ * every component accepts the `none` keyword.
+ *
+ * @type {RegExp}
+ */
+const OKLCH_FUNCTION_PATTERN = new RegExp(
+  '\\boklch\\(\\s*' +
+  '(none|-?(?:\\d+|\\d*\\.\\d+)%?)\\s+' +
+  '(none|-?(?:\\d+|\\d*\\.\\d+)%?)\\s+' +
+  '(none|-?(?:\\d+|\\d*\\.\\d+)(?:deg|grad|rad|turn)?)' +
+  '(?:\\s*/\\s*(none|-?(?:\\d+|\\d*\\.\\d+)%?))?' +
+  '\\s*\\)',
+  'gi'
+);
+
+/**
+ * Parses an OKLCH lightness or chroma component into its numeric value.
+ * Missing components (`none`) resolve to zero, and percentages are scaled
+ * against the reference value for that component.
+ *
+ * @param  {string}      token             The raw component token.
+ * @param  {number}      percentReference  The value that `100%` represents for this component.
+ * @return {number|null}                   The numeric component value, or null when unparsable.
+ */
+function parseOklchComponent (token, percentReference) {
+  const normalized = token.trim().toLowerCase();
+  if (normalized === 'none') {
+    return 0;
+  }
+  const numeric = parseFloat(normalized);
+  if (!Number.isFinite(numeric)) {
+    return null;
+  }
+  if (normalized.endsWith('%')) {
+    return numeric / 100 * percentReference;
+  }
+  return numeric;
+}
+
+/**
+ * Parses an OKLCH hue component into degrees, treating `none` as zero.
+ *
+ * @param  {string}      token  The raw hue token, optionally carrying an angle unit.
+ * @return {number|null}        The hue in degrees, or null when unparsable.
+ */
+function parseOklchHue (token) {
+  const normalized = token.trim().toLowerCase();
+  if (normalized === 'none') {
+    return 0;
+  }
+  return parseAngleToDegrees(normalized);
+}
+
+/**
+ * Converts `oklch()` colors that fall inside the sRGB gamut to their hex
+ * equivalent when that is shorter. Out-of-gamut colors have no sRGB
+ * representation, so they are left in their native color space.
+ *
+ * @param  {string} value  The CSS value string that may contain oklch() colors.
+ * @return {string}        The value with in-gamut oklch() colors replaced by hex.
+ */
+function convertOklchFunctionsToHex (value) {
+  return value.replace(OKLCH_FUNCTION_PATTERN, (match, lightnessToken, chromaToken, hueToken, alphaToken) => {
+    const lightness = parseOklchComponent(lightnessToken, 1);
+    const chroma = parseOklchComponent(chromaToken, OKLCH_CHROMA_PERCENT_REFERENCE);
+    const hue = parseOklchHue(hueToken);
+    if (lightness === null || chroma === null || hue === null) {
+      return match;
+    }
+    const alpha = alphaToken?.trim().toLowerCase() === 'none' ? 0 : parseAlphaString(alphaToken);
+    const hex = convertOklchToHex(lightness, chroma, hue, alpha);
+    if (!hex) {
+      return match; // out-of-gamut: keep native oklch form
+    }
+    if (hex.length < match.length) {
+      return hex;
+    }
+    return match;
+  });
+}
+
 /**
  * Converts CSS color functions (rgb, hsl, hwb, oklab, color-mix, etc.) to their
  * shortest hex equivalents and applies hex shortening.
@@ -378,6 +504,9 @@ function convertColorsToHex (val) {
     return match;
   });
 
+  // Convert in-gamut oklch() to hex before precision rounding, so the full authored precision is used
+  val = convertOklchFunctionsToHex(val);
+
   // Minify whitespace and numeric precision inside wide-gamut and functional color notations
   val = val.replace(/\b(oklab|oklch|lch|lab|color|hwb)\((.*?)\)/gi, (match, func, inner) => {
     // Collapse whitespace to single space
@@ -586,11 +715,12 @@ function convertMillisecondsToSeconds (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.
- * @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');
@@ -763,12 +893,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, ') ');
@@ -815,9 +942,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') {
@@ -886,6 +1010,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();
@@ -928,20 +1056,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);
@@ -953,7 +1071,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/shared.js

@@ -113,6 +113,36 @@ function parseAlphaString (alphaStr, fallback = 1) {
   return parseFloat(alphaStr);
 }
 
+/**
+ * Conversion factors from each CSS angle unit to degrees.
+ *
+ * @type {{[key: string]: number}}
+ */
+const ANGLE_UNIT_TO_DEGREES = {
+  deg: 1,
+  grad: 360 / 400,
+  rad: 180 / Math.PI,
+  turn: 360
+};
+
+/**
+ * Parses a CSS angle token (e.g. "90", "90deg", ".25turn") into degrees.
+ * Unitless values are treated as degrees, per the CSS Color specification's
+ * handling of hue components.
+ *
+ * @param  {string}      angleToken  The angle token, with or without a unit suffix.
+ * @return {number|null}             The angle in degrees, or null if the token is not a valid angle.
+ */
+function parseAngleToDegrees (angleToken) {
+  // Capture the numeric portion and an optional CSS angle unit suffix
+  const match = String(angleToken).trim().match(/^(-?(?:\d+|\d*\.\d+))(deg|grad|rad|turn)?$/i);
+  if (!match) {
+    return null;
+  }
+  const unit = match[2] ? match[2].toLowerCase() : 'deg';
+  return parseFloat(match[1]) * ANGLE_UNIT_TO_DEGREES[unit];
+}
+
 /**
  * Collapses redundant CSS shorthand parts using the standard box-model
  * reduction rules: 4-value → 3-value → 2-value → 1-value.
@@ -142,5 +172,6 @@ export {
   formatDimension,
   normalizeScaleComponent,
   parseAlphaString,
+  parseAngleToDegrees,
   roundCompactNumber
 };

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
+};