@thejaredwilcurt/csslop 0.0.37 → 0.0.39

package/src/value/minify.js

@@ -3,6 +3,12 @@
  */
 
 import { isUnicodeCharset } from '../context.js';
+import {
+  findMatchingParenthesis,
+  skipParenthesizedGroup,
+  skipQuotedString,
+  startsUrlToken
+} from '../parser/source-search.js';
 import { resolveUnicodeEscape } from '../utilities.js';
 
 import { evaluateColorMix } from './color-mix.js';
@@ -31,12 +37,12 @@ import {
 import {
   collapseShorthandParts,
   convertAbsoluteLengthToPx,
+  hasSubstitutedParts,
   normalizeScaleComponent,
   parseAlphaString,
   parseAngleToDegrees,
   roundCompactNumber
 } from './shared.js';
-import { findMatchingParenthesis } from './syntax.js';
 import { elideRedundantSeparators } from './tokens.js';
 import { minifyTransformValue } from './transforms.js';
 import { optimizeUnicodeRange } from './unicode-range.js';
@@ -136,68 +142,24 @@ function splitValueSegments (value) {
   const segments = [];
   let index = 0;
 
-  const consumeQuoted = (start) => {
-    const quote = value[start];
-    let end = start + 1;
-    while (end < value.length) {
-      if (value[end] === '\\') {
-        end += 2;
-        continue;
-      }
-      if (value[end] === quote) {
-        end++;
-        break;
-      }
-      end++;
-    }
-    return end;
-  };
-
-  const startsUrl = (start) => {
-    return value.slice(start, start + 4).toLowerCase() === 'url(';
-  };
-
-  const consumeUrl = (start) => {
-    let depth = 1;
-    let end = start + 4;
-    while (end < value.length && depth > 0) {
-      if (value[end] === '"' || value[end] === '\'') {
-        end = consumeQuoted(end);
-        continue;
-      }
-      // An escaped character is url data, never the parenthesis that ends it
-      if (value[end] === '\\') {
-        end += 2;
-        continue;
-      }
-      if (value[end] === '(') {
-        depth++;
-      }
-      if (value[end] === ')') {
-        depth--;
-      }
-      end++;
-    }
-    return end;
-  };
-
   while (index < value.length) {
     if (value[index] === '"' || value[index] === '\'') {
-      const end = consumeQuoted(index);
+      const end = skipQuotedString(value, index);
       segments.push({ text: value.slice(index, end), isLiteral: true });
       index = end;
       continue;
     }
 
-    if (startsUrl(index)) {
-      const end = consumeUrl(index);
+    if (startsUrlToken(value, index)) {
+      // The `url(` token opens its parenthesized group at its fourth character
+      const end = skipParenthesizedGroup(value, index + 3);
       segments.push({ text: value.slice(index, end), isLiteral: true });
       index = end;
       continue;
     }
 
     const start = index;
-    while (index < value.length && value[index] !== '"' && value[index] !== '\'' && !startsUrl(index)) {
+    while (index < value.length && value[index] !== '"' && value[index] !== '\'' && !startsUrlToken(value, index)) {
       index++;
     }
     segments.push({ text: value.slice(start, index), isLiteral: false });
@@ -836,7 +798,31 @@ const ZERO_INITIAL_PROPERTIES = new Set(['margin', 'padding']);
  *
  * @type {Set<string>}
  */
-const AUTO_INITIAL_PROPERTIES = new Set(['min-width', 'min-height']);
+const AUTO_INITIAL_PROPERTIES = new Set([
+  'min-width',
+  'min-height',
+  'hyphenate-limit-chars'
+]);
+
+/**
+ * Properties whose initial value is a single keyword longer than the global
+ * `initial` keyword itself. These replacements are applied when serializing
+ * declarations, because shorthand builders reconstruct their value from the
+ * actual longhand keywords, and a CSS-wide keyword such as `initial` is only
+ * valid as a declaration's entire value.
+ *
+ * @type {Map<string, string>}
+ */
+const LENGTHY_INITIAL_KEYWORDS = new Map([
+  ['background-clip', 'border-box'],
+  ['background-origin', 'padding-box'],
+  ['border-collapse', 'separate'],
+  ['box-sizing', 'content-box'],
+  ['mask-clip', 'border-box'],
+  ['mask-origin', 'border-box'],
+  ['vertical-align', 'baseline'],
+  ['writing-mode', 'horizontal-tb']
+]);
 
 /**
  * Properties whose value is a time, where a millisecond amount may be worth
@@ -988,6 +974,102 @@ function reorderBorderWidthBeforeStyle (value) {
   return value.replace(BORDER_STYLE_BEFORE_WIDTH_PATTERN, '$2 $1');
 }
 
+/**
+ * Matches a trailing `!important` flag, so the components in front of it can be
+ * rewritten without the flag being mistaken for part of the last one.
+ *
+ * @type {RegExp}
+ */
+const IMPORTANT_SUFFIX_PATTERN = /!important$/i;
+
+/**
+ * Separates a value from the `!important` flag it may end with.
+ *
+ * @param  {string} value  The declaration value, possibly flagged important.
+ * @return {object}        The components in front of the flag, and the flag itself or an empty string.
+ */
+function splitImportantSuffix (value) {
+  const match = value.match(IMPORTANT_SUFFIX_PATTERN);
+  if (!match) {
+    return { components: value, importantSuffix: '' };
+  }
+  return {
+    components: value.slice(0, match.index).trim(),
+    importantSuffix: match[0]
+  };
+}
+
+/**
+ * Collapses a `hyphenate-limit-chars` value to its shortest equivalent form.
+ * The property states up to three components: the shortest word that may be
+ * hyphenated, then the fewest characters allowed before a hyphen, then the
+ * fewest allowed after it. An unstated "before" component is read as `auto`,
+ * and an unstated "after" component repeats whatever "before" holds, so a
+ * trailing component that only restates the default it stands in for is
+ * redundant.
+ *
+ * @param  {string} value  The `hyphenate-limit-chars` value.
+ * @return {string}        The value with its redundant trailing components dropped.
+ */
+function collapseHyphenateLimitChars (value) {
+  const {
+    components,
+    importantSuffix
+  } = splitImportantSuffix(value);
+  const parts = components.split(' ').filter(Boolean);
+  if (hasSubstitutedParts(parts)) {
+    return value;
+  }
+  const isAfterMatchingBefore = (
+    parts.length === 3 &&
+    parts[2].toLowerCase() === parts[1].toLowerCase()
+  );
+  if (isAfterMatchingBefore) {
+    parts.pop();
+  }
+  const isBeforeLeftAtDefault = (
+    parts.length === 2 &&
+    parts[1].toLowerCase() === 'auto'
+  );
+  if (isBeforeLeftAtDefault) {
+    parts.pop();
+  }
+  return parts.join(' ') + importantSuffix;
+}
+
+/**
+ * Minifies a declaration's value for output, rewriting its initial keyword to
+ * the shorter global `initial` keyword after shorthand assembly. Both are
+ * equivalent, but `initial` is shorter than these particular keywords and,
+ * being repeated across properties, gives gzip more opportunities to deduplicate it.
+ *
+ * @param  {object} declaration  The CSS declaration object with property and value fields.
+ * @return {string}              The minified value with its initial keyword shortened to `initial` when that saves bytes.
+ */
+function minifyValueForOutput (declaration) {
+  const value = minifyValue(declaration);
+  const property = declaration.property;
+  // Custom properties hold an arbitrary token stream that JavaScript can read
+  // back, so their keywords are left exactly as written.
+  if (isCustomProperty(property)) {
+    return value;
+  }
+  // A keyword spelling the property's own initial value is shorter as the
+  // global keyword (box-sizing: content-box -> box-sizing: initial)
+  const initialKeyword = LENGTHY_INITIAL_KEYWORDS.get(property?.toLowerCase());
+  if (!initialKeyword || 'initial'.length >= initialKeyword.length) {
+    return value;
+  }
+  // A trailing `!important` rides along inside the value, so the keyword
+  // comparison and the rewrite only concern what sits in front of it.
+  const isImportant = value.endsWith('!important');
+  const keyword = isImportant ? value.slice(0, value.length - '!important'.length) : value;
+  if (keyword.toLowerCase() !== initialKeyword) {
+    return value;
+  }
+  return 'initial' + (isImportant ? '!important' : '');
+}
+
 /**
  * Applies property-specific optimizations to a CSS value (transition, flex, font,
  * background, display, scale, border-radius, shorthand collapsing, etc.).
@@ -1248,6 +1330,10 @@ function applyPropertyOptimizations (val, property) {
     val = collapseShorthandParts(val.split(' ')).join(' ');
   }
 
+  if (property === 'hyphenate-limit-chars') {
+    val = collapseHyphenateLimitChars(val);
+  }
+
   if (property === 'border-radius') {
     const segments = val.split('/').map((segment) => {
       return segment.trim();
@@ -1426,5 +1512,6 @@ function minifyValue (declaration) {
 
 export {
   clearMinifiedValueCache,
-  minifyValue
+  minifyValue,
+  minifyValueForOutput
 };

package/src/value/relative-colors.js

@@ -2,6 +2,12 @@
  * @file Evaluates and minifies CSS relative color syntax.
  */
 
+import {
+  findMatchingParenthesis,
+  findTopLevelDelimiter,
+  splitTopLevelComponents
+} from '../parser/source-search.js';
+
 import {
   parseColor,
   rgbaToHex,
@@ -48,69 +54,6 @@ const RELATIVE_COLOR_CHANNELS = {
   oklch: ['l', 'c', 'h']
 };
 
-/**
- * Finds the closing parenthesis matching the opening one at the given index,
- * accounting for nested parentheses.
- *
- * @param  {string} value      The string being scanned.
- * @param  {number} openIndex  Index of the opening parenthesis.
- * @return {number}            Index of the matching close parenthesis, or -1.
- */
-function findClosingParenthesis (value, openIndex) {
-  let depth = 1;
-  let index = openIndex + 1;
-  while (index < value.length) {
-    const character = value[index];
-    if (character === '(') {
-      depth++;
-    } else if (character === ')') {
-      depth--;
-      if (depth === 0) {
-        return index;
-      }
-    }
-    index++;
-  }
-  return -1;
-}
-
-/**
- * Splits a string on top-level whitespace while treating each parenthesized
- * group as part of a single token, keeping nested function arguments intact.
- *
- * @param  {string} text  The text to split.
- * @return {Array}        The list of top-level tokens.
- */
-function splitTopLevelWhitespace (text) {
-  const tokens = [];
-  let current = '';
-  let depth = 0;
-  for (let index = 0; index < text.length; index++) {
-    const character = text[index];
-    if (character === '(') {
-      depth++;
-      current += character;
-    } else if (character === ')') {
-      if (depth > 0) {
-        depth--;
-      }
-      current += character;
-      // Match any single whitespace character at the top level
-    } else if (depth === 0 && /\s/.test(character)) {
-      if (current) {
-        tokens.push(current);
-        current = '';
-      }
-    } else {
-      current += character;
-    }
-  }
-  if (current) {
-    tokens.push(current);
-  }
-  return tokens;
-}
-
 /**
  * Splits a relative-color body into its channel portion and its optional alpha
  * portion at the top-level `/` separator.
@@ -119,20 +62,14 @@ function splitTopLevelWhitespace (text) {
  * @return {Array}        A two-element array of [channelsPart, alphaPart|null].
  */
 function splitRelativeAlpha (body) {
-  let depth = 0;
-  for (let index = 0; index < body.length; index++) {
-    const character = body[index];
-    if (character === '(') {
-      depth++;
-    } else if (character === ')') {
-      if (depth > 0) {
-        depth--;
-      }
-    } else if (character === '/' && depth === 0) {
-      return [body.slice(0, index).trim(), body.slice(index + 1).trim()];
-    }
+  const separatorIndex = findTopLevelDelimiter(body, '/', 0);
+  if (separatorIndex === -1) {
+    return [body.trim(), null];
   }
-  return [body.trim(), null];
+  return [
+    body.slice(0, separatorIndex).trim(),
+    body.slice(separatorIndex + 1).trim()
+  ];
 }
 
 /**
@@ -276,7 +213,7 @@ function rewriteRelativeColor (functionName, inner) {
   // Strip the leading `from` keyword, allowing it to abut the base color
   const body = inner.replace(/^\s*from\b\s*/i, '').trim();
   const [channelsPart, alphaRaw] = splitRelativeAlpha(body);
-  const tokens = splitTopLevelWhitespace(channelsPart);
+  const tokens = splitTopLevelComponents(channelsPart);
   if (tokens.length < 2) {
     return functionName + '(' + inner + ')';
   }
@@ -316,7 +253,7 @@ function minifyRelativeColorSyntax (value) {
     if (match && !precededByIdentifier) {
       const functionName = match[1].toLowerCase();
       const openParenIndex = index + match[1].length;
-      const closingParenIndex = findClosingParenthesis(value, openParenIndex);
+      const closingParenIndex = findMatchingParenthesis(value, openParenIndex);
       if (closingParenIndex !== -1) {
         const inner = value.slice(openParenIndex + 1, closingParenIndex);
         result += rewriteRelativeColor(functionName, inner);

package/src/value/shared.js

@@ -198,6 +198,7 @@ export {
   convertAbsoluteLengthToPx,
   formatCompactNumber,
   formatDimension,
+  hasSubstitutedParts,
   normalizeScaleComponent,
   parseAlphaString,
   parseAngleToDegrees,