@thejaredwilcurt/csslop 0.0.31 → 0.0.33

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.31",
+  "version": "0.0.33",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -27,7 +27,7 @@
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",
     "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/view": "^6.43.9",
+    "@codemirror/view": "^6.43.10",
     "@eslint/js": "^10.0.1",
     "@stylistic/eslint-plugin": "^5.10.0",
     "codemirror": "^6.0.2",
@@ -36,9 +36,9 @@
     "eslint-config-tjw-import-x": "^1.0.1",
     "eslint-config-tjw-jsdoc": "^2.0.1",
     "eslint-plugin-import-x": "^4.17.0",
-    "eslint-plugin-jsdoc": "^64.2.1",
+    "eslint-plugin-jsdoc": "^64.3.4",
     "fflate": "^0.8.3",
-    "globals": "^17.11.0",
+    "globals": "^17.12.0",
     "pretty-ms": "^9.3.1",
     "real-world-css-libraries": "^1.0.8",
     "vite": "^8.2.2"

package/src/declarations/config.js

@@ -80,7 +80,7 @@ const shorthandMap = {
   'border-block-width': ['border-block-start-width', 'border-block-end-width'],
   transition: ['transition-property', 'transition-duration', 'transition-timing-function', 'transition-delay'],
   animation: ['animation-name', 'animation-duration', 'animation-timing-function', 'animation-delay', 'animation-iteration-count', 'animation-direction', 'animation-fill-mode', 'animation-play-state'],
-  mask: ['mask-image', 'mask-repeat', 'mask-size'],
+  mask: ['mask-image', 'mask-position', 'mask-size', 'mask-repeat'],
   'position-try': ['position-try-order', 'position-try-fallbacks'],
   font: ['font-style', 'font-weight', 'font-size', 'line-height', 'font-family'],
   marker: ['marker-start', 'marker-mid', 'marker-end'],
@@ -92,7 +92,7 @@ const shorthandOverrideMap = {
   columns: ['column-wrap'],
   border: ['border-image', 'border-image-source', 'border-image-slice', 'border-image-width', 'border-image-outset', 'border-image-repeat'],
   font: ['font-variant', 'font-variant-alternates', 'font-variant-caps', 'font-variant-east-asian', 'font-variant-ligatures', 'font-variant-numeric', 'font-variant-position', 'font-feature-settings', 'font-kerning', 'font-language-override', 'font-optical-sizing', 'font-size-adjust', 'font-variation-settings'],
-  mask: ['mask-border', 'mask-border-source', 'mask-border-slice', 'mask-border-width', 'mask-border-outset', 'mask-border-repeat', 'mask-border-mode', 'mask-position', 'mask-origin', 'mask-clip', 'mask-composite', 'mask-mode']
+  mask: ['mask-border', 'mask-border-source', 'mask-border-slice', 'mask-border-width', 'mask-border-outset', 'mask-border-repeat', 'mask-border-mode', 'mask-origin', 'mask-clip', 'mask-composite', 'mask-mode']
 };
 
 /**
@@ -199,6 +199,93 @@ function getOverridesOf (shorthandName) {
   return OVERRIDES_BY_SHORTHAND.get(shorthandName) || NO_PROPERTIES;
 }
 
+/**
+ * The words a longhand adds to its shorthand's name to say which side, axis,
+ * corner, or alignment dimension of the box that longhand applies to, such as
+ * the `top` of `padding-top` or the `row` of `row-gap`.
+ *
+ * @type {Set<string>}
+ */
+const BOX_PART_WORDS = new Set([
+  'align',
+  'block',
+  'bottom',
+  'column',
+  'end',
+  'inline',
+  'justify',
+  'left',
+  'right',
+  'row',
+  'start',
+  'top',
+  'x',
+  'y'
+]);
+
+/**
+ * Removes each of the shorthand's own words from a longhand's words, leaving
+ * only the words the longhand adds to name the part of the box it covers. Each
+ * shared word is removed once, so the `border` and the `radius` of
+ * `border-radius` leave `top` and `left` behind in `border-top-left-radius`.
+ *
+ * @param  {Array} longhandWords   The hyphen-separated words of the longhand's name.
+ * @param  {Array} shorthandWords  The hyphen-separated words of the shorthand's name.
+ * @return {Array}                 The words the longhand adds on top of the shorthand's.
+ */
+function subtractSharedWords (longhandWords, shorthandWords) {
+  const remainingWords = [...longhandWords];
+  for (const shorthandWord of shorthandWords) {
+    const wordIndex = remainingWords.indexOf(shorthandWord);
+    if (wordIndex !== -1) {
+      remainingWords.splice(wordIndex, 1);
+    }
+  }
+  return remainingWords;
+}
+
+/**
+ * Whether each shorthand takes a positional list of components, computed on
+ * first use, since the shorthand tables never change.
+ *
+ * @type {Map<string, boolean>}
+ */
+const positionalComponentsByShorthand = new Map();
+
+/**
+ * Reports whether a shorthand's value is a positional list of same-typed
+ * components rather than an unordered set of components that its grammar tells
+ * apart by type. A shorthand is positional when its longhands are the very same
+ * property repeated for each part of the box, as `padding` repeats a length for
+ * each side and `gap` repeats one for each axis. Nothing but the order the
+ * components are written in says which part of the box each one lands on, so
+ * the whitespace between them delimits the list. A shorthand such as `border`
+ * or `font`, whose longhands each hold a different kind of value, is not
+ * positional: its grammar reads each component by type, in any order.
+ *
+ * @param  {string}  shorthandName  The CSS property name to test.
+ * @return {boolean}                Whether the shorthand's components are positional.
+ */
+function hasPositionalComponents (shorthandName) {
+  const cachedAnswer = positionalComponentsByShorthand.get(shorthandName);
+  if (cachedAnswer !== undefined) {
+    return cachedAnswer;
+  }
+  const longhands = shorthandMap[shorthandName];
+  let isPositional = false;
+  if (Array.isArray(longhands)) {
+    const shorthandWords = shorthandName.split('-');
+    isPositional = longhands.every((longhand) => {
+      const addedWords = subtractSharedWords(longhand.split('-'), shorthandWords);
+      return Boolean(addedWords.length) && addedWords.every((word) => {
+        return BOX_PART_WORDS.has(word);
+      });
+    });
+  }
+  positionalComponentsByShorthand.set(shorthandName, isPositional);
+  return isPositional;
+}
+
 /**
  * The leaf longhands each property ultimately sets, computed on first use. The
  * shorthand tables never change, so a property always expands the same way.
@@ -242,6 +329,7 @@ export {
   expandToLeafProperties,
   getLonghandsOf,
   getOverridesOf,
+  hasPositionalComponents,
   shorthandMap,
   shorthandOverrideMap,
   UNIFORM_VALUE_SHORTHANDS

package/src/value/minify.js

@@ -3,6 +3,7 @@
  */
 
 import { isUnicodeCharset } from '../context.js';
+import { hasPositionalComponents } from '../declarations/config.js';
 import { resolveUnicodeEscape } from '../utilities.js';
 
 import { evaluateColorMix } from './color-mix.js';
@@ -37,6 +38,7 @@ import {
   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';
 
@@ -200,20 +202,6 @@ function splitValueSegments (value) {
   return segments;
 }
 
-/**
- * Reports whether a segment is a quoted string. Every literal segment is either
- * a quoted string or a url() token, so anything else is one of the latter.
- *
- * @param  {ValueSegment} [segment]  The segment to test, when the value has one there.
- * @return {boolean}                 Whether the segment is a quoted string.
- */
-function isQuotedStringSegment (segment) {
-  if (!segment?.isLiteral) {
-    return false;
-  }
-  return segment.text.startsWith('"') || segment.text.startsWith('\'');
-}
-
 /**
  * Applies a replacer function only to segments of a CSS value that are outside quoted strings and url() functions, preserving those literal segments unchanged.
  *
@@ -246,106 +234,6 @@ function lowercaseHexColors (value) {
   });
 }
 
-/**
- * Removes whitespace that precedes a hex color token. A `#` unambiguously starts
- * a hash token in CSS, so no separator is required between it and a preceding
- * ident, keyword, or number (e.g. `1px solid #f00` becomes `1px solid#f00`).
- *
- * @param  {string} value  The CSS value string.
- * @return {string}        The value with spaces before hex colors removed.
- */
-function elideSpaceBeforeHexColors (value) {
-  return replaceOutsideStringsAndUrls(value, (segment) => {
-    // Match whitespace followed by a hex color token of 3 to 8 hex digits
-    return segment.replace(/\s+#([0-9a-fA-F]{3,8})\b/gi, '#$1');
-  });
-}
-
-/**
- * Matches the separator whitespace at the head of a value segment. Whitespace
- * that precedes a `+` or a `-` is left alone, because a math function requires
- * those two operators to be surrounded by it.
- *
- * @type {RegExp}
- */
-const LEADING_SEPARATOR_PATTERN = /^\s+(?![+-])/;
-
-/**
- * Removes the separator whitespace that follows a closing parenthesis. A
- * parenthesis ends its own token, so the whitespace after one never keeps two
- * tokens from merging: `url(a.png) 30 round` holds the same tokens as
- * `url(a.png)30 round`.
- *
- * @param  {string} value  The CSS value string.
- * @return {string}        The value without the redundant separators.
- */
-function elideSpaceAfterParentheses (value) {
-  const segments = splitValueSegments(value);
-  return segments.map((segment, index) => {
-    if (segment.isLiteral) {
-      return segment.text;
-    }
-    let text = segment.text;
-    const previousSegment = segments[index - 1];
-    // A url() token ends with the parenthesis that closes it, so whitespace at
-    // the head of the segment after one is a separator of the same kind
-    if (previousSegment?.isLiteral && !isQuotedStringSegment(previousSegment)) {
-      text = text.replace(LEADING_SEPARATOR_PATTERN, '');
-    }
-    // Match whitespace that follows a closing parenthesis
-    return text.replace(/\)\s+(?![+-])/g, ')');
-  }).join('');
-}
-
-/**
- * Removes the separator whitespace that follows a closing quote. A string ends
- * its own token, so no separator is needed between it and the token that comes
- * next: `"smcp" 1` holds the same tokens as `"smcp"1`.
- *
- * @param  {string} value  The CSS value string.
- * @return {string}        The value without the redundant separators.
- */
-function elideSpaceAfterStrings (value) {
-  const segments = splitValueSegments(value);
-  return segments.map((segment, index) => {
-    if (segment.isLiteral || !isQuotedStringSegment(segments[index - 1])) {
-      return segment.text;
-    }
-    return segment.text.replace(LEADING_SEPARATOR_PATTERN, '');
-  }).join('');
-}
-
-/**
- * Reports whether a value separates top-level entries with commas, the way the
- * repeatable values of properties such as `font-variation-settings` and
- * `transition` do. Every literal is skipped, so a comma inside a string or a
- * url does not count, and the parenthesis depth tells a function's argument
- * separators apart from the value's own.
- *
- * @param  {string}  value  The CSS value string.
- * @return {boolean}        Whether the value holds more than one comma-separated entry.
- */
-function hasCommaSeparatedEntries (value) {
-  let depth = 0;
-  for (const segment of splitValueSegments(value)) {
-    if (segment.isLiteral) {
-      continue;
-    }
-    for (const character of segment.text) {
-      if (character === '(') {
-        depth++;
-      }
-      if (character === ')') {
-        depth = Math.max(0, depth - 1);
-      }
-      if (character === ',' && depth === 0) {
-        return true;
-      }
-    }
-  }
-  return false;
-}
-
 /**
  * Restores the whitespace that a math function requires before a `+` or a `-`
  * operator. Both operators have to be surrounded by whitespace to be read as
@@ -965,6 +853,18 @@ const PUNCTUATED_COMPONENT_PROPERTIES = new Set([
   'transform'
 ]);
 
+/**
+ * Reports whether a property is a custom property. A custom property holds an
+ * arbitrary token stream rather than a typed value, so every one of its tokens,
+ * whitespace included, is part of what it stores.
+ *
+ * @param  {string}  property  The CSS property name.
+ * @return {boolean}           Whether the property is a custom property.
+ */
+function isCustomProperty (property) {
+  return Boolean(property) && property.startsWith('--');
+}
+
 /**
  * Matches one offset of a position: an edge keyword or a numeric distance.
  *
@@ -980,12 +880,31 @@ const POSITION_OFFSET_SOURCE = '(?:left|center|right|top|bottom|[+-]?(?:\\d+|\\d
 const POSITION_COMPONENT_SOURCE = '(' + POSITION_OFFSET_SOURCE + '(?:\\s+' + POSITION_OFFSET_SOURCE + ')?)';
 
 /**
- * Matches a close-paren directly followed by a position that no slash follows,
- * which is the position that needs its separator put back.
+ * Matches everything a `url()` holds up to but not including its own closing
+ * parenthesis. A url is written without nested parentheses, so the first one
+ * that closes it is the end of the token.
+ *
+ * @type {string}
+ */
+const URL_TOKEN_BODY_SOURCE = 'url\\([^()]*';
+
+/**
+ * Matches a close-paren that ends an image function, directly followed by a
+ * position that no slash follows, which is the position that needs its
+ * separator put back. The parenthesis that ends a `url()` is skipped, since
+ * that one closes a token rather than a function.
+ *
+ * @type {RegExp}
+ */
+const UNSEPARATED_FUNCTION_POSITION_PATTERN = new RegExp('(?<!' + URL_TOKEN_BODY_SOURCE + ')\\)' + POSITION_COMPONENT_SOURCE + '(?!\\/)', 'gi');
+
+/**
+ * Matches a `url()` separated from the position that follows it, which is the
+ * separator a url does not need.
  *
  * @type {RegExp}
  */
-const UNSEPARATED_IMAGE_POSITION_PATTERN = new RegExp('\\)' + POSITION_COMPONENT_SOURCE + '(?!\\/)', 'gi');
+const SEPARATED_URL_POSITION_PATTERN = new RegExp('(' + URL_TOKEN_BODY_SOURCE + '\\))\\s+' + POSITION_COMPONENT_SOURCE, 'gi');
 
 /**
  * Matches a close-paren separated from a position that a slash follows, where
@@ -996,18 +915,61 @@ const UNSEPARATED_IMAGE_POSITION_PATTERN = new RegExp('\\)' + POSITION_COMPONENT
 const SEPARATED_IMAGE_SIZE_POSITION_PATTERN = new RegExp('\\)\\s+' + POSITION_COMPONENT_SOURCE + '(?=\\/)', 'gi');
 
 /**
- * Restores the separator between an image function and the position that
+ * Normalizes the separator between the image of a layer and the position that
  * follows it. Both `background` and `mask` take a `<position> [ / <size> ]`
  * component after their image, and a bare position only reads as its own
- * component while whitespace separates it from the image function. A position
- * that a `/` follows needs no separator, since the slash delimits the pair.
+ * component while whitespace separates it from an image function. Neither a
+ * position that a `/` follows nor one that follows a `url()` needs the
+ * separator, since the slash delimits the pair and a url is consumed whole as a
+ * single token that ends at its own closing parenthesis.
  *
  * @param  {string} value  The layered image value, with the parenthesis padding removed.
- * @return {string}        The value with the position separator restored.
+ * @return {string}        The value with the position separator normalized.
  */
-function restoreImagePositionSeparator (value) {
-  const separated = value.replace(UNSEPARATED_IMAGE_POSITION_PATTERN, ') $1');
-  return separated.replace(SEPARATED_IMAGE_SIZE_POSITION_PATTERN, ')$1');
+function normalizeImagePositionSeparator (value) {
+  const separatedFromFunction = value.replace(UNSEPARATED_FUNCTION_POSITION_PATTERN, ') $1');
+  const joinedToUrl = separatedFromFunction.replace(SEPARATED_URL_POSITION_PATTERN, '$1$2');
+  return joinedToUrl.replace(SEPARATED_IMAGE_SIZE_POSITION_PATTERN, ')$1');
+}
+
+/**
+ * Matches the keywords that state a border line style.
+ *
+ * @type {string}
+ */
+const BORDER_STYLE_KEYWORD_SOURCE = 'solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|none';
+
+/**
+ * Matches the ways a border line width is stated: one of its three keywords, a
+ * length, or a math function that resolves to one.
+ *
+ * @type {string}
+ */
+const BORDER_WIDTH_SOURCE = 'thin|medium|thick|[+-]?(?:\\d+|\\d*\\.\\d+)[a-z]*|(?:calc|min|max|clamp)\\([^()]*\\)';
+
+/**
+ * Matches a `border` value that states its line style in front of its line
+ * width, with the two captured so they can be swapped.
+ *
+ * @type {RegExp}
+ */
+const BORDER_STYLE_BEFORE_WIDTH_PATTERN = new RegExp(
+  '^(' + BORDER_STYLE_KEYWORD_SOURCE + ')\\s+(' + BORDER_WIDTH_SOURCE + ')(?=\\s|$)',
+  'i'
+);
+
+/**
+ * Rewrites a `border` value that leads with its line style into the canonical
+ * width-style-color order. The width has to be recognized before the two are
+ * swapped: `border` states its components in any order, so the component behind
+ * the style may be a color instead, as in `solid #8aadf4 1px`, and that one
+ * belongs behind the width rather than in front of it.
+ *
+ * @param  {string} value  The `border` value.
+ * @return {string}        The value with its width stated before its style.
+ */
+function reorderBorderWidthBeforeStyle (value) {
+  return value.replace(BORDER_STYLE_BEFORE_WIDTH_PATTERN, '$2 $1');
 }
 
 /**
@@ -1120,10 +1082,8 @@ function applyPropertyOptimizations (val, property, allowsSeparatorElision) {
     val = convertBackgroundPositionKeywords(val);
   }
 
-  // Check if border value starts with a style keyword, and reorder to canonical width-style-color order
-  if (property === 'border' && /^(?:solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|none)\s+/i.test(val)) {
-    // Reorder border shorthand from style-width-color to width-style-color
-    val = val.replace(/^((?:solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|none))\s+([^\s]+)\s+(.+)$/i, '$2 $1 $3');
+  if (property === 'border') {
+    val = reorderBorderWidthBeforeStyle(val);
   }
 
   if (property === 'flex-flow') {
@@ -1160,8 +1120,7 @@ function applyPropertyOptimizations (val, property, allowsSeparatorElision) {
 
   // Custom properties hold an arbitrary token stream rather than a typed value,
   // so a unit-like token in one is not necessarily a length.
-  const isCustomProperty = Boolean(property) && property.startsWith('--');
-  if (!isCustomProperty) {
+  if (!isCustomProperty(property)) {
     val = replaceOutsideStringsAndUrls(val, convertAbsoluteLengthsToPx);
   }
 
@@ -1185,10 +1144,6 @@ function applyPropertyOptimizations (val, property, allowsSeparatorElision) {
     return shortenColorValues(segment, allowsSeparatorElision);
   });
 
-  // Remove space before hex colors (second pass after color evaluations)
-  if (allowsSeparatorElision) {
-    val = elideSpaceBeforeHexColors(val);
-  }
   if (!PUNCTUATED_COMPONENT_PROPERTIES.has(property)) {
     // Restore space after close-paren when followed by an alphanumeric, hash, or hyphen
     val = val.replace(/\)(?=[0-9a-zA-Z#-])/g, ') ');
@@ -1227,11 +1182,11 @@ function applyPropertyOptimizations (val, property, allowsSeparatorElision) {
     if (normalized) {
       val = normalized;
     }
-    val = restoreImagePositionSeparator(val);
+    val = normalizeImagePositionSeparator(val);
   }
 
   if (property === 'mask') {
-    val = restoreImagePositionSeparator(val);
+    val = normalizeImagePositionSeparator(val);
   }
 
   if (property === 'border') {
@@ -1288,6 +1243,21 @@ function applyPropertyOptimizations (val, property, allowsSeparatorElision) {
   return val;
 }
 
+/**
+ * Reports whether a declaration holds a shorthand that was assembled by joining
+ * already-minified longhand values with a separator, and whose grammar reads
+ * those components by their position in the list. Nothing but that separator
+ * says where one component ends and the next begins, so it is kept even where
+ * the two components happen to be tokens that would survive being written
+ * together.
+ *
+ * @param  {object}  declaration  The CSS declaration object with property and value fields.
+ * @return {boolean}              Whether the assembled components keep their separators.
+ */
+function keepsAssembledComponentSeparators (declaration) {
+  return Boolean(declaration.isAssembledShorthand) && hasPositionalComponents(declaration.property);
+}
+
 /**
  * Minifies a CSS declaration's value by applying color conversion, math simplification, shorthand compression, gradient optimization, and other property-specific optimizations.
  *
@@ -1305,10 +1275,7 @@ function computeMinifiedValue (declaration) {
     return 'none';
   }
   let val = declaration.value;
-  // Values assembled from already-minified longhands keep the separator spaces
-  // between their components, because those spaces delimit the shorthand's
-  // parts rather than the authored whitespace of a single written value.
-  const allowsSeparatorElision = !declaration.isAssembledShorthand;
+  const allowsSeparatorElision = !keepsAssembledComponentSeparators(declaration);
 
   if (typeof val === 'string') {
     val = val.trim();
@@ -1352,16 +1319,13 @@ function computeMinifiedValue (declaration) {
     }
 
     val = lowercaseHexColors(val);
-    if (allowsSeparatorElision) {
-      val = elideSpaceBeforeHexColors(val);
-    }
 
     // Convert color functions to hex equivalents
     val = convertColorsToHex(val);
 
     // Shorten all color tokens (hex and named) to their shortest representation.
-    // An assembled shorthand keeps the whitespace between its components, so a
-    // spelling of the same length saves it nothing and its components keep the
+    // A value that keeps the whitespace between its components saves nothing by
+    // switching to a spelling of the same length, so its colors keep the
     // spelling they were written with.
     val = replaceOutsideStringsAndUrls(val, (segment) => {
       return shortenColorValues(segment, allowsSeparatorElision);
@@ -1390,19 +1354,17 @@ function computeMinifiedValue (declaration) {
 
   // Every earlier pass reads the value with its component separators in place,
   // so the ones that turned out to be redundant are only dropped at the end.
-  // The properties that punctuate their own components never got them back.
   const elidesRedundantSeparators = (
     typeof val === 'string' &&
     allowsSeparatorElision &&
-    !PUNCTUATED_COMPONENT_PROPERTIES.has(declaration.property)
+    !isCustomProperty(declaration.property)
   );
   if (elidesRedundantSeparators) {
-    val = elideSpaceAfterParentheses(val);
-    // A value written as one entry is elided down to its tokens, while a
-    // comma-separated list keeps the whitespace that groups each of its entries.
-    if (!hasCommaSeparatedEntries(val)) {
-      val = elideSpaceAfterStrings(val);
-    }
+    // A property that punctuates its own components already had the whitespace
+    // after its closing parentheses taken out, and only the separators its
+    // grammar still needs put back, so those are the ones left alone here.
+    const elidesAfterSelfEndingTokens = !PUNCTUATED_COMPONENT_PROPERTIES.has(declaration.property);
+    val = elideRedundantSeparators(val, elidesAfterSelfEndingTokens);
   }
 
   return val;

package/src/value/tokens.js

@@ -0,0 +1,527 @@
+/**
+ * @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.
+ */
+
+/**
+ * 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);
+}
+
+/**
+ * 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.
+ *
+ * @param  {string}  text   The CSS value being read.
+ * @param  {number}  index  The index to test.
+ * @return {boolean}        Whether a number starts at the index.
+ */
+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
+ * of them double as the sign of a number, so an unseparated one is read as part
+ * of the term that follows it and the expression silently breaks.
+ *
+ * @type {Set<string>}
+ */
+const MATH_OPERATOR_DELIMITERS = new Set(['+', '-']);
+
+/**
+ * Reports whether a token is an operator that a math function needs kept apart
+ * from the terms around it.
+ *
+ * @param  {CssToken} token  The token to test.
+ * @return {boolean}         Whether the token is a `+` or a `-` operator.
+ */
+function isMathOperator (token) {
+  return token.type === 'delim' && MATH_OPERATOR_DELIMITERS.has(token.text);
+}
+
+/**
+ * Reports whether two tokens written side by side still read as those same two
+ * tokens. Writing them together and tokenizing the result answers this for
+ * every pair at once: a pair that merges comes back as one token, such as the
+ * `4px` and `solid` of `4pxsolid`, while a pair that holds its own comes back
+ * unchanged, such as the `solid` and `#0000` of `solid#0000`.
+ *
+ * @param  {CssToken} leftToken   The token before the separator.
+ * @param  {CssToken} rightToken  The token after the separator.
+ * @return {boolean}              Whether the two tokens survive being written together.
+ */
+function canJoinTokens (leftToken, rightToken) {
+  const rejoinedTokens = tokenizeCssValue(leftToken.text + rightToken.text);
+  return (
+    rejoinedTokens.length === 2 &&
+    rejoinedTokens[0].text === leftToken.text &&
+    rejoinedTokens[1].text === rightToken.text
+  );
+}
+
+/**
+ * The characters that close a token and can never continue one. A token that
+ * ends with one of them, such as a `url()` or a quoted string, marks where it
+ * ends without any help from the whitespace behind it.
+ *
+ * @type {Set<string>}
+ */
+const TOKEN_CLOSING_CHARACTERS = new Set([')', ']', '}', '"', '\'']);
+
+/**
+ * The characters that can only ever open a token, never continue one. A token
+ * that starts with one of them, such as a hash color or a quoted string, marks
+ * where it starts without any help from the whitespace in front of it.
+ *
+ * @type {Set<string>}
+ */
+const TOKEN_OPENING_CHARACTERS = new Set(['#', '!', '"', '\'', '(', ')', '[', ']', '{', '}', ',', ':', ';']);
+
+/**
+ * Reports whether a token spells out its own end, so that the token after it
+ * reads as a separate one even with nothing written between them.
+ *
+ * @param  {CssToken} token  The token to test.
+ * @return {boolean}         Whether the token's last character closes it.
+ */
+function marksItsOwnEnd (token) {
+  return TOKEN_CLOSING_CHARACTERS.has(token.text.slice(-1));
+}
+
+/**
+ * Reports whether a token spells out its own start, so that the token before it
+ * reads as a separate one even with nothing written between them.
+ *
+ * @param  {CssToken} token  The token to test.
+ * @return {boolean}         Whether the token's first character opens it.
+ */
+function marksItsOwnStart (token) {
+  return TOKEN_OPENING_CHARACTERS.has(token.text.slice(0, 1));
+}
+
+/**
+ * Reports whether the whitespace between two tokens carries nothing. That takes
+ * three things: one of the two tokens has to spell out the boundary the
+ * whitespace would otherwise be drawing, the pair has to survive being written
+ * together as the same two tokens, and neither of them may be a math operator,
+ * which reads the whitespace around it as part of the expression's grammar.
+ *
+ * @param  {CssToken} [previousToken]              The token before the whitespace, when the whitespace does not lead the value.
+ * @param  {CssToken} [nextToken]                  The token after the whitespace, when the whitespace does not trail the value.
+ * @param  {boolean}  elidesAfterSelfEndingTokens  Whether a token that marks its own end is allowed to absorb the whitespace behind it.
+ * @return {boolean}                               Whether the whitespace may be dropped.
+ */
+function isRedundantSeparator (previousToken, nextToken, elidesAfterSelfEndingTokens) {
+  if (!previousToken || !nextToken) {
+    return true;
+  }
+  if (isMathOperator(previousToken) || isMathOperator(nextToken)) {
+    return false;
+  }
+  const marksTheBoundary = (
+    (elidesAfterSelfEndingTokens && marksItsOwnEnd(previousToken)) ||
+    marksItsOwnStart(nextToken)
+  );
+  if (!marksTheBoundary) {
+    return false;
+  }
+  return canJoinTokens(previousToken, nextToken);
+}
+
+/**
+ * Removes every run of whitespace in a CSS value that separates two tokens
+ * already marking the boundary between them, leaving the runs that keep their
+ * neighbours from being read as a single different token.
+ *
+ * @param  {string}  value                        The minified CSS value.
+ * @param  {boolean} elidesAfterSelfEndingTokens  Whether the whitespace that follows a token marking its own end, such as a `url()` or a function call, may go. A grammar that reads a component by where it sits relative to a function, such as the `<position>` that may follow the image of a `background` layer, keeps those separators and drops only the ones the token after them marks.
+ * @return {string}                               The value without its redundant separators.
+ */
+function elideRedundantSeparators (value, elidesAfterSelfEndingTokens = true) {
+  const tokens = tokenizeCssValue(value);
+  return tokens.map((token, index) => {
+    if (token.type !== 'whitespace') {
+      return token.text;
+    }
+    if (isRedundantSeparator(tokens[index - 1], tokens[index + 1], elidesAfterSelfEndingTokens)) {
+      return '';
+    }
+    return token.text;
+  }).join('');
+}
+
+export { elideRedundantSeparators };