@thejaredwilcurt/csslop 0.0.24 → 0.0.26

package/src/value/gradients.js

@@ -350,6 +350,88 @@ function combineAdjacentIdenticalStops (args) {
   return normalizeBoundaryPositionTokens(mergedStops);
 }
 
+/**
+ * The `to <side>` linear-gradient directions that are shorter to write as an
+ * angle, keyed by the normalized keyword form. Corner directions are listed
+ * under both keyword orders, since either spells the same corner.
+ *
+ * @type {Map<string, string>}
+ */
+const LINEAR_DIRECTION_ANGLES = new Map([
+  ['to top', '0deg'],
+  ['to right', '90deg'],
+  ['to left', '270deg'],
+  ['to top right', '45deg'],
+  ['to right top', '45deg'],
+  ['to bottom right', '135deg'],
+  ['to right bottom', '135deg'],
+  ['to bottom left', '225deg'],
+  ['to left bottom', '225deg'],
+  ['to top left', '315deg'],
+  ['to left top', '315deg']
+]);
+
+/**
+ * The linear-gradient directions that are already the default, so writing them
+ * out adds nothing.
+ *
+ * @type {Set<string>}
+ */
+const DEFAULT_LINEAR_DIRECTIONS = new Set(['to bottom', '180deg']);
+
+/**
+ * The radial-gradient shapes that are already the default.
+ *
+ * @type {Set<string>}
+ */
+const DEFAULT_RADIAL_SHAPES = new Set(['ellipse at center', 'circle at center']);
+
+/**
+ * Rewrites the leading direction argument of a linear gradient into its
+ * shortest form, dropping it when it is the default.
+ *
+ * @param  {Array}  args  The gradient arguments, rewritten in place.
+ * @return {number}       The number of leading arguments that are not color stops.
+ */
+function normalizeLinearGradientDirection (args) {
+  const firstDirection = args[0].toLowerCase().replace(/\s+/g, ' ').trim();
+  if (DEFAULT_LINEAR_DIRECTIONS.has(firstDirection)) {
+    args.shift();
+    return 0;
+  }
+  const angle = LINEAR_DIRECTION_ANGLES.get(firstDirection);
+  if (angle) {
+    args[0] = angle;
+    return 1;
+  }
+  // Check if first arg looks like a direction (angle or "to ..." keyword)
+  const looksLikeDirection = /^\d+(\.\d+)?deg$/i.test(firstDirection) || firstDirection.startsWith('to ');
+  if (looksLikeDirection) {
+    return 1;
+  }
+  return 0;
+}
+
+/**
+ * Drops the leading shape argument of a radial gradient when it is the default.
+ *
+ * @param  {Array}  args  The gradient arguments, rewritten in place.
+ * @return {number}       The number of leading arguments that are not color stops.
+ */
+function normalizeRadialGradientShape (args) {
+  const firstShape = args[0].toLowerCase().replace(/\s+/g, ' ').trim();
+  if (DEFAULT_RADIAL_SHAPES.has(firstShape)) {
+    args.shift();
+    return 0;
+  }
+  // Check if first arg is a radial shape/size descriptor
+  const looksLikeShape = /\b(circle|ellipse|closest|farthest|at)\b/i.test(firstShape);
+  if (looksLikeShape) {
+    return 1;
+  }
+  return 0;
+}
+
 /**
  * Optimizes gradient arguments by removing default direction or shape keywords, combining adjacent identical color stops, and trimming redundant 0% or 100% stop positions from the first and last stops.
  *
@@ -363,52 +445,11 @@ function processGradientArgs (func, argsStr) {
 
   let directionArgCount = 0;
 
-  if (functionLower.includes('linear')) {
-    if (args.length > 1) {
-      const firstDirection = args[0].toLowerCase().replace(/\s+/g, ' ').trim();
-      if (firstDirection === 'to bottom' || firstDirection === '180deg') {
-        args.shift();
-      } else if (firstDirection === 'to top') {
-        args[0] = '0deg';
-        directionArgCount = 1;
-      } else if (firstDirection === 'to right') {
-        args[0] = '90deg';
-        directionArgCount = 1;
-      } else if (firstDirection === 'to left') {
-        args[0] = '270deg';
-        directionArgCount = 1;
-      } else if (firstDirection === 'to top right' || firstDirection === 'to right top') {
-        args[0] = '45deg';
-        directionArgCount = 1;
-      } else if (firstDirection === 'to bottom right' || firstDirection === 'to right bottom') {
-        args[0] = '135deg';
-        directionArgCount = 1;
-      } else if (firstDirection === 'to bottom left' || firstDirection === 'to left bottom') {
-        args[0] = '225deg';
-        directionArgCount = 1;
-      } else if (firstDirection === 'to top left' || firstDirection === 'to left top') {
-        args[0] = '315deg';
-        directionArgCount = 1;
-      } else {
-        // Check if first arg looks like a direction (angle or "to ..." keyword)
-        const looksLikeDirection = /^\d+(\.\d+)?deg$/i.test(firstDirection) || firstDirection.startsWith('to ');
-        if (looksLikeDirection) {
-          directionArgCount = 1;
-        }
-      }
-    }
-  } else if (functionLower.includes('radial')) {
-    if (args.length > 1) {
-      const firstShape = args[0].toLowerCase().replace(/\s+/g, ' ').trim();
-      if (firstShape === 'ellipse at center' || firstShape === 'circle at center') {
-        args.shift();
-      } else {
-        // Check if first arg is a radial shape/size descriptor
-        const looksLikeShape = /\b(circle|ellipse|closest|farthest|at)\b/i.test(firstShape);
-        if (looksLikeShape) {
-          directionArgCount = 1;
-        }
-      }
+  if (args.length > 1) {
+    if (functionLower.includes('linear')) {
+      directionArgCount = normalizeLinearGradientDirection(args);
+    } else if (functionLower.includes('radial')) {
+      directionArgCount = normalizeRadialGradientShape(args);
     }
   }
 

package/src/value/math.js

@@ -10,6 +10,21 @@ import {
   roundCompactNumber
 } from './shared.js';
 
+/**
+ * The units a folded calc() expression leads with, in the order they are
+ * written. Every other unit follows them alphabetically.
+ *
+ * @type {Array}
+ */
+const PREFERRED_UNIT_ORDER = ['%', '', 'px'];
+
+/**
+ * The same leading units, for excluding them from the alphabetical remainder.
+ *
+ * @type {Set<string>}
+ */
+const PREFERRED_UNITS = new Set(PREFERRED_UNIT_ORDER);
+
 /**
  * Attempts to simplify a calc() expression by combining like-unit terms and evaluating pure arithmetic, returning the simplified string or null if folding is not possible.
  *
@@ -89,8 +104,8 @@ function tryFoldCalcExpression (expression) {
     totals.set(unit, (totals.get(unit) || 0) + number);
   }
 
-  const orderedUnits = ['%', '', 'px', ...[...totals.keys()].filter((unit) => {
-    return !['%', '', 'px'].includes(unit);
+  const orderedUnits = [...PREFERRED_UNIT_ORDER, ...[...totals.keys()].filter((unit) => {
+    return !PREFERRED_UNITS.has(unit);
   }).sort()];
   const outputTerms = [];
 

package/src/value/minify.js

@@ -755,6 +755,51 @@ function convertAbsoluteLengthsToPx (value) {
   });
 }
 
+/**
+ * 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']);
+
+/**
+ * Properties whose value is a time, where a millisecond amount may be worth
+ * rewriting in seconds.
+ *
+ * @type {Set<string>}
+ */
+const TIME_PROPERTIES = new Set([
+  'transition',
+  'transition-duration',
+  'transition-delay',
+  'animation',
+  'animation-duration',
+  'animation-delay'
+]);
+
 /**
  * Applies property-specific optimizations to a CSS value (transition, flex, font,
  * background, display, scale, border-radius, shorthand collapsing, etc.).
@@ -773,15 +818,7 @@ function applyPropertyOptimizations (val, property, allowsHexSpaceElision) {
   }
 
   // Convert ms to s for time-related properties when the seconds form is shorter
-  const isTimeProperty = (
-    property === 'transition' ||
-    property === 'transition-duration' ||
-    property === 'transition-delay' ||
-    property === 'animation' ||
-    property === 'animation-duration' ||
-    property === 'animation-delay'
-  );
-  if (isTimeProperty) {
+  if (TIME_PROPERTIES.has(property)) {
     val = convertMillisecondsToSeconds(val);
   }
 
@@ -823,7 +860,7 @@ function applyPropertyOptimizations (val, property, allowsHexSpaceElision) {
 
   // Initial values
   if (val === 'initial') {
-    if (['opacity', 'z-index', 'flex-grow', 'flex-shrink', 'order', 'line-height', 'zoom'].includes(property)) {
+    if (NUMERIC_INITIAL_PROPERTIES.has(property)) {
       // Just leaving them or mapping some: opacity: initial -> opacity: 1
       if (property === 'opacity') {
         val = '1';
@@ -832,10 +869,10 @@ function applyPropertyOptimizations (val, property, allowsHexSpaceElision) {
         val = 'auto';
       }
     }
-    if (['margin', 'padding'].includes(property)) {
+    if (ZERO_INITIAL_PROPERTIES.has(property)) {
       val = '0';
     }
-    if (['min-width', 'min-height'].includes(property)) {
+    if (AUTO_INITIAL_PROPERTIES.has(property)) {
       val = 'auto';
     }
     // background-color: initial should become #0000 (transparent)
@@ -1043,7 +1080,7 @@ function applyPropertyOptimizations (val, property, allowsHexSpaceElision) {
  * @param  {object} declaration  The CSS declaration object with property and value fields.
  * @return {string}              The minified value string.
  */
