@thejaredwilcurt/csslop 0.0.37 → 0.0.39

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

package/src/value/transforms.js

@@ -2,6 +2,11 @@
  * @file Minifies CSS transform values by simplifying individual transform functions, collapsing axes, and removing identity components.
  */
 
+import {
+  findMatchingParenthesis,
+  splitTopLevelCommaList
+} from '../parser/source-search.js';
+
 import {
   normalizeScaleComponent,
   roundCompactNumber
@@ -17,41 +22,11 @@ function isZeroTransformValue (value) {
   return /^[-+]?0(?:[a-z%]+)?$/i.test(value.trim());
 }
 
-/**
- * Splits a CSS function's comma-separated argument string into an array, correctly handling nested parentheses.
- *
- * @param  {string} value  The raw arguments string inside the function parentheses.
- * @return {Array}         An array of trimmed argument strings.
- */
-function splitFunctionArguments (value) {
-  const parts = [];
-  let depth = 0;
-  let current = '';
-  for (const character of value) {
-    if (character === '(') {
-      depth++;
-    }
-    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;
-}
-
 /**
  * Parses a CSS transform value string into an array of objects, each containing a function name and its raw arguments string.
  *
  * @param  {string}     value  The full CSS transform value string.
- * @return {Array|null}        An array of { name, args } objects, or null if the string cannot be parsed.
+ * @return {Array|null}        An array of { name, arguments } objects, or null if the string cannot be parsed.
  */
 function splitTransformFunctions (value) {
   const parts = [];
@@ -72,23 +47,15 @@ function splitTransformFunctions (value) {
     if (nameStart === position || value[position] !== '(') {
       return null;
     }
-    const name = value.slice(nameStart, position);
-    let depth = 1;
-    let end = position + 1;
-    while (end < value.length && depth > 0) {
-      if (value[end] === '(') {
-        depth++;
-      }
-      if (value[end] === ')') {
-        depth--;
-      }
-      end++;
-    }
-    if (depth !== 0) {
+    const closeIndex = findMatchingParenthesis(value, position);
+    if (closeIndex === -1) {
       return null;
     }
-    parts.push({ name, args: value.slice(position + 1, end - 1) });
-    position = end;
+    parts.push({
+      name: value.slice(nameStart, position),
+      argumentText: value.slice(position + 1, closeIndex)
+    });
+    position = closeIndex + 1;
   }
   return parts;
 }
@@ -96,13 +63,13 @@ function splitTransformFunctions (value) {
 /**
  * Minifies a single CSS transform function by simplifying 3D functions to 2D equivalents, collapsing redundant axes, and normalizing scale percentages.
  *
- * @param  {string} name  The transform function name (e.g. "translate3d", "scale").
- * @param  {string} args  The raw comma-separated arguments string.
- * @return {string}       The minified transform function call string.
+ * @param  {string} name          The transform function name (e.g. "translate3d", "scale").
+ * @param  {string} argumentText  The raw comma-separated arguments string.
+ * @return {string}               The minified transform function call string.
  */
-function minifyTransformFunction (name, args) {
+function minifyTransformFunction (name, argumentText) {
   const lowerName = name.toLowerCase();
-  const parts = splitFunctionArguments(args);
+  const parts = splitTopLevelCommaList(argumentText);
 
   if (lowerName === 'rotate' && parts.length === 1) {
     // Convert turn units to degrees (e.g. 0.5turn → 180deg)
@@ -214,8 +181,8 @@ function minifyTransformValue (value) {
   if (!functions) {
     return value;
   }
-  return functions.map(({ name, args }) => {
-    return minifyTransformFunction(name, args);
+  return functions.map(({ name, argumentText }) => {
+    return minifyTransformFunction(name, argumentText);
   }).join(' ');
 }
 

package/src/value/syntax.js

@@ -1,144 +0,0 @@
-/**
- * @file Provides syntax-aware CSS string scanning utilities.
- */
-
-/**
- * Finds the closing parenthesis for an opening parenthesis while respecting
- * nested parentheses and quoted strings.
- *
- * @param  {string} value           The CSS text being scanned.
- * @param  {number} openParenIndex  The index of the opening `(` character.
- * @return {number}                 The closing `)` index, or -1 if unmatched.
- */
-function findMatchingParenthesis (value, openParenIndex) {
-  let depth = 1;
-  let index = openParenIndex + 1;
-  let activeQuote = '';
-
-  while (index < value.length) {
-    const character = value[index];
-    if (activeQuote) {
-      if (character === '\\') {
-        index += 2;
-        continue;
-      }
-      if (character === activeQuote) {
-        activeQuote = '';
-      }
-      index++;
-      continue;
-    }
-
-    // An escaped character is data rather than a delimiter, even outside a
-    // quoted string, as in the `\)` of an unquoted url()
-    if (character === '\\') {
-      index += 2;
-      continue;
-    }
-
-    if (character === '"' || character === '\'') {
-      activeQuote = character;
-      index++;
-      continue;
-    }
-
-    if (character === '(') {
-      depth++;
-      index++;
-      continue;
-    }
-
-    if (character === ')') {
-      depth--;
-      if (depth === 0) {
-        return index;
-      }
-    }
-    index++;
-  }
-
-  return -1;
-}
-
-/**
- * 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
-};