@thejaredwilcurt/csslop 0.0.20 → 0.0.21

package/src/declarations/shorthand-values.js

@@ -0,0 +1,374 @@
+/**
+ * @file Serializes the collected longhand values of a shorthand into the shortest valid shorthand value, one builder per shorthand family.
+ */
+
+import { collapseShorthandParts } from '../value/shared.js';
+import { splitTopLevelComponents } from '../value/syntax.js';
+
+import { buildBackgroundShorthandValue } from './background.js';
+
+/**
+ * @typedef  {object} ShorthandComponents
+ * @property {Array}  properties           The longhand property names being merged, in shorthand order.
+ * @property {Map}    valueMap             A map of each longhand property name to its cleaned value.
+ * @property {Array}  cleanValues          The cleaned longhand values, in the same order as `properties`.
+ * @property {string} importantSuffix      A trailing `!important` suffix, or an empty string.
+ */
+
+/**
+ * Builds a `position-try` value, which only collapses while the order component
+ * is at its `normal` default.
+ *
+ * @param  {ShorthandComponents} components  The collected longhand values.
+ * @return {string|null}                     The shorthand value, or null when it cannot be built.
+ */
+function buildPositionTryValue ({ valueMap, importantSuffix }) {
+  const order = valueMap.get('position-try-order');
+  const fallbacks = valueMap.get('position-try-fallbacks');
+  if (order === 'normal' && fallbacks) {
+    return fallbacks + importantSuffix;
+  }
+  return null;
+}
+
+/**
+ * Builds a `transition` value, omitting the trailing components that already
+ * hold their initial value.
+ *
+ * @param  {ShorthandComponents} components  The collected longhand values.
+ * @return {string|null}                     The shorthand value, or null when it cannot be built.
+ */
+function buildTransitionValue ({ valueMap, importantSuffix }) {
+  const transitionProperty = valueMap.get('transition-property');
+  const duration = valueMap.get('transition-duration');
+  const timing = valueMap.get('transition-timing-function');
+  const delay = valueMap.get('transition-delay');
+  if (!transitionProperty || !duration) {
+    return null;
+  }
+  const result = [transitionProperty, duration];
+  if (timing && timing !== 'ease') {
+    result.push(timing);
+  }
+  if (delay && delay !== '0' && delay !== '0s') {
+    result.push(delay);
+  }
+  return result.join(' ') + importantSuffix;
+}
+
+/**
+ * Builds an `animation` value, omitting the components that already hold their
+ * initial value.
+ *
+ * @param  {ShorthandComponents} components  The collected longhand values.
+ * @return {string|null}                     The shorthand value, or null when it cannot be built.
+ */
+function buildAnimationValue ({ valueMap, importantSuffix }) {
+  const animationName = valueMap.get('animation-name');
+  const duration = valueMap.get('animation-duration');
+  if (!animationName || !duration) {
+    return null;
+  }
+  const result = [animationName, duration];
+  const timing = valueMap.get('animation-timing-function');
+  const delay = valueMap.get('animation-delay');
+  const iteration = valueMap.get('animation-iteration-count');
+  const direction = valueMap.get('animation-direction');
+  const fillMode = valueMap.get('animation-fill-mode');
+  const playState = valueMap.get('animation-play-state');
+  if (timing && timing !== 'ease') {
+    result.push(timing);
+  }
+  if (delay && delay !== '0' && delay !== '0s') {
+    result.push(delay);
+  }
+  if (iteration && iteration !== '1') {
+    result.push(iteration);
+  }
+  if (direction && direction !== 'normal') {
+    result.push(direction);
+  }
+  if (fillMode && fillMode !== 'none') {
+    result.push(fillMode);
+  }
+  if (playState && playState !== 'running') {
+    result.push(playState);
+  }
+  return result.join(' ') + importantSuffix;
+}
+
+/**
+ * Builds a `background-position` value from its two axis longhands.
+ *
+ * @param  {ShorthandComponents} components  The collected longhand values.
+ * @return {string|null}                     The shorthand value, or null when it cannot be built.
+ */
+function buildBackgroundPositionValue ({ valueMap, importantSuffix }) {
+  const positionX = valueMap.get('background-position-x');
+  const positionY = valueMap.get('background-position-y');
+  if (!positionX || !positionY) {
+    return null;
+  }
+  return positionX + ' ' + positionY + importantSuffix;
+}
+
+/**
+ * Builds a `background` value from its component longhands.
+ *
+ * @param  {ShorthandComponents} components  The collected longhand values.
+ * @return {string|null}                     The shorthand value, or null when it cannot be built.
+ */
+function buildBackgroundValue ({ valueMap, importantSuffix }) {
+  return buildBackgroundShorthandValue(valueMap, importantSuffix);
+}
+
+/**
+ * Builds a `mask` value, attaching the size after the position separator.
+ *
+ * @param  {ShorthandComponents} components  The collected longhand values.
+ * @return {string|null}                     The shorthand value, or null when it cannot be built.
+ */
+function buildMaskValue ({ valueMap, importantSuffix }) {
+  const image = valueMap.get('mask-image');
+  const repeat = valueMap.get('mask-repeat');
+  const size = valueMap.get('mask-size');
+  if (!image) {
+    return null;
+  }
+  let result = image;
+  if (repeat) {
+    result += ' ' + repeat;
+  }
+  if (size) {
+    result += '/' + size;
+  }
+  return result + importantSuffix;
+}
+
+/**
+ * Builds a `border-image` value, which requires a source to be meaningful.
+ *
+ * @param  {ShorthandComponents} components  The collected longhand values.
+ * @return {string|null}                     The shorthand value, or null when it cannot be built.
+ */
+function buildBorderImageValue ({ valueMap, importantSuffix }) {
+  const source = valueMap.get('border-image-source');
+  const slice = valueMap.get('border-image-slice');
+  const repeat = valueMap.get('border-image-repeat');
+  if (!source) {
+    return null;
+  }
+  const result = [source];
+  if (slice) {
+    result.push(slice);
+  }
+  if (repeat) {
+    result.push(repeat);
+  }
+  return result.join(' ') + importantSuffix;
+}
+
+/**
+ * Builds a `text-decoration` value, omitting the default style and color.
+ *
+ * @param  {ShorthandComponents} components  The collected longhand values.
+ * @return {string|null}                     The shorthand value, or null when it cannot be built.
+ */
+function buildTextDecorationValue ({ valueMap, importantSuffix }) {
+  const line = valueMap.get('text-decoration-line');
+  const style = valueMap.get('text-decoration-style');
+  const color = valueMap.get('text-decoration-color');
+  if (!line) {
+    return null;
+  }
+  const result = [line];
+  if (style && style !== 'solid') {
+    result.push(style);
+  }
+  if (color && color !== 'currentcolor') {
+    result.push(color);
+  }
+  return result.join(' ') + importantSuffix;
+}
+
+/**
+ * Builds a `columns` value, which keeps both components even when they match,
+ * because the width and count are not interchangeable.
+ *
+ * @param  {ShorthandComponents} components  The collected longhand values.
+ * @return {string|null}                     The shorthand value, or null when it cannot be built.
+ */
+function buildColumnsValue ({ cleanValues, importantSuffix }) {
+  return cleanValues.join(' ') + importantSuffix;
+}
+
+/**
+ * Builds a `list-style` value, omitting default components and falling back to
+ * `inside` when every component holds its initial value.
+ *
+ * @param  {ShorthandComponents} components  The collected longhand values.
+ * @return {string|null}                     The shorthand value, or null when it cannot be built.
+ */
+function buildListStyleValue ({ valueMap, importantSuffix }) {
+  const position = valueMap.get('list-style-position');
+  const image = valueMap.get('list-style-image');
+  const type = valueMap.get('list-style-type');
+  const result = [];
+  if (position && position !== 'outside') {
+    result.push(position);
+  }
+  if (image && image !== 'none') {
+    result.push(image);
+  }
+  if (type && type !== 'disc') {
+    result.push(type);
+  }
+  const joined = result.join(' ') || 'inside';
+  return joined + importantSuffix;
+}
+
+/**
+ * Builds a `font` value, which requires both a size and a family, and attaches
+ * any line height after the size separator.
+ *
+ * @param  {ShorthandComponents} components  The collected longhand values.
+ * @return {string|null}                     The shorthand value, or null when it cannot be built.
+ */
+function buildFontValue ({ valueMap, importantSuffix }) {
+  const fontSize = valueMap.get('font-size');
+  const fontFamily = valueMap.get('font-family');
+  if (!fontSize || !fontFamily) {
+    return null;
+  }
+  const result = [];
+  const fontStyle = valueMap.get('font-style');
+  const fontWeight = valueMap.get('font-weight');
+  const lineHeight = valueMap.get('line-height');
+  if (fontStyle && fontStyle !== 'normal') {
+    result.push(fontStyle);
+  }
+  if (fontWeight && fontWeight !== '400' && fontWeight !== 'normal') {
+    result.push(fontWeight);
+  }
+  if (lineHeight) {
+    result.push(fontSize + '/' + lineHeight);
+  } else {
+    result.push(fontSize);
+  }
+  result.push(fontFamily);
+  return result.join(' ') + importantSuffix;
+}
+
+/**
+ * Builds a `flex` value from its three required components.
+ *
+ * @param  {ShorthandComponents} components  The collected longhand values.
+ * @return {string|null}                     The shorthand value, or null when it cannot be built.
+ */
+function buildFlexValue ({ valueMap, importantSuffix }) {
+  const grow = valueMap.get('flex-grow');
+  const shrink = valueMap.get('flex-shrink');
+  const basis = valueMap.get('flex-basis');
+  if (!grow || !shrink || !basis) {
+    return null;
+  }
+  return [grow, shrink, basis].join(' ') + importantSuffix;
+}
+
+/**
+ * Determines whether a shorthand takes a single width, style, and color, as
+ * `border` and `outline` do.
+ *
+ * @param  {Array}   properties  The longhand property names being merged.
+ * @return {boolean}             Whether the longhands form a width/style/color trio.
+ */
+function isWidthStyleColorTrio (properties) {
+  return (
+    properties.length === 3 &&
+    (properties.includes('border-width') || properties.includes('outline-width')) &&
+    properties.some((property) => {
+      // Check if one longhand ends with "-style" (e.g. border-style, outline-style)
+      return /-style$/.test(property);
+    }) &&
+    properties.some((property) => {
+      // Check if one longhand ends with "-color" (e.g. border-color, outline-color)
+      return /-color$/.test(property);
+    })
+  );
+}
+
+/**
+ * Builds the value of a shorthand whose components are positional: two-value
+ * logical pairs, four-value box sides, and width/style/color trios.
+ *
+ * @param  {ShorthandComponents} components  The collected longhand values.
+ * @return {string|null}                     The shorthand value, or null when it cannot be built.
+ */
+function buildPositionalShorthandValue ({ properties, cleanValues, importantSuffix }) {
+  if (properties.length === 2) {
+    // A logical pair collapses to one value when both sides match
+    if (cleanValues[0] === cleanValues[1]) {
+      return cleanValues[0] + importantSuffix;
+    }
+    return cleanValues.join(' ') + importantSuffix;
+  }
+
+  if (properties.length === 4) {
+    // Box sides collapse from top/right/bottom/left down to as few values as possible
+    return collapseShorthandParts([...cleanValues]).join(' ') + importantSuffix;
+  }
+
+  if (isWidthStyleColorTrio(properties)) {
+    // Every component of a border/outline shorthand accepts a single value, so a
+    // per-edge value such as `border-color:#0000 red` cannot be merged directly.
+    const hasOnlySingleComponentValues = cleanValues.every((value) => {
+      return splitTopLevelComponents(value).length === 1;
+    });
+    if (!hasOnlySingleComponentValues) {
+      return null;
+    }
+    return cleanValues.join(' ') + importantSuffix;
+  }
+
+  return null;
+}
+
+/**
+ * Builders for shorthands whose components are identified by name rather than by
+ * position, keyed by shorthand property name.
+ *
+ * @type {{[key: string]: function(ShorthandComponents): (string|null)}}
+ */
+const NAMED_SHORTHAND_BUILDERS = {
+  animation: buildAnimationValue,
+  background: buildBackgroundValue,
+  'background-position': buildBackgroundPositionValue,
+  'border-image': buildBorderImageValue,
+  columns: buildColumnsValue,
+  flex: buildFlexValue,
+  font: buildFontValue,
+  'list-style': buildListStyleValue,
+  mask: buildMaskValue,
+  'position-try': buildPositionTryValue,
+  'text-decoration': buildTextDecorationValue,
+  transition: buildTransitionValue
+};
+
+/**
+ * Serializes the collected longhand values of a shorthand into its minified
+ * shorthand value, using the builder registered for that shorthand and falling
+ * back to positional assembly for box-model style shorthands.
+ *
+ * @param  {string}              shorthandName  The target shorthand property name.
+ * @param  {ShorthandComponents} components     The collected longhand values.
+ * @return {string|null}                        The shorthand value, or null when it cannot be built.
+ */
+function buildShorthandValue (shorthandName, components) {
+  const namedBuilder = NAMED_SHORTHAND_BUILDERS[shorthandName];
+  if (namedBuilder) {
+    return namedBuilder(components);
+  }
+  return buildPositionalShorthandValue(components);
+}
+
+export { buildShorthandValue };

