@thejaredwilcurt/csslop 0.0.38 → 0.0.40

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

@@ -47,8 +47,10 @@ function roundCompactNumber (value, precision = 3) {
   if (!Number.isFinite(number)) {
     return String(value);
   }
-  // Strip trailing zeros and trailing decimal point from the fixed-precision string
-  let result = number.toFixed(precision).replace(/0+$/, '').replace(/\.$/, '');
+  // Strip the zeros trailing the fraction, then the decimal point they leave
+  // behind. Only zeros written after a decimal point are droppable, so the
+  // match has to start at one: the zeros of a whole number are digits.
+  let result = number.toFixed(precision).replace(/(\.\d*?)0+$/, '$1').replace(/\.$/, '');
   if (result.startsWith('0.')) {
     result = result.slice(1);
   }
@@ -58,6 +60,44 @@ function roundCompactNumber (value, precision = 3) {
   return result;
 }
 
+/**
+ * The most characters the result of a resolved calculation is written with,
+ * counting the digits and the decimal point but not the sign. A calculation is
+ * only replaced by its result to save characters, and a result that repeats
+ * can always be written out longer, so its digits are cut off where the
+ * accuracy they add stops paying for the characters they cost.
+ *
+ * @type {number}
+ */
+const MAXIMUM_RESOLVED_NUMBER_CHARACTERS = 7;
+
+/**
+ * Formats what a calculation resolved to as the number a stylesheet states it
+ * with: rounded to however many decimal places are left over once the whole
+ * part and the decimal point have taken their share of the character budget a
+ * resolved number is written within.
+ *
+ * @param  {number|string} value              The number the calculation resolved to.
+ * @param  {number}        maximumCharacters  The most characters the written number may take.
+ * @return {string}                           The number as it is written into the stylesheet.
+ */
+function formatResolvedNumber (value, maximumCharacters = MAXIMUM_RESOLVED_NUMBER_CHARACTERS) {
+  const number = typeof value === 'number' ? value : parseFloat(value);
+  if (!Number.isFinite(number)) {
+    return String(value);
+  }
+  const wholePart = Math.floor(Math.abs(number));
+  // A magnitude below one is written without its leading zero, so nothing of
+  // its whole part is spent from the budget
+  let wholeDigitCount = 0;
+  if (wholePart !== 0) {
+    wholeDigitCount = String(wholePart).length;
+  }
+  // The decimal point itself takes one of the characters the digits could have
+  const decimalPlaces = Math.max(maximumCharacters - wholeDigitCount - 1, 0);
+  return roundCompactNumber(number, decimalPlaces);
+}
+
 /**
  * Converts an absolute CSS length value (pt, pc, in, cm, mm, q) to its pixel equivalent using standard conversion factors.
  *
@@ -84,15 +124,16 @@ function convertAbsoluteLengthToPx (value, unit) {
 }
 
 /**
- * Formats a numeric value with its CSS unit as a compact string, rounding to the specified precision.
+ * Formats what a calculation resolved to as the dimension a stylesheet states
+ * it with, rounding the number into the character budget a resolved number is
+ * written within.
  *
- * @param  {number} value      The numeric dimension value.
- * @param  {string} unit       The CSS unit suffix (e.g. "px", "%").
- * @param  {number} precision  The number of decimal places to keep.
- * @return {string}            The formatted dimension string.
+ * @param  {number} value  The numeric result of the calculation.
+ * @param  {string} unit   The CSS unit suffix the result carries (e.g. "px", "%").
+ * @return {string}        The dimension as it is written into the stylesheet.
  */
-function formatDimension (value, unit, precision = 3) {
-  return roundCompactNumber(value, precision) + unit;
+function formatResolvedDimension (value, unit) {
+  return formatResolvedNumber(value) + unit;
 }
 
 /**
@@ -197,7 +238,9 @@ export {
   collapseShorthandParts,
   convertAbsoluteLengthToPx,
   formatCompactNumber,
-  formatDimension,
+  formatResolvedDimension,
+  formatResolvedNumber,
+  hasSubstitutedParts,
   normalizeScaleComponent,
   parseAlphaString,
   parseAngleToDegrees,

package/src/value/tokens.js

@@ -1,397 +1,14 @@
 /**
- * @file Tokenizes a CSS value the way the CSS Syntax tokenizer does, so that the whitespace which only separated two tokens that already end themselves can be told apart from the whitespace that holds two tokens apart.
+ * @file Drops the whitespace of a minified CSS value that only separates two tokens which already mark the boundary between them.
  */
 
-/**
- * Matches one CSS whitespace character. CSS counts a form feed and a carriage
- * return as whitespace, so the shorter `\s` class would be too broad.
- *
- * @type {RegExp}
- */
-const WHITESPACE_CHARACTER = /[ \t\n\r\f]/;
-
-/**
- * Matches one decimal digit, which is what starts the numeric tokens.
- *
- * @type {RegExp}
- */
-const DIGIT_CHARACTER = /[0-9]/;
-
-/**
- * Matches one hexadecimal digit, which is what a unicode escape holds.
- *
- * @type {RegExp}
- */
-const HEX_DIGIT_CHARACTER = /[0-9a-fA-F]/;
-
-/**
- * Matches one character that may start an identifier: a letter, an underscore,
- * or anything outside ASCII.
- *
- * @type {RegExp}
- */
-const IDENT_START_CHARACTER = /[a-zA-Z_\u0080-\uFFFF]/;
-
-/**
- * Matches one character that may continue an identifier, which is everything an
- * identifier may start with plus the digits and the hyphen.
- *
- * @type {RegExp}
- */
-const NAME_CHARACTER = /[-a-zA-Z0-9_\u0080-\uFFFF]/;
-
-/**
- * @typedef  {object} CssToken
- * @property {string} type      The kind of token, such as `ident`, `number`, or `whitespace`.
- * @property {string} text      The exact slice of the value that the token spans.
- */
-
-/**
- * Reports whether the two characters at an index form a valid escape sequence.
- * A backslash escapes the character after it, unless that character is the
- * newline that ends the line.
- *
- * @param  {string}  text   The CSS value being read.
- * @param  {number}  index  The index of the possible backslash.
- * @return {boolean}        Whether an escape sequence starts at the index.
- */
-function startsEscape (text, index) {
-  return text[index] === '\\' && text[index + 1] !== '\n';
-}
-
-/**
- * Reads past an escape sequence, which is either up to six hexadecimal digits
- * and the single whitespace character that may end them, or one escaped
- * character.
- *
- * @param  {string} text   The CSS value being read.
- * @param  {number} index  The index of the backslash that starts the escape.
- * @return {number}        The index just past the escape sequence.
- */
-function readPastEscape (text, index) {
-  let end = index + 1;
-  let hexDigitCount = 0;
-  while (end < text.length && hexDigitCount < 6 && HEX_DIGIT_CHARACTER.test(text[end])) {
-    end++;
-    hexDigitCount++;
-  }
-  if (!hexDigitCount) {
-    return Math.min(end + 1, text.length);
-  }
-  if (end < text.length && WHITESPACE_CHARACTER.test(text[end])) {
-    end++;
-  }
-  return end;
-}
-
-/**
- * Reads past a name, the run of identifier characters and escapes that makes up
- * an identifier, the body of a hash token, or the unit of a dimension.
- *
- * @param  {string} text   The CSS value being read.
- * @param  {number} index  The index the name starts at.
- * @return {number}        The index just past the name.
- */
-function readPastName (text, index) {
-  let end = index;
-  while (end < text.length) {
-    if (NAME_CHARACTER.test(text[end])) {
-      end++;
-      continue;
-    }
-    if (startsEscape(text, end)) {
-      end = readPastEscape(text, end);
-      continue;
-    }
-    break;
-  }
-  return end;
-}
-
-/**
- * Reports whether an identifier starts at an index. A hyphen starts one only
- * when a second hyphen, an identifier character, or an escape follows it, which
- * is what makes `--custom` an identifier and a lone `-` a delimiter.
- *
- * @param  {string}  text   The CSS value being read.
- * @param  {number}  index  The index to test.
- * @return {boolean}        Whether an identifier starts at the index.
- */
-function startsIdent (text, index) {
-  const character = text[index];
-  if (character === undefined) {
-    return false;
-  }
-  if (character === '-') {
-    const nextCharacter = text[index + 1];
-    if (nextCharacter === '-') {
-      return true;
-    }
-    return Boolean(nextCharacter) && (IDENT_START_CHARACTER.test(nextCharacter) || startsEscape(text, index + 1));
-  }
-  if (IDENT_START_CHARACTER.test(character)) {
-    return true;
-  }
-  return startsEscape(text, index);
-}
+import { tokenizeCssValue } from '../parser/tokenizer.js';
 
 /**
- * Reports whether a number starts at an index. A sign or a decimal point only
- * starts one when a digit follows close enough behind it.
+ * One token of a value, as the tokenizer reads it.
  *
- * @param  {string}  text   The CSS value being read.
- * @param  {number}  index  The index to test.
- * @return {boolean}        Whether a number starts at the index.
+ * @typedef {import('../parser/tokenizer.js').CssToken} CssToken
  */
-function startsNumber (text, index) {
-  const character = text[index];
-  if (character === undefined) {
-    return false;
-  }
-  if (character === '+' || character === '-') {
-    const nextCharacter = text[index + 1] || '';
-    const followingCharacter = text[index + 2] || '';
-    return DIGIT_CHARACTER.test(nextCharacter) || (nextCharacter === '.' && DIGIT_CHARACTER.test(followingCharacter));
-  }
-  if (character === '.') {
-    return DIGIT_CHARACTER.test(text[index + 1] || '');
-  }
-  return DIGIT_CHARACTER.test(character);
-}
-
-/**
- * Reads past the run of digits that starts at an index.
- *
- * @param  {string} text   The CSS value being read.
- * @param  {number} index  The index the digits start at.
- * @return {number}        The index just past the digits.
- */
-function readPastDigits (text, index) {
-  let end = index;
-  while (end < text.length && DIGIT_CHARACTER.test(text[end])) {
-    end++;
-  }
-  return end;
-}
-
-/**
- * Reads past a number: an optional sign, an integer part, an optional fraction,
- * and an optional scientific exponent.
- *
- * @param  {string} text   The CSS value being read.
- * @param  {number} index  The index the number starts at.
- * @return {number}        The index just past the number.
- */
-function readPastNumber (text, index) {
-  let end = index;
-  if (text[end] === '+' || text[end] === '-') {
-    end++;
-  }
-  end = readPastDigits(text, end);
-  if (text[end] === '.' && DIGIT_CHARACTER.test(text[end + 1] || '')) {
-    end = readPastDigits(text, end + 1);
-  }
-  const exponentCharacter = text[end];
-  if (exponentCharacter === 'e' || exponentCharacter === 'E') {
-    let exponentEnd = end + 1;
-    if (text[exponentEnd] === '+' || text[exponentEnd] === '-') {
-      exponentEnd++;
-    }
-    if (DIGIT_CHARACTER.test(text[exponentEnd] || '')) {
-      end = readPastDigits(text, exponentEnd);
-    }
-  }
-  return end;
-}
-
-/**
- * Reads the numeric token at an index. A number takes a unit when an identifier
- * follows it and becomes a percentage when a percent sign does.
- *
- * @param  {string}   text   The CSS value being read.
- * @param  {number}   index  The index the number starts at.
- * @return {CssToken}        The dimension, percentage, or number token.
- */
-function readNumericToken (text, index) {
-  const numberEnd = readPastNumber(text, index);
-  if (startsIdent(text, numberEnd)) {
-    const unitEnd = readPastName(text, numberEnd);
-    return { type: 'dimension', text: text.slice(index, unitEnd) };
-  }
-  if (text[numberEnd] === '%') {
-    return { type: 'percentage', text: text.slice(index, numberEnd + 1) };
-  }
-  return { type: 'number', text: text.slice(index, numberEnd) };
-}
-
-/**
- * Reports whether the contents of a `url()` are quoted, which makes it an
- * ordinary function token holding a string rather than a single url token.
- *
- * @param  {string}  text   The CSS value being read.
- * @param  {number}  index  The index just past the opening parenthesis.
- * @return {boolean}        Whether a quoted string opens the parentheses.
- */
-function holdsQuotedUrl (text, index) {
-  let end = index;
-  while (end < text.length && WHITESPACE_CHARACTER.test(text[end])) {
-    end++;
-  }
-  return text[end] === '"' || text[end] === '\'';
-}
-
-/**
- * Reads past the body of an unquoted url token, which runs to the parenthesis
- * that closes it. An unquoted url holds no nested parentheses, so the first
- * closing one ends the token.
- *
- * @param  {string} text   The CSS value being read.
- * @param  {number} index  The index just past the opening parenthesis.
- * @return {number}        The index just past the closing parenthesis.
- */
-function readPastUrlBody (text, index) {
-  let end = index;
-  while (end < text.length) {
-    if (startsEscape(text, end)) {
-      end = readPastEscape(text, end);
-      continue;
-    }
-    if (text[end] === ')') {
-      return end + 1;
-    }
-    end++;
-  }
-  return end;
-}
-
-/**
- * Reads the token that an identifier starts. An identifier directly followed by
- * an opening parenthesis is a function token instead, and the `url()` written
- * without quotes is a single token that swallows its own contents.
- *
- * @param  {string}   text   The CSS value being read.
- * @param  {number}   index  The index the identifier starts at.
- * @return {CssToken}        The ident, function, or url token.
- */
-function readIdentLikeToken (text, index) {
-  const nameEnd = readPastName(text, index);
-  const name = text.slice(index, nameEnd);
-  if (text[nameEnd] !== '(') {
-    return { type: 'ident', text: name };
-  }
-  if (name.toLowerCase() === 'url' && !holdsQuotedUrl(text, nameEnd + 1)) {
-    const urlEnd = readPastUrlBody(text, nameEnd + 1);
-    return { type: 'url', text: text.slice(index, urlEnd) };
-  }
-  return { type: 'function', text: text.slice(index, nameEnd + 1) };
-}
-
-/**
- * Reads the string token at an index, which runs to the matching quote and
- * takes escaped quotes in its stride.
- *
- * @param  {string}   text   The CSS value being read.
- * @param  {number}   index  The index of the opening quote.
- * @return {CssToken}        The string token.
- */
-function readStringToken (text, index) {
-  const quote = text[index];
-  let end = index + 1;
-  while (end < text.length) {
-    if (startsEscape(text, end)) {
-      end = readPastEscape(text, end);
-      continue;
-    }
-    if (text[end] === quote) {
-      end++;
-      break;
-    }
-    if (text[end] === '\n') {
-      break;
-    }
-    end++;
-  }
-  return { type: 'string', text: text.slice(index, end) };
-}
-
-/**
- * Reads the run of whitespace at an index as the single token that CSS treats
- * it as.
- *
- * @param  {string}   text   The CSS value being read.
- * @param  {number}   index  The index the whitespace starts at.
- * @return {CssToken}        The whitespace token.
- */
-function readWhitespaceToken (text, index) {
-  let end = index;
-  while (end < text.length && WHITESPACE_CHARACTER.test(text[end])) {
-    end++;
-  }
-  return { type: 'whitespace', text: text.slice(index, end) };
-}
-
-/**
- * The characters that stand on their own as structural punctuation, none of
- * which can ever merge with the token beside it.
- *
- * @type {Set<string>}
- */
-const PUNCTUATION_CHARACTERS = new Set(['(', ')', '[', ']', '{', '}', ',', ':', ';']);
-
-/**
- * Reads the single token that starts at an index.
- *
- * @param  {string}   text   The CSS value being read.
- * @param  {number}   index  The index the token starts at.
- * @return {CssToken}        The token found at the index.
- */
-function readToken (text, index) {
-  const character = text[index];
-
-  if (WHITESPACE_CHARACTER.test(character)) {
-    return readWhitespaceToken(text, index);
-  }
-  if (character === '"' || character === '\'') {
-    return readStringToken(text, index);
-  }
-  if (PUNCTUATION_CHARACTERS.has(character)) {
-    return { type: 'punctuation', text: character };
-  }
-  if (character === '#') {
-    const startsHash = NAME_CHARACTER.test(text[index + 1] || '') || startsEscape(text, index + 1);
-    if (startsHash) {
-      return { type: 'hash', text: text.slice(index, readPastName(text, index + 1)) };
-    }
-  }
-  if (character === '@' && startsIdent(text, index + 1)) {
-    return { type: 'at-keyword', text: text.slice(index, readPastName(text, index + 1)) };
-  }
-  if (startsNumber(text, index)) {
-    return readNumericToken(text, index);
-  }
-  if (startsIdent(text, index)) {
-    return readIdentLikeToken(text, index);
-  }
-  return { type: 'delim', text: character };
-}
-
-/**
- * Splits a CSS value into the tokens that the CSS Syntax tokenizer would read
- * out of it.
- *
- * @param  {string} value  The CSS value to tokenize.
- * @return {Array}         The tokens the value holds, in the order they appear.
- */
-function tokenizeCssValue (value) {
-  const tokens = [];
-  let index = 0;
-  while (index < value.length) {
-    const token = readToken(value, index);
-    tokens.push(token);
-    index += Math.max(token.text.length, 1);
-  }
-  return tokens;
-}
 
 /**
  * The operators that a math function requires whitespace on both sides of. Both