@thejaredwilcurt/csslop 0.0.38 → 0.0.39

package/src/value/gradients.js

@@ -2,40 +2,16 @@
  * @file Parses and minifies CSS gradient function calls by splitting arguments, normalizing default directions, and removing redundant stop positions.
  */
 
+import {
+  findMatchingParenthesis,
+  splitTopLevelCommaList
+} from '../parser/source-search.js';
+
 import {
   parseHex,
   shortestColor
 } from './colors.js';
 
-/**
- * Splits a gradient function's argument string at top-level commas, correctly handling nested parentheses.
- *
- * @param  {string} argumentString  The raw gradient arguments string.
- * @return {Array}                  An array of trimmed argument strings.
- */
-function splitGradientArgs (argumentString) {
-  const parts = [];
-  let depth = 0;
-  let current = '';
-  for (const character of argumentString) {
-    if (character === '(') {
-      depth++;
-    } else if (character === ')') {
-      depth--;
-    }
-    if (character === ',' && depth === 0) {
-      parts.push(current.trim());
-      current = '';
-    } else {
-      current += character;
-    }
-  }
-  if (current.trim() || parts.length) {
-    parts.push(current.trim());
-  }
-  return parts;
-}
-
 /**
  * Checks whether a string is a valid gradient stop position consisting of one
  * or two numeric tokens with optional CSS units.
@@ -435,45 +411,45 @@ function normalizeRadialGradientShape (args) {
 /**
  * Optimizes gradient arguments by removing default direction or shape keywords, combining adjacent identical color stops, and trimming redundant 0% or 100% stop positions from the first and last stops.
  *
- * @param  {string} func     The gradient function name (e.g. "linear-gradient").
- * @param  {string} argsStr  The raw comma-separated gradient arguments string.
- * @return {string}          The optimized gradient arguments string.
+ * @param  {string} functionName  The gradient function name (e.g. "linear-gradient").
+ * @param  {string} argumentText  The raw comma-separated gradient arguments string.
+ * @return {string}               The optimized gradient arguments string.
  */