package/src/rules/normalize.js

@@ -70,7 +70,21 @@ function normalizeMedia (media) {
       return fullMatch;
     }
   );
-  return media;
+  return compactLogicalOperators(media.trim());
+}
+
+/**
+ * Removes the whitespace between a closing parenthesis and a following `and`/`or`
+ * logical operator, which a closing parenthesis already separates unambiguously.
+ * The space after the operator is required, since it separates the operator from
+ * the next condition's opening parenthesis.
+ *
+ * @param  {string} condition  A normalized `@media` or `@supports` condition string.
+ * @return {string}            The condition with tightened logical operator spacing.
+ */
+function compactLogicalOperators (condition) {
+  // Compact logical operator spacing: ") and (" → ")and (", ") or (" → ")or ("
+  return condition.replace(/\)\s*(and|or)\s*\(/gi, ')$1 (');
 }
 
 /**
@@ -83,10 +97,7 @@ function normalizeSupports (supports) {
   // Collapse whitespace and strip spaces around punctuation
   supports = supports.replace(/\s+/g, ' ').replace(/\s*([:,])\s*/g, '$1').replace(/\s*([=<>])\s*/g, '$1').replace(/\(\s+/g, '(').replace(/\s+\)/g, ')').trim();
   supports = supports.replace(/\s+and\s+/g, ' and ').replace(/\s+or\s+/g, ' or ').replace(/\s+not\s+/g, ' not ');