-function minifyValue (declaration) {
+function computeMinifiedValue (declaration) {
   if (declaration.property === 'position-area') {
     const shorthand = POSITION_AREA_SHORTHANDS[declaration.value];
     if (shorthand) {
@@ -1135,4 +1172,63 @@ function minifyValue (declaration) {
   return val;
 }
 
-export { minifyValue };
+/**
+ * Memoizes minified values for the current stylesheet. Minification runs many
+ * passes over the same declarations (deduplication, shorthand assembly,
+ * CSS-wide keyword hoisting, stringification), and the result only depends on
+ * the declaration fields that make up the cache key, so each distinct
+ * property/value pair is minified once per stylesheet.
+ *
+ * @type {Map<string, string>}
+ */
+const minifiedValueCache = new Map();
+
+/**
+ * Discards every memoized value. The minifier calls this at the start of each
+ * stylesheet, since the active `@charset` can change how a value minifies and
+ * the cache should not outlive the pass that filled it.
+ */
+function clearMinifiedValueCache () {
+  minifiedValueCache.clear();
+}
+
+/**
+ * Builds the cache key for a declaration from every field the value minifier
+ * reads. A null character cannot appear in a property name or in a parsed CSS
+ * value, so it safely delimits the parts.
+ *
+ * @param  {object} declaration  The CSS declaration object.
+ * @return {string}              The cache key.
+ */
+function createMinifiedValueCacheKey (declaration) {
+  const assembledFlag = declaration.isAssembledShorthand ? '1' : '0';
+  return declaration.property + '\u0000' + assembledFlag + '\u0000' + declaration.value;
+}
+
+/**
+ * Minifies a CSS declaration's value, reusing the memoized result when the same
+ * property and value has already been minified during this pass.
+ *
+ * @param  {object} declaration  The CSS declaration object with property and value fields.
+ * @return {string}              The minified value string.
+ */
+function minifyValue (declaration) {
+  // Only string values have a stable, collision-free key; anything else is rare
+  // enough that minifying it again costs less than encoding its type.
+  if (typeof declaration.value !== 'string') {
+    return computeMinifiedValue(declaration);
+  }
+  const cacheKey = createMinifiedValueCacheKey(declaration);
+  const cachedValue = minifiedValueCache.get(cacheKey);
+  if (cachedValue !== undefined) {
+    return cachedValue;
+  }
+  const minifiedValue = computeMinifiedValue(declaration);
+  minifiedValueCache.set(cacheKey, minifiedValue);
+  return minifiedValue;
+}
+
+export {
+  clearMinifiedValueCache,
+  minifyValue
+};