@thejaredwilcurt/csslop 0.0.37 → 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,
@@ -83,6 +85,166 @@ function keepSeparatorAfterDissolvedFunction (replacer) {
   };
 }
 
+/**
+ * The functions whose arguments are a math expression, where `*` and `/` are
+ * arithmetic operators rather than characters of some other syntax.
+ *
+ * @type {Set<string>}
+ */
+const MATH_FUNCTION_NAMES = new Set([
+  'abs',
+  'calc',
+  'clamp',
+  'hypot',
+  'max',
+  'min',
+  'mod',
+  'rem',
+  'round',
+  'sign'
+]);
+
+/**
+ * Matches a single character that may appear in a CSS function name.
+ *
+ * @type {RegExp}
+ */
+const FUNCTION_NAME_CHARACTER = /[a-zA-Z-]/;
+
+/**
+ * Finds where the function name that ends at an opening parenthesis begins.
+ *
+ * @param  {string} value      The CSS value string being scanned.
+ * @param  {number} openIndex  The index of the opening parenthesis.
+ * @return {number}            The index of the function name's first character.
+ */
+function findFunctionNameStart (value, openIndex) {
+  let index = openIndex;
+  while (index > 0 && FUNCTION_NAME_CHARACTER.test(value[index - 1])) {
+    index--;
+  }
+  return index;
+}
+
+/**
+ * Rewrites the contents of every math function in a value, leaving the rest of
+ * the value untouched. A `*` only means multiplication inside these functions,
+ * so an arithmetic rewrite may only reach the text between their parentheses.
+ * The whole of a math function is handed over at once, so a math function
+ * nested in another is rewritten as part of its parent.
+ *
+ * @param  {function(string): string} rewriteExpression  Receives a math function's contents and returns its replacement.
+ * @param  {string}                   value              The CSS value string to rewrite.
+ * @return {string}                                      The value with every math function's contents rewritten.
+ */
+function rewriteMathFunctionContents (rewriteExpression, value) {
+  let result = '';
+  let index = 0;
+  while (index < value.length) {
+    const openIndex = value.indexOf('(', index);
+    if (openIndex === -1) {
+      break;
+    }
+    const functionName = value.slice(findFunctionNameStart(value, openIndex), openIndex).toLowerCase();
+    const closeIndex = findMatchingParenthesis(value, openIndex);
+    if (!MATH_FUNCTION_NAMES.has(functionName) || closeIndex === -1) {
+      result += value.slice(index, openIndex + 1);
+      index = openIndex + 1;
+      continue;
+    }
+    result += value.slice(index, openIndex + 1);
+    result += rewriteExpression(value.slice(openIndex + 1, closeIndex));
+    index = closeIndex;
+  }
+  return result + value.slice(index);
+}
+
+/**
+ * Matches a multiplication by a decimal below one, capturing the digits after
+ * its decimal point and the unit written on it. The trailing lookahead keeps
+ * the match away from numbers that only begin this way, such as the exponent
+ * of `.5e3` or a unit name that is still being read.
+ *
+ * @type {RegExp}
+ */
+const FRACTIONAL_MULTIPLIER = /\s*\*\s*0*\.(\d+)([a-z%]*)(?![\w.%(])/gi;
+
+/**
+ * The most decimal places a fraction may be built from while the power of ten
+ * it needs is still exactly representable as an integer.
+ *
+ * @type {number}
+ */
+const MAXIMUM_FRACTION_DIGITS = 15;
+
+/**
+ * Computes the greatest common divisor of two non-negative integers, which is
+ * what a fraction has to be divided by to be stated in lowest terms.
+ *
+ * @param  {number} first   The first integer.
+ * @param  {number} second  The second integer.
+ * @return {number}         The greatest common divisor of both integers.
+ */
+function greatestCommonDivisor (first, second) {
+  let dividend = first;
+  let divisor = second;
+  while (divisor) {
+    const remainder = dividend % divisor;
+    dividend = divisor;
+    divisor = remainder;
+  }
+  return dividend;
+}
+
+/**
+ * Converts the digits behind a decimal point into the whole number that
+ * dividing by scales a value exactly as multiplying by that decimal does.
+ * The digits `25` (of `.25`) state the fraction 25/100, which reduces to 1/4,
+ * so the divisor is `4`. A fraction that does not reduce to a numerator of one
+ * cannot be stated as a single division, and so has no divisor to give.
+ *
+ * @param  {string}      fractionDigits  The digits written after the decimal point.
+ * @return {number|null}                 The equivalent whole number divisor, or null when there is none.
+ */
+function reciprocalOfDecimalFraction (fractionDigits) {
+  if (fractionDigits.length > MAXIMUM_FRACTION_DIGITS) {
+    return null;
+  }
+  const numerator = Number(fractionDigits);
+  const denominator = 10 ** fractionDigits.length;
+  const commonFactor = greatestCommonDivisor(numerator, denominator);
+  if (numerator / commonFactor !== 1) {
+    return null;
+  }
+  return denominator / commonFactor;
+}
+
+/**
+ * Rewrites a multiplication by a decimal below one as a division by the whole
+ * number that decimal is the reciprocal of, which is never longer to write and
+ * usually shorter (`calc(var(--x)*.25)` → `calc(var(--x)/4)`). A unit written
+ * on the multiplier moves onto the divisor, since only how the operand is
+ * stated changes.
+ *
+ * @param  {string} expression  The contents of a math function.
+ * @return {string}             The expression with reciprocal multipliers stated as divisions.
+ */
+function convertReciprocalMultiplicationToDivision (expression) {
+  return expression.replace(FRACTIONAL_MULTIPLIER, (match, fractionDigits, unit) => {
+    const divisor = reciprocalOfDecimalFraction(fractionDigits);
+    if (divisor === null) {
+      return match;
+    }
+    const division = '/' + divisor + unit;
+    // Compared against the shortest the multiplication could have been written
+    const multiplication = '*.' + fractionDigits + unit;
+    if (division.length > multiplication.length) {
+      return match;
+    }
+    return division;
+  });
+}
+
 /**
  * The units a folded calc() expression leads with, in the order they are
  * written. Every other unit follows them alphabetically.
@@ -223,7 +385,7 @@ function tryFoldCalcExpression (expression) {
  * @return {string}                The value with math functions simplified where possible.
  */
 function normalizeMathFunctions (value, property, originalValue = '') {
-  let result = value;
+  let result = rewriteMathFunctionContents(convertReciprocalMultiplicationToDivision, value);
 
   // Unwrap calc(1 / (1 / x)) → x (double-reciprocal identity)
   result = result.replace(/calc\(\s*1\s*\/\s*\(\s*1\s*\/\s*([^()]+)\s*\)\s*\)/gi, keepSeparatorAfterDissolvedFunction((match, inner) => {