@thejaredwilcurt/csslop 0.0.49 → 0.0.51

package/src/value/color/shorten.js

@@ -0,0 +1,93 @@
+/**
+ * @file Rewrites hex colors and named color keywords in their shortest equivalent spelling.
+ */
+
+import { replaceOutsideStringsAndUrls } from '../segments.js';
+
+import {
+  parseHex,
+  shortestColor
+} from './conversion.js';
+import { namedColors } from './named.js';
+
+/**
+ * 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. 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}
+ */
+const COLOR_TOKEN_PATTERN = new RegExp(
+  '#[0-9a-fA-F]{8}(?![0-9a-fA-F])|' +
+  '#[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])|' +
+  '(?<![\\w-])(?:' +
+  Object.keys(namedColors).sort((first, second) => {
+    return second.length - first.length;
+  }).join('|') +
+  ')(?![\\w-])',
+  'gi'
+);
+
+/**
+ * Replaces every hex color and named color keyword in a CSS value segment with
+ * the shortest equivalent representation, comparing full hex, shortened hex,
+ * and any matching named color keyword.
+ *
+ * @param  {string}  segment                      A CSS value segment (outside strings and urls).
+ * @param  {boolean} rewritesEqualLengthSpelling  Whether a spelling of the same length is worth switching to.
+ * @return {string}                               The segment with all colors shortened to their minimal form.
+ */
+function shortenColorValues (segment, rewritesEqualLengthSpelling = true) {
+  // Match "color-mix(" as a whole word, case-insensitive
+  const hasColorMix = /\bcolor-mix\(/i.test(segment);
+  return segment.replace(COLOR_TOKEN_PATTERN, (match) => {
+    let channels;
+    if (match.startsWith('#')) {
+      channels = parseHex(match);
+    } else {
+      if (hasColorMix) {
+        return match;
+      }
+      const rgb = namedColors[match.toLowerCase()];
+      if (rgb) {
+        // transparent has alpha=0, all other named colors have alpha=1
+        const alpha = match.toLowerCase() === 'transparent' ? 0 : 1;
+        channels = [rgb[0], rgb[1], rgb[2], alpha];
+      }
+    }
+    if (!channels) {
+      return match;
+    }
+    const shortest = shortestColor(channels[0], channels[1], channels[2], channels[3]);
+    if (!rewritesEqualLengthSpelling && shortest.length >= match.length) {
+      return match;
+    }
+    return shortest;
+  });
+}
+
+/**
+ * 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();
+    });
+  });
+}
+
+export {
+  lowercaseHexColors,
+  shortenColorValues
+};

package/src/value/gradients.js

@@ -10,7 +10,7 @@ import {
 import {
   parseHex,
   shortestColor
-} from './colors.js';
+} from './color/conversion.js';
 
 /**
  * Checks whether a string is a valid gradient stop position consisting of one

package/src/value/hyphenate-limit-chars.js

@@ -0,0 +1,72 @@
+/**
+ * @file Collapses `hyphenate-limit-chars` values to their shortest equivalent form.
+ */
+
+import { hasSubstitutedParts } from './shared.js';
+
+/**
+ * Matches a trailing `!important` flag, so the components in front of it can be
+ * rewritten without the flag being mistaken for part of the last one.
+ *
+ * @type {RegExp}
+ */
+const IMPORTANT_SUFFIX_PATTERN = /!important$/i;
+
+/**
+ * Separates a value from the `!important` flag it may end with.
+ *
+ * @param  {string} value  The declaration value, possibly flagged important.
+ * @return {object}        The components in front of the flag, and the flag itself or an empty string.
+ */
+function splitImportantSuffix (value) {
+  const match = value.match(IMPORTANT_SUFFIX_PATTERN);
+  if (!match) {
+    return { components: value, importantSuffix: '' };
+  }
+  return {
+    components: value.slice(0, match.index).trim(),
+    importantSuffix: match[0]
+  };
+}
+
+/**
+ * Collapses a `hyphenate-limit-chars` value to its shortest equivalent form.
+ * The property states up to three components: the shortest word that may be
+ * hyphenated, then the fewest characters allowed before a hyphen, then the
+ * fewest allowed after it. An unstated "before" component is read as `auto`,
+ * and an unstated "after" component repeats whatever "before" holds, so a
+ * trailing component that only restates the default it stands in for is
+ * redundant.
+ *
+ * @param  {string} value  The `hyphenate-limit-chars` value.
+ * @return {string}        The value with its redundant trailing components dropped.
+ */
+function collapseHyphenateLimitChars (value) {
+  const {
+    components,
+    importantSuffix
+  } = splitImportantSuffix(value);
+  const parts = components.split(' ').filter(Boolean);
+  if (hasSubstitutedParts(parts)) {
+    return value;
+  }
+  const isAfterMatchingBefore = (
+    parts.length === 3 &&
+    parts[2].toLowerCase() === parts[1].toLowerCase()
+  );
+  if (isAfterMatchingBefore) {
+    parts.pop();
+  }
+  const isBeforeLeftAtDefault = (
+    parts.length === 2 &&
+    parts[1].toLowerCase() === 'auto'
+  );
+  if (isBeforeLeftAtDefault) {
+    parts.pop();
+  }
+  return parts.join(' ') + importantSuffix;
+}
+
+export {
+  collapseHyphenateLimitChars
+};

package/src/value/initial-keywords.js

@@ -0,0 +1,128 @@
+/**
+ * @file Rewrites a property's `initial` keyword into the shorter value it stands for, and a lengthy initial value into the shorter `initial` keyword.
+ */
+
+/**
+ * Properties whose `initial` value is a number the browser resolves, so the
+ * keyword only ever shortens for the two that have a shorter written form.
+ *
+ * @type {Set<string>}
+ */
+const NUMERIC_INITIAL_PROPERTIES = new Set([
+  'opacity',
+  'z-index',
+  'flex-grow',
+  'flex-shrink',
+  'order',
+  'line-height',
+  'zoom'
+]);
+
+/**
+ * Properties whose `initial` value is zero.
+ *
+ * @type {Set<string>}
+ */
+const ZERO_INITIAL_PROPERTIES = new Set(['margin', 'padding']);
+
+/**
+ * Properties whose `initial` value is `auto`.
+ *
+ * @type {Set<string>}
+ */
+const AUTO_INITIAL_PROPERTIES = new Set([
+  'min-width',
+  'min-height',
+  'hyphenate-limit-chars'
+]);
+
+/**
+ * Properties whose initial value is a single keyword longer than the global
+ * `initial` keyword itself. These replacements are applied when serializing
+ * declarations, because shorthand builders reconstruct their value from the
+ * actual longhand keywords, and a CSS-wide keyword such as `initial` is only
+ * valid as a declaration's entire value.
+ *
+ * @type {Map<string, string>}
+ */
+const LENGTHY_INITIAL_KEYWORDS = new Map([
+  ['background-clip', 'border-box'],
+  ['background-origin', 'padding-box'],
+  ['border-collapse', 'separate'],
+  ['border-color', 'currentcolor'],
+  ['border-top-color', 'currentcolor'],
+  ['border-right-color', 'currentcolor'],
+  ['border-bottom-color', 'currentcolor'],
+  ['border-left-color', 'currentcolor'],
+  ['box-sizing', 'content-box'],
+  ['mask-clip', 'border-box'],
+  ['mask-origin', 'border-box'],
+  ['vertical-align', 'baseline'],
+  ['writing-mode', 'horizontal-tb']
+]);
+
+/**
+ * Resolves a property's `initial` keyword into the value it stands for, for the
+ * properties where that value is shorter to write than the keyword.
+ *
+ * @param  {string} value     The CSS value string after generic minification.
+ * @param  {string} property  The CSS property name.
+ * @return {string}           The value with its `initial` keyword resolved where that is shorter.
+ */
+function resolveInitialKeyword (value, property) {
+  if (value !== 'initial') {
+    return value;
+  }
+  if (NUMERIC_INITIAL_PROPERTIES.has(property)) {
+    // Just leaving them or mapping some: opacity: initial -> opacity: 1
+    if (property === 'opacity') {
+      return '1';
+    }
+    if (property === 'z-index') {
+      return 'auto';
+    }
+  }
+  if (ZERO_INITIAL_PROPERTIES.has(property)) {
+    return '0';
+  }
+  if (AUTO_INITIAL_PROPERTIES.has(property)) {
+    return 'auto';
+  }
+  // background-color: initial should become #0000 (transparent)
+  if (property === 'background-color') {
+    return '#0000';
+  }
+  return value;
+}
+
+/**
+ * Rewrites a value that spells its property's initial value with a keyword
+ * longer than the global `initial` keyword. Both are equivalent, but `initial`
+ * is shorter than these particular keywords and, being repeated across
+ * properties, gives gzip more opportunities to deduplicate it.
+ *
+ * @param  {string} value     The minified declaration value, possibly flagged important.
+ * @param  {string} property  The CSS property name.
+ * @return {string}           The value with its initial keyword shortened to `initial` when that saves bytes.
+ */
+function shortenLengthyInitialKeyword (value, property) {
+  // A keyword spelling the property's own initial value is shorter as the
+  // global keyword (box-sizing: content-box -> box-sizing: initial)
+  const initialKeyword = LENGTHY_INITIAL_KEYWORDS.get(property?.toLowerCase());
+  if (!initialKeyword || 'initial'.length >= initialKeyword.length) {
+    return value;
+  }
+  // A trailing `!important` rides along inside the value, so the keyword
+  // comparison and the rewrite only concern what sits in front of it.
+  const isImportant = value.endsWith('!important');
+  const keyword = isImportant ? value.slice(0, value.length - '!important'.length) : value;
+  if (keyword.toLowerCase() !== initialKeyword) {
+    return value;
+  }
+  return 'initial' + (isImportant ? '!important' : '');
+}
+
+export {
+  resolveInitialKeyword,
+  shortenLengthyInitialKeyword
+};

package/src/value/lengths.js

@@ -0,0 +1,55 @@
+/**
+ * @file Converts absolute CSS lengths to the pixels they measure whenever the conversion is exact and no longer.
+ */
+
+import {
+  convertAbsoluteLengthToPx,
+  roundCompactNumber
+} from './shared.js';
+
+/**
+ * Matches an absolute CSS length token: an optionally signed number followed by
+ * an absolute length unit. The lookbehind rejects digits that belong to a larger
+ * identifier, such as the custom property name in `var(--size-2in)`, where the
+ * digits and unit do not form a value of their own.
+ *
+ * @type {RegExp}
+ */
+const ABSOLUTE_LENGTH_PATTERN = /(?<![\w#.%-])(-?(?:\d+|\d*\.\d+))(pt|pc|in|cm|mm|q)\b/gi;
+
+/**
+ * The largest difference in pixels that a rounded conversion may introduce and
+ * still count as exact, which allows for binary floating point error without
+ * allowing a visible change to the rendered length.
+ *
+ * @type {number}
+ */
+const PIXEL_ROUNDING_TOLERANCE = 1e-6;
+
+/**
+ * Converts absolute length values (pt, pc, in, cm, mm, Q) to their pixel
+ * equivalent when the conversion is exact and the pixel form is no longer than
+ * the original. Normalizing to px also improves compression by reducing the
+ * number of distinct unit strings in the output.
+ *
+ * @param  {string} value  A CSS value segment, outside strings and urls.
+ * @return {string}        The segment with eligible absolute lengths converted to px.
+ */
+function convertAbsoluteLengthsToPx (value) {
+  return value.replace(ABSOLUTE_LENGTH_PATTERN, (token, amount, unit) => {
+    const pixels = convertAbsoluteLengthToPx(amount, unit);
+    if (pixels === null) {
+      return token;
+    }
+    const converted = roundCompactNumber(pixels) + 'px';
+    const isExact = Math.abs(parseFloat(converted) - pixels) < PIXEL_ROUNDING_TOLERANCE;
+    if (!isExact || converted.length > token.length) {
+      return token;
+    }
+    return converted;
+  });
+}
+
+export {
+  convertAbsoluteLengthsToPx
+};

package/src/value/math/evaluate.js

@@ -0,0 +1,36 @@
+/**
+ * @file Reads the arithmetic a CSS math function states and resolves it into the value it works out to, whenever every operand of it is a number already known at minification time.
+ */
+
+import { formatUnitTotals } from './format.js';
+import { parseSum } from './parser.js';
+import { tokenizeMathExpression } from './tokenizer.js';
+
+/**
+ * Resolves a CSS math function into the value its arithmetic works out to.
+ * A function whose operands are not all known at minification time — one
+ * referencing a custom property, an environment variable, or an element the
+ * value is only resolved against once the page is laid out — states a value
+ * that cannot be worked out here, and so resolves to nothing.
+ *
+ * @param  {string}      mathFunction  The math function as it is written, such as `calc(10 / 2)` or `min(10px, 20px)`.
+ * @return {string|null}               The value the math function states, or null when it cannot be resolved.
+ */
+function simplifyCalc (mathFunction) {
+  const tokens = tokenizeMathExpression(mathFunction);
+  if (!tokens) {
+    return null;
+  }
+  const reader = { tokens, index: 0, depth: 0 };
+  const totals = parseSum(reader);
+  // A token left unread means the expression states more than the arithmetic
+  // that was resolved, so what was resolved is not the whole of its value
+  if (!totals || reader.index !== tokens.length) {
+    return null;
+  }
+  return formatUnitTotals(totals);
+}
+
+export {
+  simplifyCalc
+};