-  // Compact logical operator spacing: ") and (" → ")and ("
-  supports = supports.replace(/\)\s*and\s*\(/g, ')and (');
-  supports = supports.replace(/\)\s*or\s*\(/g, ')or (');
-  return supports;
+  return compactLogicalOperators(supports);
 }
 
 /**

package/src/rules/stringify.js

@@ -121,12 +121,11 @@ function stringifyAtRule (rule, context) {
 /**
  * Converts a parsed CSS AST rule node into a minified CSS string, dispatching to specialized handlers for each rule type including selectors, `@media`, `@keyframes`, `@layer`, and other at-rules.
  *
- * @param  {object}  rule     The AST rule node to stringify.
- * @param  {object}  context  The minification context with registered custom property data.
- * @param  {boolean} nested   Whether this rule is nested inside another rule, affecting spacing.
- * @return {string}           The minified CSS string for this rule, or an empty string if the rule is empty.
+ * @param  {object} rule     The AST rule node to stringify.
+ * @param  {object} context  The minification context with registered custom property data.
+ * @return {string}          The minified CSS string for this rule, or an empty string if the rule is empty.
  */
-function stringifyRule (rule, context, nested = false) {
+function stringifyRule (rule, context) {
   if (rule.type === 'rule') {
     let declarations = rule.declarations
       ?.filter((declaration) => {
@@ -308,7 +307,7 @@ function stringifyRule (rule, context, nested = false) {
       .join(';');
 
     let renderedNested = nestedRules.map((nestedRule) => {
-      return stringifyRule(nestedRule, context, true);
+      return stringifyRule(nestedRule, context);
     }).join('');
 
     output.push(renderedDeclarations);
@@ -323,11 +322,11 @@ function stringifyRule (rule, context, nested = false) {
 
   if (rule.type === 'media') {
     const normalizedMedia = normalizeMedia(rule.media);
-    // A custom-media reference is a parenthesized dashed-ident like (--modern);
-    // no space is needed after @media when the query begins with such a token.
-    const isCustomMediaReference = normalizedMedia.startsWith('(--');
+    // An opening parenthesis unambiguously starts the first media condition
+    // (including custom-media references like `(--modern)`), so the space after
+    // `@media` is only required when the query begins with an identifier.
     let separator;
-    if ((nested && normalizedMedia.startsWith('(')) || isCustomMediaReference) {
+    if (normalizedMedia.startsWith('(')) {
       separator = '';
     } else {
       separator = ' ';
@@ -343,7 +342,7 @@ function stringifyRule (rule, context, nested = false) {
       return [unescapeIdent(declaration.property), ':', minifyValue(declaration)].join('');
     }).join(';');
     const renderedRules = subRules.map((childRule) => {
-      return stringifyRule(childRule, context, false);
+      return stringifyRule(childRule, context);
     }).join('');
     const children = [renderedDeclarations, renderedRules].filter(Boolean).join('');
     if (!children) {

package/src/value/minify.js

@@ -59,7 +59,9 @@ const POSITION_AREA_SHORTHANDS = {
  * Regex matching hex color tokens (#rgb, #rgba, #rrggbb, #rrggbbaa) and CSS named
  * color keywords. Hex patterns are ordered longest-first to avoid partial matches.
  * Named colors are sorted longest-first so longer names like `darkslategray` are
- * matched before shorter substrings.
+ * matched before shorter substrings. A named color only counts as a color keyword
+ * when it is a complete identifier, so hyphens on either side disqualify it (this
+ * keeps identifiers such as the custom property name in `var(--grey)` intact).
  *
  * @type {RegExp}
  */
@@ -68,11 +70,11 @@ const COLOR_TOKEN_PATTERN = new RegExp(
   '#[0-9a-fA-F]{6}(?![0-9a-fA-F])|' +
   '#[0-9a-fA-F]{4}(?![0-9a-fA-F])|' +
   '#[0-9a-fA-F]{3}(?![0-9a-fA-F])|' +
-  '\\b(?:' +
+  '(?<![\\w-])(?:' +
   Object.keys(namedColors).sort((a, b) => {
     return b.length - a.length;
   }).join('|') +
-  ')\\b',
+  ')(?![\\w-])',
   'gi'
 );
 
@@ -180,6 +182,37 @@ function replaceOutsideStringsAndUrls (value, replacer) {
   return result;
 }
 
+/**
+ * Lowercases every hex color token in a CSS value, since uppercase hex digits
+ * compress worse and are equivalent to their lowercase form.
+ *
+ * @param  {string} value  The CSS value string.
+ * @return {string}        The value with all hex color tokens lowercased.
+ */
+function lowercaseHexColors (value) {
+  return replaceOutsideStringsAndUrls(value, (segment) => {
+    // Match hex color tokens of 3 to 8 hex digits
+    return segment.replace(/#([0-9a-fA-F]{3,8})\b/gi, (hexColor) => {
+      return hexColor.toLowerCase();
+    });
+  });
+}
+
+/**
+ * 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');
+  });
+}
+
 /**
  * Chooses the shortest valid representation for the path inside a `url(...)`
  * token, weighing an unquoted form, an escaped single space, and a quoted form.
@@ -682,11 +715,12 @@ function convertMillisecondsToSeconds (value) {
  * Applies property-specific optimizations to a CSS value (transition, flex, font,
  * background, display, scale, border-radius, shorthand collapsing, etc.).
  *
- * @param  {string} val       The CSS value string after generic minification.
- * @param  {string} property  The CSS property name.
- * @return {string}           The value with property-specific optimizations applied.
+ * @param  {string}  val                    The CSS value string after generic minification.
+ * @param  {string}  property               The CSS property name.
+ * @param  {boolean} allowsHexSpaceElision  Whether the space preceding a hex color may be removed.
+ * @return {string}                         The value with property-specific optimizations applied.
  */
-function applyPropertyOptimizations (val, property) {
+function applyPropertyOptimizations (val, property, allowsHexSpaceElision) {
   if (property === 'font-weight' && isUnicodeCharset()) {
     // Replace font-weight keyword "bold" with its numeric equivalent
     val = val.replace(/\bbold\b/gi, '700');
@@ -859,12 +893,9 @@ function applyPropertyOptimizations (val, property) {
   val = replaceOutsideStringsAndUrls(val, shortenColorValues);
 
   // Remove space before hex colors (second pass after color evaluations)
-  val = replaceOutsideStringsAndUrls(val, (segment) => {
-    // Preserve space after border style keywords (solid, dashed, etc.) before hex colors
-    segment = segment.replace(/\b(solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|none)\s+#([0-9a-fA-F]{3,8})\b/gi, '$1 #$2');
-    // Then remove other spaces before hex colors
-    return segment.replace(/\s+#([0-9a-fA-F]{3,8})\b/gi, '#$1');
-  });
+  if (allowsHexSpaceElision) {
+    val = elideSpaceBeforeHexColors(val);
+  }
   if (property !== 'transform' && property !== 'background' && property !== 'src') {
     // Restore space after close-paren when followed by an alphanumeric, hash, or hyphen
     val = val.replace(/\)(?=[0-9a-zA-Z#-])/g, ') ');
@@ -911,9 +942,6 @@ function applyPropertyOptimizations (val, property) {
   if (property === 'border') {
     // Remove default "medium" border-width keyword
     val = val.replace(/\bmedium\s+/g, '');
-    // Restore missing space between border-style and a 4-digit hex color (with alpha) when they are adjacent
-    // This is needed because solid#0000 could be parsed as solid followed by #000 followed by position 0
-    val = val.replace(/\b(solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|none)#([0-9a-fA-F]{4})\b/gi, '$1 #$2');
   }
 
   if (property === 'outline') {
@@ -982,6 +1010,10 @@ function minifyValue (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 allowsHexSpaceElision = !declaration.isAssembledShorthand;
 
   if (typeof val === 'string') {
     val = val.trim();
@@ -1024,20 +1056,10 @@ function minifyValue (declaration) {
       val = roundCompactNumber(rawNumber, 4) + rawUnit;
     }
 
-    // Remove space before hex colors
-    val = replaceOutsideStringsAndUrls(val, (segment) => {
-      // Preserve space after border style keywords by using a temporary placeholder
-      segment = segment.replace(/\b(solid|dashed|dotted|double|groove|ridge|inset|outset|hidden|none)\s+#([0-9a-fA-F]{3,8})\b/gi, '$1__BORDER_SPACE__#$2');
-      // Remove other spaces before hex colors
-      segment = segment.replace(/\s+#([0-9a-fA-F]{3,8})\b/gi, '#$1');
-      // Restore the preserved space
-      segment = segment.replace(/__BORDER_SPACE__#/g, ' #');
-      // Lowercase hex color tokens for consistency and shorter output
-      segment = segment.replace(/#([0-9a-fA-F]{3,8})\b/gi, (m) => {
-        return m.toLowerCase();
-      });
-      return segment;
-    });
+    val = lowercaseHexColors(val);
+    if (allowsHexSpaceElision) {
+      val = elideSpaceBeforeHexColors(val);
+    }
 
     // Convert color functions to hex equivalents
     val = convertColorsToHex(val);
@@ -1049,7 +1071,7 @@ function minifyValue (declaration) {
     val = simplifyEquivalentLightDarkFunctions(val);
 
     // Property-specific optimizations
-    val = applyPropertyOptimizations(val, declaration.property);
+    val = applyPropertyOptimizations(val, declaration.property, allowsHexSpaceElision);
 
     // Minify relative color syntax (identity resolution and whitespace collapsing)
     val = minifyRelativeColorSyntax(val);