@thejaredwilcurt/csslop 0.0.19 → 0.0.20

package/package.json

@@ -2,7 +2,7 @@
   "name": "@thejaredwilcurt/csslop",
   "main": "index.js",
   "type": "module",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Experimental CSS minification",
   "scripts": {
     "prestart": "node ./scripts/prestart.js",
@@ -26,22 +26,22 @@
   "devDependencies": {
     "@codemirror/autocomplete": "^6.20.3",
     "@codemirror/lang-css": "^6.3.1",
-    "@codemirror/view": "^6.43.7",
+    "@codemirror/view": "^6.43.8",
     "@eslint/js": "^10.0.1",
     "@stylistic/eslint-plugin": "^5.10.0",
     "codemirror": "^6.0.2",
     "css-minify-tests": "github:keithamus/css-minify-tests",
-    "eslint": "^10.8.0",
+    "eslint": "^10.8.1",
     "eslint-config-tjw-base": "^5.0.0",
     "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": "^63.3.2",
+    "eslint-plugin-jsdoc": "^64.0.1",
     "fflate": "^0.8.3",
-    "globals": "^17.8.0",
+    "globals": "^17.9.0",
     "pretty-ms": "^9.3.0",
     "real-world-css-libraries": "^1.0.5",
-    "vite": "^8.2.0"
+    "vite": "^8.2.1"
   },
   "author": "The Jared Wilcurt",
   "homepage": "https://github.com/TheJaredWilcurt/csslop#readme",

package/src/rules/selectors.js

@@ -173,10 +173,77 @@ function mergeAdjacentWherePseudoClasses (selector) {
   return result;
 }
 
+/**
+ * Matches a compound selector built exclusively from long-established simple
+ * selectors: an optional type or universal selector, followed by any number of
+ * id and class selectors. Anything else (pseudo-classes, pseudo-elements,
+ * attribute matchers, combinators, descendant sequences) is excluded, because
+ * those may be unrecognized by a browser and `:is()` forgiving parsing is what
+ * keeps the remaining selectors in the rule alive.
+ *
+ * @type {RegExp}
+ */
+const BROWSER_SAFE_COMPOUND_SELECTOR = /^(?:\*|[a-zA-Z][a-zA-Z0-9_-]*)?(?:[#.][a-zA-Z_-][a-zA-Z0-9_-]*)*$/;
+
+/**
+ * Matches every id or class selector within a compound selector, used to count
+ * each one's specificity contribution.
+ *
+ * @type {RegExp}
+ */
+const ID_OR_CLASS_SELECTOR = /[#.][a-zA-Z_-][a-zA-Z0-9_-]*/g;
+
+/**
+ * Computes the specificity of a compound selector known to consist only of
+ * type, universal, id, and class selectors, as an "ids,classes,types" key.
+ *
+ * @param  {string} compoundSelector  A browser-safe compound selector.
+ * @return {string}                   The specificity key for equality comparison.
+ */
+function getSimpleCompoundSpecificityKey (compoundSelector) {
+  const idsAndClasses = compoundSelector.match(ID_OR_CLASS_SELECTOR) || [];
+  const identifierCount = idsAndClasses.filter((selector) => {
+    return selector.startsWith('#');
+  }).length;
+  const classCount = idsAndClasses.length - identifierCount;
+  // Whatever precedes the first id/class is the type or universal selector, if any
+  const typePortion = compoundSelector.split(/[#.]/)[0];
+  const typeCount = typePortion && typePortion !== '*' ? 1 : 0;
+  return identifierCount + ',' + classCount + ',' + typeCount;
+}
+
+/**
+ * Determines whether a `:is()` selector list can be decomposed into a plain
+ * comma-separated selector list. `:is()` applies the highest specificity of its
+ * arguments to every match, so decomposing is only equivalent when all
+ * arguments share one specificity. It also parses forgivingly, so every
+ * argument must additionally be a selector every browser understands.
+ *
+ * @param  {Array}   parts  The selector strings inside the `:is()`.
+ * @return {boolean}        True when the `:is()` wrapper can be dropped.
+ */
+function canDecomposeIsSelector (parts) {
+  if (parts.length < 2) {
+    return false;
+  }
+  const allBrowserSafe = parts.every((part) => {
+    return part !== '' && BROWSER_SAFE_COMPOUND_SELECTOR.test(part);
+  });
+  if (!allBrowserSafe) {
+    return false;
+  }
+  const specificityKeys = parts.map((part) => {
+    return getSimpleCompoundSpecificityKey(part);
+  });
+  return specificityKeys.every((key) => {
+    return key === specificityKeys[0];
+  });
+}
+
 /**
  * Processes a bare `:is()` selector by merging `:link`+`:visited` into `:any-link`,
- * de-duplicating, sorting alphabetically, and conditionally expanding into individual
- * selectors when all parts are simple type/universal selectors with no modifications.
+ * de-duplicating, sorting alphabetically, and decomposing into individual selectors
+ * when the remaining parts are browser-safe and share one level of specificity.
  *
  * @param  {string} selector  A minified CSS selector string.
  * @return {Array}            An array of one or more processed selector strings.
@@ -223,7 +290,6 @@ function processIsSelector (selector) {
     }
   }
   parts.push(currentPart);
-  const originalCount = parts.length;
   // Replace :link + :visited with :any-link
   const hasLink = parts.includes(':link');
   const hasVisited = parts.includes(':visited');
@@ -243,11 +309,8 @@ function processIsSelector (selector) {
   if (parts.length === 1) {
     return parts;
   }
-  // Expand if all parts are simple type/universal selectors and no dedup/replacement occurred
-  const allSimple = parts.every((part) => {
-    return /^[a-z*][a-z0-9-]*$/i.test(part);
-  });
-  if (allSimple && parts.length === originalCount) {
+  // Drop the :is() wrapper when the parts are equivalent as a plain selector list
+  if (canDecomposeIsSelector(parts)) {
     return parts;
   }
   return [':is(' + parts.join(',') + ')'];

package/src/value/color-mix.js

@@ -3,6 +3,7 @@
  */
 
 import {
+  convertOklchToHex,
   oklabToRgb,
   parseColor,
   rgbToOklab,
@@ -372,6 +373,11 @@ function evaluateColorMix (expr) {
     const C = lch1.C * t1 + lch2.C * t2;
     const H = interpolateHueShorter(lch1.H, lch2.H, t2);
     const alpha = (a1 * t1 + a2 * t2) * 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);
+    if (hex) {
+      return hex;
+    }
     return formatOklch(L, C, H, alpha);
   }
 

package/src/value/colors.js

@@ -508,6 +508,20 @@ function convertOklabToHex (L, a, b, alpha) {
   return rgbaToHex(r, g, bl, alpha !== undefined ? alpha : 1);
 }
 
+/**
+ * Convert a standalone oklch() value to hex if it fits in the sRGB gamut; returns null if out-of-gamut.
+ *
+ * @param  {number}      L      The OKLCH lightness component, 0 to 1.
+ * @param  {number}      C      The OKLCH chroma component.
+ * @param  {number}      H      The OKLCH hue angle in degrees.
+ * @param  {number}      alpha  The alpha value from 0 to 1.
+ * @return {string|null}        A hex color string, or null if the color is outside the sRGB gamut.
+ */
+function convertOklchToHex (L, C, H, alpha) {
+  const lab = oklchToOklab(L, C, H);
+  return convertOklabToHex(lab.L, lab.a, lab.b, alpha);
+}
+
 export {
   hslToRgbChannels,
   rgbaToHex,
@@ -517,6 +531,7 @@ export {
   parseHex,
   convertLabToHex,
   convertOklabToHex,
+  convertOklchToHex,
   shortestColor,
   srgbToOklab,
   oklabToSrgb,

package/src/value/minify.js

@@ -9,6 +9,7 @@ import { evaluateColorMix } from './color-mix.js';
 import {
   convertLabToHex,
   convertOklabToHex,
+  convertOklchToHex,
   hslToRgbChannels,
   hwbToRgbChannels,
   parseHex,
@@ -31,6 +32,7 @@ import {
   collapseShorthandParts,
   normalizeScaleComponent,
   parseAlphaString,
+  parseAngleToDegrees,
   roundCompactNumber
 } from './shared.js';
 import { findMatchingParenthesis } from './syntax.js';
@@ -336,6 +338,97 @@ function normalizeWhitespaceAndQuotes (val, property) {
   return val;
 }
 
+/**
+ * The OKLCH chroma value that `100%` resolves to, per CSS Color Level 4.
+ *
+ * @type {number}
+ */
+const OKLCH_CHROMA_PERCENT_REFERENCE = 0.4;
+
+/**
+ * Regex matching an `oklch()` function with three space-separated components
+ * and an optional slash-delimited alpha. Lightness and chroma accept numbers
+ * or percentages, hue accepts a number with an optional CSS angle unit, and
+ * every component accepts the `none` keyword.
+ *
+ * @type {RegExp}
+ */
+const OKLCH_FUNCTION_PATTERN = new RegExp(
+  '\\boklch\\(\\s*' +
+  '(none|-?(?:\\d+|\\d*\\.\\d+)%?)\\s+' +
+  '(none|-?(?:\\d+|\\d*\\.\\d+)%?)\\s+' +
+  '(none|-?(?:\\d+|\\d*\\.\\d+)(?:deg|grad|rad|turn)?)' +
+  '(?:\\s*/\\s*(none|-?(?:\\d+|\\d*\\.\\d+)%?))?' +
+  '\\s*\\)',
+  'gi'
+);
+
+/**
+ * Parses an OKLCH lightness or chroma component into its numeric value.
+ * Missing components (`none`) resolve to zero, and percentages are scaled
+ * against the reference value for that component.
+ *
+ * @param  {string}      token             The raw component token.
+ * @param  {number}      percentReference  The value that `100%` represents for this component.
+ * @return {number|null}                   The numeric component value, or null when unparsable.
+ */
+function parseOklchComponent (token, percentReference) {
+  const normalized = token.trim().toLowerCase();
+  if (normalized === 'none') {
+    return 0;
+  }
+  const numeric = parseFloat(normalized);
+  if (!Number.isFinite(numeric)) {
+    return null;
+  }
+  if (normalized.endsWith('%')) {
+    return numeric / 100 * percentReference;
+  }
+  return numeric;
+}
+
+/**
+ * Parses an OKLCH hue component into degrees, treating `none` as zero.
+ *
+ * @param  {string}      token  The raw hue token, optionally carrying an angle unit.
+ * @return {number|null}        The hue in degrees, or null when unparsable.
+ */
+function parseOklchHue (token) {
+  const normalized = token.trim().toLowerCase();
+  if (normalized === 'none') {
+    return 0;
+  }
+  return parseAngleToDegrees(normalized);
+}
+
+/**
+ * Converts `oklch()` colors that fall inside the sRGB gamut to their hex
+ * equivalent when that is shorter. Out-of-gamut colors have no sRGB
+ * representation, so they are left in their native color space.
+ *
+ * @param  {string} value  The CSS value string that may contain oklch() colors.
+ * @return {string}        The value with in-gamut oklch() colors replaced by hex.
+ */
+function convertOklchFunctionsToHex (value) {
+  return value.replace(OKLCH_FUNCTION_PATTERN, (match, lightnessToken, chromaToken, hueToken, alphaToken) => {
+    const lightness = parseOklchComponent(lightnessToken, 1);
+    const chroma = parseOklchComponent(chromaToken, OKLCH_CHROMA_PERCENT_REFERENCE);
+    const hue = parseOklchHue(hueToken);
+    if (lightness === null || chroma === null || hue === null) {
+      return match;
+    }
+    const alpha = alphaToken?.trim().toLowerCase() === 'none' ? 0 : parseAlphaString(alphaToken);
+    const hex = convertOklchToHex(lightness, chroma, hue, alpha);
+    if (!hex) {
+      return match; // out-of-gamut: keep native oklch form
+    }
+    if (hex.length < match.length) {
+      return hex;
+    }
+    return match;
+  });
+}
+
 /**
  * Converts CSS color functions (rgb, hsl, hwb, oklab, color-mix, etc.) to their
  * shortest hex equivalents and applies hex shortening.
@@ -378,6 +471,9 @@ function convertColorsToHex (val) {
     return match;
   });
 
+  // Convert in-gamut oklch() to hex before precision rounding, so the full authored precision is used
+  val = convertOklchFunctionsToHex(val);
+
   // Minify whitespace and numeric precision inside wide-gamut and functional color notations
   val = val.replace(/\b(oklab|oklch|lch|lab|color|hwb)\((.*?)\)/gi, (match, func, inner) => {
     // Collapse whitespace to single space

package/src/value/shared.js

@@ -113,6 +113,36 @@ function parseAlphaString (alphaStr, fallback = 1) {
   return parseFloat(alphaStr);
 }
 
+/**
+ * Conversion factors from each CSS angle unit to degrees.
+ *
+ * @type {{[key: string]: number}}
+ */
+const ANGLE_UNIT_TO_DEGREES = {
+  deg: 1,
+  grad: 360 / 400,
+  rad: 180 / Math.PI,
+  turn: 360
+};
+
+/**
+ * Parses a CSS angle token (e.g. "90", "90deg", ".25turn") into degrees.
+ * Unitless values are treated as degrees, per the CSS Color specification's
+ * handling of hue components.
+ *
+ * @param  {string}      angleToken  The angle token, with or without a unit suffix.
+ * @return {number|null}             The angle in degrees, or null if the token is not a valid angle.
+ */
+function parseAngleToDegrees (angleToken) {
+  // Capture the numeric portion and an optional CSS angle unit suffix
+  const match = String(angleToken).trim().match(/^(-?(?:\d+|\d*\.\d+))(deg|grad|rad|turn)?$/i);
+  if (!match) {
+    return null;
+  }
+  const unit = match[2] ? match[2].toLowerCase() : 'deg';
+  return parseFloat(match[1]) * ANGLE_UNIT_TO_DEGREES[unit];
+}
+
 /**
  * Collapses redundant CSS shorthand parts using the standard box-model
  * reduction rules: 4-value → 3-value → 2-value → 1-value.
@@ -142,5 +172,6 @@ export {
   formatDimension,
   normalizeScaleComponent,
   parseAlphaString,
+  parseAngleToDegrees,
   roundCompactNumber
 };