@thejaredwilcurt/csslop 0.0.43 → 0.0.45

package/src/rules/validate.js

@@ -0,0 +1,145 @@
+/**
+ * @file Rejects malformed selector syntax before rules can be merged.
+ */
+
+import {
+  findMatchingBracket,
+  findMatchingParenthesis,
+  splitTopLevelCommaList
+} from '../parser/source-search.js';
+import { tokenizeCssValue } from '../parser/tokenizer.js';
+
+/**
+ * Reads an attribute name, optional matcher, value, and case flag.
+ *
+ * @param  {string}  attribute  The contents of the brackets.
+ * @return {boolean}            Whether the attribute has a valid token sequence.
+ */
+function isValidAttribute (attribute) {
+  const tokens = tokenizeCssValue(attribute).filter((token) => {
+    return token.type !== 'whitespace';
+  });
+  let index = 0;
+  if ((tokens[0]?.type === 'ident' || tokens[0]?.text === '*') && tokens[1]?.text === '|') {
+    index = 2;
+  } else if (tokens[0]?.text === '|') {
+    index = 1;
+  }
+  if (tokens[index]?.type !== 'ident') {
+    return false;
+  }
+  index++;
+  if (index === tokens.length) {
+    return true;
+  }
+  if (['~', '|', '^', '$', '*'].includes(tokens[index]?.text)) {
+    index++;
+  }
+  if (tokens[index]?.text !== '=') {
+    return false;
+  }
+  index++;
+  if (tokens[index]?.type !== 'ident' && tokens[index]?.type !== 'string') {
+    return false;
+  }
+  index++;
+  if (tokens[index]?.type === 'ident' && ['i', 's'].includes(tokens[index].text.toLowerCase())) {
+    index++;
+  }
+  return index === tokens.length;
+}
+
+/**
+ * Checks that each language range is a single identifier or quoted string.
+ *
+ * @param  {string}  argumentsText  The language function's contents.
+ * @return {boolean}                Whether every argument has valid syntax.
+ */
+function isValidLanguageList (argumentsText) {
+  const argumentsList = splitTopLevelCommaList(argumentsText);
+  return argumentsList.length > 0 && argumentsList.every((argument) => {
+    const tokens = tokenizeCssValue(argument.trim());
+    return tokens.length === 1 && (tokens[0].type === 'ident' || tokens[0].type === 'string');
+  });
+}
+
+/**
+ * Detects invalid tokens without interpreting data inside strings, escapes,
+ * or forgiving selector lists as syntax of the surrounding selector.
+ *
+ * @param  {string}  selector  A single selector.
+ * @return {boolean}           Whether its checked syntax is valid.
+ */
+function isValidSelector (selector) {
+  const tokens = tokenizeCssValue(selector);
+  let offset = 0;
+  for (let index = 0; index < tokens.length; index++) {
+    const token = tokens[index];
+    if (token.text === '[' || token.type === 'function') {
+      const isAttribute = token.text === '[';
+      const openingIndex = isAttribute ? offset : offset + token.text.length - 1;
+      const closingIndex = isAttribute ?
+        findMatchingBracket(selector, openingIndex) :
+        findMatchingParenthesis(selector, openingIndex);
+      if (closingIndex === -1) {
+        return false;
+      }
+      const inner = selector.slice(openingIndex + 1, closingIndex);
+      const functionName = token.text.slice(0, -1).toLowerCase();
+      if (isAttribute && !isValidAttribute(inner)) {
+        return false;
+      }
+      if (functionName === 'lang' && !isValidLanguageList(inner)) {
+        return false;
+      }
+      if (functionName === 'not' || functionName === 'has') {
+        if (!splitTopLevelCommaList(inner).every(isValidSelector)) {
+          return false;
+        }
+      }
+      while (offset < closingIndex) {
+        offset += tokens[index].text.length;
+        index++;
+      }
+      offset += tokens[index].text.length;
+      continue;
+    }
+    if (token.text === '|' && tokens[index + 1]?.text === '|') {
+      return false;
+    }
+    if (token.text === ':') {
+      let followingIndex = index + 1;
+      if (tokens[followingIndex]?.text === ':') {
+        followingIndex++;
+      }
+      const following = tokens[followingIndex];
+      if (following?.type !== 'ident' && following?.type !== 'function') {
+        return false;
+      }
+    }
+    offset += token.text.length;
+  }
+  return true;
+}
+
+/**
+ * Removes an entire unforgiving selector list if any branch is malformed.
+ *
+ * @param  {Array} rules  Stylesheet or nested body entries.
+ * @return {Array}        Entries that cannot poison a valid rule during merging.
+ */
+function removeInvalidSelectorRules (rules) {
+  return rules.filter((rule) => {
+    return !rule.selectors || rule.selectors.every(isValidSelector);
+  }).map((rule) => {
+    if (rule.rules) {
+      rule.rules = removeInvalidSelectorRules(rule.rules);
+    }
+    if (rule.declarations) {
+      rule.declarations = removeInvalidSelectorRules(rule.declarations);
+    }
+    return rule;
+  });
+}
+
+export { removeInvalidSelectorRules };