-function processGradientArgs (func, argsStr) {
-  const args = splitGradientArgs(argsStr);
-  const functionLower = func.toLowerCase();
+function processGradientArguments (functionName, argumentText) {
+  const argumentList = splitTopLevelCommaList(argumentText);
+  const lowercaseName = functionName.toLowerCase();
 
-  let directionArgCount = 0;
+  let directionArgumentCount = 0;
 
-  if (args.length > 1) {
-    if (functionLower.includes('linear')) {
-      directionArgCount = normalizeLinearGradientDirection(args);
-    } else if (functionLower.includes('radial')) {
-      directionArgCount = normalizeRadialGradientShape(args);
+  if (argumentList.length > 1) {
+    if (lowercaseName.includes('linear')) {
+      directionArgumentCount = normalizeLinearGradientDirection(argumentList);
+    } else if (lowercaseName.includes('radial')) {
+      directionArgumentCount = normalizeRadialGradientShape(argumentList);
     }
   }
 
-  // Extract color stop args (everything after the direction/shape argument)
-  const colorStopArgs = args.slice(directionArgCount).map((arg) => {
-    return normalizeColorStop(arg);
+  // Extract color stop arguments (everything after the direction/shape argument)
+  const colorStopArguments = argumentList.slice(directionArgumentCount).map((argument) => {
+    return normalizeColorStop(argument);
   });
-  if (colorStopArgs.length > 0) {
-    const normalizedStops = colorStopArgs.length >= 2 ?
-      combineAdjacentIdenticalStops(colorStopArgs) :
-      colorStopArgs;
-    args.splice(directionArgCount, colorStopArgs.length, ...normalizedStops);
+  if (colorStopArguments.length > 0) {
+    const normalizedStops = colorStopArguments.length >= 2 ?
+      combineAdjacentIdenticalStops(colorStopArguments) :
+      colorStopArguments;
+    argumentList.splice(directionArgumentCount, colorStopArguments.length, ...normalizedStops);
   }
 
-  if (args.length > directionArgCount) {
-    const firstStopIndex = directionArgCount;
-    const lastStopIndex = args.length - 1;
+  if (argumentList.length > directionArgumentCount) {
+    const firstStopIndex = directionArgumentCount;
+    const lastStopIndex = argumentList.length - 1;
     // Remove default 0% stop position from the first gradient stop
-    args[firstStopIndex] = args[firstStopIndex].replace(/^(.*\S)\s+0%$/, '$1');
+    argumentList[firstStopIndex] = argumentList[firstStopIndex].replace(/^(.*\S)\s+0%$/, '$1');
     // Remove default 100% stop position from the last gradient stop
-    args[lastStopIndex] = args[lastStopIndex].replace(/^(.*\S)\s+100%$/, '$1');
+    argumentList[lastStopIndex] = argumentList[lastStopIndex].replace(/^(.*\S)\s+100%$/, '$1');
   }
 
-  return args.join(',');
+  return argumentList.join(',');
 }
 
 /**
@@ -490,24 +466,21 @@ function minifyGradients (value) {
     // Match gradient function names: linear-gradient, radial-gradient, conic-gradient, and their repeating- variants
     const gradientMatch = rest.match(/^((?:repeating-)?(?:linear|radial|conic)-gradient)\(/i);
     if (gradientMatch) {
-      const func = gradientMatch[1];
-      let depth = 1;
-      let end = position + func.length + 1;
-      while (end < value.length && depth > 0) {
-        if (value[end] === '(') {
-          depth++;
-        } else if (value[end] === ')') {
-          depth--;
-        }
-        end++;
+      const functionName = gradientMatch[1];
+      const openIndex = position + functionName.length;
+      const closeIndex = findMatchingParenthesis(value, openIndex);
+      if (closeIndex === -1) {
+        // A gradient whose arguments never close is left exactly as it was written
+        result += value.slice(position);
+        break;
       }
-      const argsStr = value.slice(position + func.length + 1, end - 1);
-      result += func + '(' + processGradientArgs(func, argsStr) + ')';
-      position = end;
-    } else {
-      result += value[position];
-      position++;
+      const argumentText = value.slice(openIndex + 1, closeIndex);
+      result += functionName + '(' + processGradientArguments(functionName, argumentText) + ')';
+      position = closeIndex + 1;
+      continue;
     }
+    result += value[position];
+    position++;
   }
   return result;
 }

package/src/value/light-dark.js

@@ -2,7 +2,12 @@
  * @file Simplifies CSS light-dark functions whose light and dark values are equivalent.
  */
 
-import { findMatchingParenthesis } from './syntax.js';
+import {
+  findMatchingParenthesis,
+  skipQuotedString,
+  splitTopLevelCommaList,
+  startsUrlToken
+} from '../parser/source-search.js';
 
 /**
  * Determines whether a character can appear inside a CSS identifier.
@@ -35,75 +40,6 @@ function startsLightDarkFunction (value, index) {
   return !isIdentifierCharacter(value[index - 1]);
 }
 
-/**
- * Splits a CSS function argument list at top-level commas while respecting
- * nested parentheses and quoted strings.
- *
- * @param  {string} argumentString  The raw content between function parentheses.
- * @return {Array}                  The top-level argument strings.
- */
-function splitTopLevelFunctionArguments (argumentString) {
-  const argumentsList = [];
-  let currentArgument = '';
-  let depth = 0;
-  let index = 0;
-  let activeQuote = '';
-
-  while (index < argumentString.length) {
-    const character = argumentString[index];
-    if (activeQuote) {
-      currentArgument += character;
-      if (character === '\\') {
-        if (index + 1 < argumentString.length) {
-          currentArgument += argumentString[index + 1];
-          index += 2;
-          continue;
-        }
-      } else if (character === activeQuote) {
-        activeQuote = '';
-      }
-      index++;
-      continue;
-    }
-
-    if (character === '"' || character === '\'') {
-      activeQuote = character;
-      currentArgument += character;
-      index++;
-      continue;
-    }
-
-    if (character === '(') {
-      depth++;
-      currentArgument += character;
-      index++;
-      continue;
-    }
-
-    if (character === ')') {
-      if (depth > 0) {
-        depth--;
-      }
-      currentArgument += character;
-      index++;
-      continue;
-    }
-
-    if (character === ',' && depth === 0) {
-      argumentsList.push(currentArgument.trim());
-      currentArgument = '';
-      index++;
-      continue;
-    }
-
-    currentArgument += character;
-    index++;
-  }
-
-  argumentsList.push(currentArgument.trim());
-  return argumentsList;
-}
-
 /**
  * Simplifies `light-dark(a,b)` to `a` when both top-level arguments are identical
  * after prior minification has normalized them.
@@ -115,36 +51,15 @@ function simplifyEquivalentLightDarkFunctions (value) {
   let result = '';
   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(';
-  };
-
   while (index < value.length) {
     if (value[index] === '"' || value[index] === '\'') {
-      const end = consumeQuoted(index);
+      const end = skipQuotedString(value, index);
       result += value.slice(index, end);
       index = end;
       continue;
     }
 
-    if (startsUrl(index)) {
+    if (startsUrlToken(value, index)) {
       const end = findMatchingParenthesis(value, index + 3);
       if (end === -1) {
         result += value.slice(index);
@@ -164,7 +79,7 @@ function simplifyEquivalentLightDarkFunctions (value) {
       }
 
       const argumentString = value.slice(openParenIndex + 1, closingParenIndex);
-      const argumentsList = splitTopLevelFunctionArguments(argumentString);
+      const argumentsList = splitTopLevelCommaList(argumentString);
       if (argumentsList.length === 2) {
         const firstArgument = simplifyEquivalentLightDarkFunctions(argumentsList[0]);
         const secondArgument = simplifyEquivalentLightDarkFunctions(argumentsList[1]);

package/src/value/math.js

@@ -4,6 +4,8 @@
 
 import { calc } from '@csstools/css-calc';
 
+import { findMatchingParenthesis } from '../parser/source-search.js';
+
 import {
   convertAbsoluteLengthToPx,
   formatDimension,
@@ -124,28 +126,6 @@ function findFunctionNameStart (value, openIndex) {
   return index;
 }
 
-/**
- * Finds the parenthesis closing the one at the given index.
- *
- * @param  {string} value      The CSS value string being scanned.
- * @param  {number} openIndex  The index of the opening parenthesis.
- * @return {number}            The index of the matching closing parenthesis, or -1 when it never closes.
- */
-function findClosingParenthesis (value, openIndex) {
-  let depth = 0;
-  for (let index = openIndex; index < value.length; index++) {
-    if (value[index] === '(') {
-      depth++;
-    } else if (value[index] === ')') {
-      depth--;
-      if (depth === 0) {
-        return index;
-      }
-    }
-  }
-  return -1;
-}
-
 /**
  * Rewrites the contents of every math function in a value, leaving the rest of
  * the value untouched. A `*` only means multiplication inside these functions,
@@ -166,7 +146,7 @@ function rewriteMathFunctionContents (rewriteExpression, value) {
       break;
     }
     const functionName = value.slice(findFunctionNameStart(value, openIndex), openIndex).toLowerCase();
-    const closeIndex = findClosingParenthesis(value, openIndex);
+    const closeIndex = findMatchingParenthesis(value, openIndex);
     if (!MATH_FUNCTION_NAMES.has(functionName) || closeIndex === -1) {
       result += value.slice(index, openIndex + 1);
       index = openIndex + 1;

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,11 @@ 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
@@ -1008,6 +974,69 @@ 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
@@ -1301,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();

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,