package/src/value/color-mix.js

@@ -57,31 +57,104 @@ function formatOklch (L, C, H, alpha) {
 }
 
 /**
- * Detect which channel indices have 'none' in a raw color function string.
+ * Splits the simple, non-nested components of a static color function.
  *
- * @param  {string} rawColorStr  The raw CSS color function string (e.g. "rgb(none 0 0)").
- * @return {Array}               An array of zero-based channel indices where 'none' was found.
+ * @param  {string} argumentText  The text inside a color function's parentheses.
+ * @return {Array}                The whitespace, comma, and slash-delimited components.
  */
-function findNoneChannels (rawColorStr) {
+function splitSimpleColorComponents (argumentText) {
+  // Split CSS color components at whitespace, commas, or the alpha slash.
+  return argumentText.trim().split(/[\s,/]+/).filter((part) => {
+    return part.length > 0;
+  });
+}
+
+/**
+ * Collects the zero-based positions of missing color components.
+ *
+ * @param  {Array}  components  The parsed color components.
+ * @param  {number} startIndex  The component index represented by the first item.
+ * @return {Array}              The channel indices whose value is `none`.
+ */
+function collectNoneChannelIndices (components, startIndex) {
   const indices = [];
-  // Match rgb/rgba/hsl/hsla/hwb function calls and extract their arguments
-  const functionMatch = rawColorStr.match(/\b(?:rgba?|hsla?|hwb)\(([^)]*)\)/i);
-  if (functionMatch) {
-    // Split arguments on whitespace, commas, or slash separators
-    const parts = functionMatch[1].trim().split(/[\s,/]+/).map((part) => {
-      return part.trim();
-    }).filter((part) => {
-      return part.length > 0;
-    });
-    parts.forEach((part, index) => {
-      if (part.toLowerCase() === 'none') {
-        indices.push(index);
-      }
-    });
+  for (let index = 0; index < components.length; index++) {
+    if (components[index].toLowerCase() === 'none') {
+      indices.push(startIndex + index);
+    }
   }
   return indices;
 }
 
+/**
+ * Finds the first CSS whitespace character in a string.
+ *
+ * @param  {string} text  The text to inspect.
+ * @return {number}       The first whitespace index, or -1 when there is none.
+ */
+function findFirstWhitespaceIndex (text) {
+  for (let index = 0; index < text.length; index++) {
+    if (' \t\n\r\f'.includes(text[index])) {
+      return index;
+    }
+  }
+  return -1;
+}
+
+/**
+ * Detect which channel indices have `none` in a raw static color function.
+ *
+ * @param  {string} rawColorString  The raw CSS color function string.
+ * @return {Array}                  An array of zero-based channel indices where `none` was found.
+ */
+function findNoneChannels (rawColorString) {
+  const openParenthesisIndex = rawColorString.indexOf('(');
+  const closeParenthesisIndex = rawColorString.lastIndexOf(')');
+  if (openParenthesisIndex === -1 || closeParenthesisIndex <= openParenthesisIndex) {
+    return [];
+  }
+
+  const functionName = rawColorString.slice(0, openParenthesisIndex).trim().toLowerCase();
+  const argumentText = rawColorString.slice(openParenthesisIndex + 1, closeParenthesisIndex).trim();
+  if (['rgb', 'rgba', 'hsl', 'hsla', 'hwb'].includes(functionName)) {
+    return collectNoneChannelIndices(splitSimpleColorComponents(argumentText), 0);
+  }
+
+  if (functionName !== 'color') {
+    return [];
+  }
+
+  const firstComponentEnd = findFirstWhitespaceIndex(argumentText);
+  if (firstComponentEnd === -1 || argumentText.slice(0, firstComponentEnd).toLowerCase() !== 'srgb') {
+    return [];
+  }
+  const channelText = argumentText.slice(firstComponentEnd).trim();
+  return collectNoneChannelIndices(splitSimpleColorComponents(channelText), 0);
+}
+
+/**
+ * Fills missing interpolation components from the matching component in the
+ * other color before either color is premultiplied by alpha.
+ *
+ * @param  {object} firstColor   The first parsed color-mix argument.
+ * @param  {object} secondColor  The second parsed color-mix argument.
+ * @return {void}
+ */
+function fillMissingColorChannels (firstColor, secondColor) {
+  const firstMissingChannels = findNoneChannels(firstColor.raw);
+  const secondMissingChannels = findNoneChannels(secondColor.raw);
+  for (const channelIndex of firstMissingChannels) {
+    if (channelIndex < firstColor.color.length) {
+      firstColor.color[channelIndex] = secondColor.color[channelIndex];
+    }
+  }
+  for (const channelIndex of secondMissingChannels) {
+    if (channelIndex < secondColor.color.length) {
+      secondColor.color[channelIndex] = firstColor.color[channelIndex];
+    }
+  }
+}
+
 /**
  * Evaluate an N-color (3+) color-mix() expression. Returns a minified CSS color string or null.
  *
@@ -208,17 +281,26 @@ function normalizeUnresolvableNColorMix (colorSpace, parsedArgs) {
  * @return {string}                  A hex color string.
  */
 function mixNColorsSrgb (colors, weights, alphaMultiplier) {
-  let r = 0;
-  let g = 0;
-  let b = 0;
-  let alpha = 0;
+  let premultipliedRed = 0;
+  let premultipliedGreen = 0;
+  let premultipliedBlue = 0;
+  let interpolatedAlpha = 0;
   for (let i = 0; i < colors.length; i++) {
-    r += colors[i][0] * weights[i];
-    g += colors[i][1] * weights[i];
-    b += colors[i][2] * weights[i];
-    alpha += colors[i][3] * weights[i];
+    const weightedAlpha = colors[i][3] * weights[i];
+    premultipliedRed += colors[i][0] * weightedAlpha;
+    premultipliedGreen += colors[i][1] * weightedAlpha;
+    premultipliedBlue += colors[i][2] * weightedAlpha;
+    interpolatedAlpha += weightedAlpha;
   }
-  return rgbaToHex(Math.round(r), Math.round(g), Math.round(b), alpha * alphaMultiplier);
+  if (interpolatedAlpha === 0) {
+    return rgbaToHex(0, 0, 0, 0);
+  }
+  return rgbaToHex(
+    Math.round(premultipliedRed / interpolatedAlpha),
+    Math.round(premultipliedGreen / interpolatedAlpha),
+    Math.round(premultipliedBlue / interpolatedAlpha),
+    interpolatedAlpha * alphaMultiplier
+  );
 }
 
 /**
@@ -236,16 +318,28 @@ function mixNColorsOklab (colors, weights, alphaMultiplier) {
   let L = 0;
   let a = 0;
   let b = 0;
-  let alpha = 0;
+  let interpolatedAlpha = 0;
   for (let i = 0; i < oklabValues.length; i++) {
-    L += oklabValues[i].L * weights[i];
-    a += oklabValues[i].a * weights[i];
-    b += oklabValues[i].b * weights[i];
-    alpha += colors[i][3] * weights[i];
-  }
-  alpha *= alphaMultiplier;
-  const rgb = oklabToRgb(L, a, b);
-  return rgbaToHex(rgb[0], rgb[1], rgb[2], alpha >= 1 ? 1 : alpha);
+    const weightedAlpha = colors[i][3] * weights[i];
+    L += oklabValues[i].L * weightedAlpha;
+    a += oklabValues[i].a * weightedAlpha;
+    b += oklabValues[i].b * weightedAlpha;
+    interpolatedAlpha += weightedAlpha;
+  }
+  if (interpolatedAlpha === 0) {
+    return rgbaToHex(0, 0, 0, 0);
+  }
+  const rgb = oklabToRgb(
+    L / interpolatedAlpha,
+    a / interpolatedAlpha,
+    b / interpolatedAlpha
+  );
+  return rgbaToHex(
+    rgb[0],
+    rgb[1],
+    rgb[2],
+    interpolatedAlpha * alphaMultiplier
+  );
 }
 
 /**
@@ -329,19 +423,7 @@ function evaluateColorMix (expr) {
     return rgbaToHex(parsed1.color[0], parsed1.color[1], parsed1.color[2], parsed1.color[3]);
   }
 
-  // CSS spec: 'none' channels are missing — fill from the other color before mixing
-  const nones1 = findNoneChannels(parsed1.raw);
-  const nones2 = findNoneChannels(parsed2.raw);
-  for (const idx of nones1) {
-    if (idx < parsed1.color.length) {
-      parsed1.color[idx] = parsed2.color[idx];
-    }
-  }
-  for (const idx of nones2) {
-    if (idx < parsed2.color.length) {
-      parsed2.color[idx] = parsed1.color[idx];
-    }
-  }
+  fillMissingColorChannels(parsed1, parsed2);
 
   const t1 = p1 / (p1 + p2);
   const t2 = p2 / (p1 + p2);
@@ -349,37 +431,44 @@ function evaluateColorMix (expr) {
   const [r2, g2, b2, a2] = parsed2.color;
 
   if (colorSpace === 'srgb') {
-    const r = Math.round(r1 * t1 + r2 * t2);
-    const g = Math.round(g1 * t1 + g2 * t2);
-    const b = Math.round(b1 * t1 + b2 * t2);
-    const a = (a1 * t1 + a2 * t2) * alphaMultiplier;
-    return rgbaToHex(r, g, b, a);
+    return mixNColorsSrgb(
+      [parsed1.color, parsed2.color],
+      [t1, t2],
+      alphaMultiplier
+    );
   }
 
   if (colorSpace === 'oklab') {
     const lab1 = rgbToOklab(r1, g1, b1);
     const lab2 = rgbToOklab(r2, g2, b2);
-    const L = lab1.L * t1 + lab2.L * t2;
-    const a = lab1.a * t1 + lab2.a * t2;
-    const b = lab1.b * t1 + lab2.b * t2;
-    const alpha = (a1 * t1 + a2 * t2) * alphaMultiplier;
-    // Check if result fits in sRGB gamut
-    const rgb = oklabToRgb(L, a, b);
-    if (alpha >= 1) {
-      return rgbaToHex(rgb[0], rgb[1], rgb[2], 1);
+    const firstWeightedAlpha = a1 * t1;
+    const secondWeightedAlpha = a2 * t2;
+    const interpolatedAlpha = firstWeightedAlpha + secondWeightedAlpha;
+    if (interpolatedAlpha === 0) {
+      return rgbaToHex(0, 0, 0, 0);
     }
-    return rgbaToHex(rgb[0], rgb[1], rgb[2], alpha);
+    const L = (lab1.L * firstWeightedAlpha + lab2.L * secondWeightedAlpha) / interpolatedAlpha;
+    const a = (lab1.a * firstWeightedAlpha + lab2.a * secondWeightedAlpha) / interpolatedAlpha;
+    const b = (lab1.b * firstWeightedAlpha + lab2.b * secondWeightedAlpha) / interpolatedAlpha;
+    const rgb = oklabToRgb(L, a, b);
+    return rgbaToHex(rgb[0], rgb[1], rgb[2], interpolatedAlpha * alphaMultiplier);
   }
 
   if (colorSpace === 'oklch') {
     const lch1 = rgbToOklch(r1, g1, b1);
     const lch2 = rgbToOklch(r2, g2, b2);
-    const L = lch1.L * t1 + lch2.L * t2;
-    const C = lch1.C * t1 + lch2.C * t2;
-    const H = interpolateHueShorter(lch1.H, lch2.H, t2);
-    const alpha = (a1 * t1 + a2 * t2) * alphaMultiplier;
+    const firstWeightedAlpha = a1 * t1;
+    const secondWeightedAlpha = a2 * t2;
+    const interpolatedAlpha = firstWeightedAlpha + secondWeightedAlpha;
+    if (interpolatedAlpha === 0) {
+      return rgbaToHex(0, 0, 0, 0);
+    }
+    const L = (lch1.L * firstWeightedAlpha + lch2.L * secondWeightedAlpha) / interpolatedAlpha;
+    const C = (lch1.C * firstWeightedAlpha + lch2.C * secondWeightedAlpha) / interpolatedAlpha;
+    const H = interpolateHueShorter(lch1.H, lch2.H, secondWeightedAlpha / interpolatedAlpha);
+    const alpha = interpolatedAlpha * alphaMultiplier;
     // In-gamut results have an exact sRGB equivalent, which is always shorter than oklch()
-    const hex = convertOklchToHex(L, C, H, alpha >= 1 ? 1 : alpha);
+    const hex = convertOklchToHex(L, C, H, alpha);
     if (hex) {
       return hex;
     }

package/src/value/colors.js

@@ -302,6 +302,29 @@ function parseHex (hex) {
   return null;
 }
 
+/**
+ * Matches a static `color(srgb ...)` function. The three color components may
+ * be unit-interval numbers or percentages, followed by an optional alpha.
+ *
+ * @type {RegExp}
+ */
+const SRGB_COLOR_FUNCTION_PATTERN = /^color\(\s*srgb\s+(-?[\d.]+%?)\s+(-?[\d.]+%?)\s+(-?[\d.]+%?)(?:\s*\/\s*(-?[\d.]+%?))?\s*\)$/;
+
+/**
+ * Converts one `color(srgb ...)` component to the 0-255 range.
+ *
+ * @param  {string}      component  A unit-interval number or percentage.
+ * @return {number|null}            The channel value, or null when invalid.
+ */
+function parseSrgbColorComponent (component) {
+  const numericValue = parseFloat(component);
+  if (!Number.isFinite(numericValue)) {
+    return null;
+  }
+  const normalizedValue = component.endsWith('%') ? numericValue / 100 : numericValue;
+  return Math.round(normalizedValue * 255);
+}
+
 /**
  * Parse a CSS color string to [r, g, b, a] (r,g,b: 0-255, a: 0-1) or null if unresolvable.
  *
@@ -326,8 +349,20 @@ function parseColor (colorString) {
     return parseHex(normalized);
   }
 
+  // color(srgb ...) uses unit-interval color channels rather than rgb's 0-255 channels.
+  let match = normalized.match(SRGB_COLOR_FUNCTION_PATTERN);
+  if (match) {
+    const red = parseSrgbColorComponent(match[1]);
+    const green = parseSrgbColorComponent(match[2]);
+    const blue = parseSrgbColorComponent(match[3]);
+    if (red === null || green === null || blue === null) {
+      return null;
+    }
+    return [red, green, blue, Math.max(0, Math.min(1, parseAlphaString(match[4])))];
+  }
+
   // rgb() / rgba() space syntax
-  let match = normalized.match(/^rgba?\(\s*(-?[\d.]+)\s+(-?[\d.]+)\s+(-?[\d.]+)(?:\s*\/\s*(-?[\d.]+%?))?\s*\)$/);
+  match = normalized.match(/^rgba?\(\s*(-?[\d.]+)\s+(-?[\d.]+)\s+(-?[\d.]+)(?:\s*\/\s*(-?[\d.]+%?))?\s*\)$/);
   if (match) {
     const r = Math.round(parseFloat(match[1]));
     const g = Math.round(parseFloat(match[2]));

package/src/value/font.js

@@ -0,0 +1,111 @@
+/**
+ * @file Token-aware font shorthand minification.
+ */
+
+import { CSS_WIDE_KEYWORDS } from '../declarations/config.js';
+import { tokenizeCssValue } from '../parser/tokenizer.js';
+
+/**
+ * Keywords that would change a quoted family into a generic family.
+ *
+ * @type {Set<string>}
+ */
+const GENERIC_FAMILY_NAMES = new Set([
+  'serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 'system-ui',
+  'math', 'emoji', 'fangsong', 'ui-serif', 'ui-sans-serif', 'ui-monospace',
+  'ui-rounded'
+]);
+
+/**
+ * Removes family quotes only when their contents form ordinary identifiers.
+ *
+ * @param  {string} text  A family string token.
+ * @return {string}       The shortest safe spelling.
+ */
+function shortenFamilyString (text) {
+  const inner = text.slice(1, -1);
+  if (inner.includes('\\') || inner.trim() !== inner) {
+    return text;
+  }
+  const tokens = tokenizeCssValue(inner);
+  const isIdentifierList = tokens.length && tokens.every((token) => {
+    if (token.type === 'whitespace') {
+      return true;
+    }
+    const keyword = token.text.toLowerCase();
+    return token.type === 'ident' && !CSS_WIDE_KEYWORDS.has(keyword) && keyword !== 'default';
+  });
+  if (!isIdentifierList || GENERIC_FAMILY_NAMES.has(inner.toLowerCase())) {
+    return text;
+  }
+  return inner;
+}
+
+/**
+ * Locates a size before rewriting optional components. A substituted or
+ * calculated prefix is left intact because its component boundaries may not
+ * be knowable until the browser resolves it.
+ *
+ * @param  {Array}  tokens  The font tokens.
+ * @return {number}         The size index, or -1 if the prefix is ambiguous.
+ */
+function findFontSizeIndex (tokens) {
+  for (let index = 0; index < tokens.length; index++) {
+    const token = tokens[index];
+    if (token.type === 'function') {
+      return -1;
+    }
+    // An oblique font style may state an angle before the font size.
+    const isAngle = token.type === 'dimension' && /(?:deg|grad|rad|turn)$/i.test(token.text);
+    if (token.type === 'dimension' && !isAngle) {
+      return index;
+    }
+    // Match absolute and relative size keywords, not family-name substrings.
+    const isSizeKeyword = token.type === 'ident' &&
+      /^(?:xx-small|x-small|small|medium|large|x-large|xx-large|xxx-large|smaller|larger)$/i.test(token.text);
+    if (isSizeKeyword || token.type === 'percentage' || (token.type === 'number' && Number(token.text) === 0)) {
+      return index;
+    }
+  }
+  return -1;
+}
+
+/**
+ * Normalizes optional font components before the size, leaving the family and
+ * line height in their respective grammar positions.
+ *
+ * @param  {string} value  The font shorthand.
+ * @return {string}        The minified shorthand.
+ */
+function minifyFontShorthand (value) {
+  const tokens = tokenizeCssValue(value);
+  const sizeIndex = findFontSizeIndex(tokens);
+  if (sizeIndex === -1) {
+    return value;
+  }
+  return tokens.map((token, index) => {
+    if (index < sizeIndex) {
+      if (token.type === 'ident') {
+        const keyword = token.text.toLowerCase();
+        if (keyword === 'normal') {
+          return '';
+        }
+        if (keyword === 'bold') {
+          return '700';
+        }
+      } else if (token.type === 'number' && token.text === '400') {
+        return '';
+      }
+    }
+    if (index > sizeIndex && token.type === 'string') {
+      const family = shortenFamilyString(token.text);
+      if (family !== token.text && tokens[index - 1]?.type !== 'whitespace' && tokens[index - 1]?.text !== ',') {
+        return ' ' + family;
+      }
+      return family;
+    }
+    return token.text;
+  }).join('').trim();
+}
+
+export { minifyFontShorthand };