@thejaredwilcurt/csslop 0.0.1

package/src/value/named-colors.js

@@ -0,0 +1,159 @@
+/**
+ * @file CSS named color keyword to RGB channel mapping.
+ *
+ * Each entry maps a lowercase CSS color keyword to an [r, g, b] array
+ * with channel values in the 0–255 range, per the CSS Color Level 4 specification.
+ */
+
+const namedColors = {
+  black: [0, 0, 0],
+  silver: [192, 192, 192],
+  gray: [128, 128, 128],
+  grey: [128, 128, 128],
+  white: [255, 255, 255],
+  maroon: [128, 0, 0],
+  red: [255, 0, 0],
+  purple: [128, 0, 128],
+  fuchsia: [255, 0, 255],
+  green: [0, 128, 0],
+  lime: [0, 255, 0],
+  olive: [128, 128, 0],
+  yellow: [255, 255, 0],
+  navy: [0, 0, 128],
+  blue: [0, 0, 255],
+  teal: [0, 128, 128],
+  aqua: [0, 255, 255],
+  orange: [255, 165, 0],
+  aliceblue: [240, 248, 255],
+  antiquewhite: [250, 235, 215],
+  aquamarine: [127, 255, 212],
+  azure: [240, 255, 255],
+  beige: [245, 245, 220],
+  bisque: [255, 228, 196],
+  blanchedalmond: [255, 235, 205],
+  blueviolet: [138, 43, 226],
+  brown: [165, 42, 42],
+  burlywood: [222, 184, 135],
+  cadetblue: [95, 158, 160],
+  chartreuse: [127, 255, 0],
+  chocolate: [210, 105, 30],
+  coral: [255, 127, 80],
+  cornflowerblue: [100, 149, 237],
+  cornsilk: [255, 248, 220],
+  crimson: [220, 20, 60],
+  cyan: [0, 255, 255],
+  darkblue: [0, 0, 139],
+  darkcyan: [0, 139, 139],
+  darkgoldenrod: [184, 134, 11],
+  darkgray: [169, 169, 169],
+  darkgreen: [0, 100, 0],
+  darkgrey: [169, 169, 169],
+  darkkhaki: [189, 183, 107],
+  darkmagenta: [139, 0, 139],
+  darkolivegreen: [85, 107, 47],
+  darkorange: [255, 140, 0],
+  darkorchid: [153, 50, 204],
+  darkred: [139, 0, 0],
+  darksalmon: [233, 150, 122],
+  darkseagreen: [143, 188, 143],
+  darkslateblue: [72, 61, 139],
+  darkslategray: [47, 79, 79],
+  darkslategrey: [47, 79, 79],
+  darkturquoise: [0, 206, 209],
+  darkviolet: [148, 0, 211],
+  deeppink: [255, 20, 147],
+  deepskyblue: [0, 191, 255],
+  dimgray: [105, 105, 105],
+  dimgrey: [105, 105, 105],
+  dodgerblue: [30, 144, 255],
+  firebrick: [178, 34, 34],
+  floralwhite: [255, 250, 240],
+  forestgreen: [34, 139, 34],
+  gainsboro: [220, 220, 220],
+  ghostwhite: [248, 248, 255],
+  gold: [255, 215, 0],
+  goldenrod: [218, 165, 32],
+  greenyellow: [173, 255, 47],
+  honeydew: [240, 255, 240],
+  hotpink: [255, 105, 180],
+  indianred: [205, 92, 92],
+  indigo: [75, 0, 130],
+  ivory: [255, 255, 240],
+  khaki: [240, 230, 140],
+  lavender: [230, 230, 250],
+  lavenderblush: [255, 240, 245],
+  lawngreen: [124, 252, 0],
+  lemonchiffon: [255, 250, 205],
+  lightblue: [173, 216, 230],
+  lightcoral: [240, 128, 128],
+  lightcyan: [224, 255, 255],
+  lightgoldenrodyellow: [250, 250, 210],
+  lightgray: [211, 211, 211],
+  lightgreen: [144, 238, 144],
+  lightgrey: [211, 211, 211],
+  lightpink: [255, 182, 193],
+  lightsalmon: [255, 160, 122],
+  lightseagreen: [32, 178, 170],
+  lightskyblue: [135, 206, 250],
+  lightslategray: [119, 136, 153],
+  lightslategrey: [119, 136, 153],
+  lightsteelblue: [176, 196, 222],
+  lightyellow: [255, 255, 224],
+  limegreen: [50, 205, 50],
+  linen: [250, 240, 230],
+  magenta: [255, 0, 255],
+  mediumaquamarine: [102, 205, 170],
+  mediumblue: [0, 0, 205],
+  mediumorchid: [186, 85, 211],
+  mediumpurple: [147, 111, 219],
+  mediumseagreen: [60, 179, 113],
+  mediumslateblue: [123, 104, 238],
+  mediumspringgreen: [0, 250, 154],
+  mediumturquoise: [72, 209, 204],
+  mediumvioletred: [199, 21, 133],
+  midnightblue: [25, 25, 112],
+  mintcream: [245, 255, 250],
+  mistyrose: [255, 228, 225],
+  moccasin: [255, 228, 181],
+  navajowhite: [255, 222, 173],
+  oldlace: [253, 245, 230],
+  olivedrab: [107, 142, 35],
+  orangered: [255, 69, 0],
+  orchid: [218, 112, 214],
+  palegoldenrod: [238, 232, 170],
+  palegreen: [152, 251, 152],
+  paleturquoise: [175, 238, 238],
+  palevioletred: [219, 112, 147],
+  papayawhip: [255, 239, 213],
+  peachpuff: [255, 218, 185],
+  peru: [205, 133, 63],
+  pink: [255, 192, 203],
+  plum: [221, 160, 221],
+  powderblue: [176, 224, 230],
+  rebeccapurple: [102, 51, 153],
+  rosybrown: [188, 143, 143],
+  royalblue: [65, 105, 225],
+  saddlebrown: [139, 69, 19],
+  salmon: [250, 128, 114],
+  sandybrown: [244, 164, 96],
+  seagreen: [46, 139, 87],
+  seashell: [255, 245, 238],
+  sienna: [160, 82, 45],
+  skyblue: [135, 206, 235],
+  slateblue: [106, 90, 205],
+  slategray: [112, 128, 144],
+  slategrey: [112, 128, 144],
+  snow: [255, 250, 250],
+  springgreen: [0, 255, 127],
+  steelblue: [70, 130, 180],
+  tan: [210, 180, 140],
+  thistle: [216, 191, 216],
+  tomato: [255, 99, 71],
+  turquoise: [64, 224, 208],
+  violet: [238, 130, 238],
+  wheat: [245, 222, 179],
+  whitesmoke: [245, 245, 245],
+  yellowgreen: [154, 205, 50]
+};
+
+export { namedColors };

package/src/value/shared.js

@@ -0,0 +1,146 @@
+/**
+ * @file Shared numeric formatting and unit conversion utilities used across CSS value minification.
+ */
+
+/**
+ * Formats a number as a compact string, stripping leading zeros before decimal points (e.g. 0.5 becomes .5).
+ *
+ * @param  {number|string} value  The numeric value to format.
+ * @return {string}               The compact string representation.
+ */
+function formatCompactNumber (value) {
+  let result = String(Number(value));
+  if (result.startsWith('0.')) {
+    result = result.slice(1);
+  }
+  if (result.startsWith('-0.')) {
+    result = '-' + result.slice(2);
+  }
+  return result;
+}
+
+/**
+ * Converts a percentage scale component to its decimal equivalent (e.g. "150%" becomes "1.5"), or returns the value unchanged if it is not a percentage.
+ *
+ * @param  {string} value  The scale component string, possibly ending in %.
+ * @return {string}        The normalized decimal string.
+ */
+function normalizeScaleComponent (value) {
+  const trimmed = value.trim();
+  // Match a percentage value (e.g. "150%", "-50%") and capture the numeric portion
+  const percentMatch = trimmed.match(/^(-?(?:\d+|\d*\.\d+))%$/);
+  if (!percentMatch) {
+    return trimmed;
+  }
+  return formatCompactNumber(parseFloat(percentMatch[1]) / 100);
+}
+
+/**
+ * Rounds a number to the given decimal precision and formats it compactly, removing trailing zeros and leading zeros before the decimal point.
+ *
+ * @param  {number|string} value      The numeric value to round and format.
+ * @param  {number}        precision  The number of decimal places to keep.
+ * @return {string}                   The rounded and compact string representation.
+ */
+function roundCompactNumber (value, precision = 3) {
+  const number = typeof value === 'number' ? value : parseFloat(value);
+  if (!Number.isFinite(number)) {
+    return String(value);
+  }
+  // Strip trailing zeros and trailing decimal point from the fixed-precision string
+  let result = number.toFixed(precision).replace(/0+$/, '').replace(/\.$/, '');
+  if (result.startsWith('0.')) {
+    result = result.slice(1);
+  }
+  if (result.startsWith('-0.')) {
+    result = '-' + result.slice(2);
+  }
+  return result;
+}
+
+/**
+ * Converts an absolute CSS length value (pt, pc, in, cm, mm, q) to its pixel equivalent using standard conversion factors.
+ *
+ * @param  {number|string} value  The numeric length value to convert.
+ * @param  {string}        unit   The CSS length unit (e.g. "pt", "in", "cm").
+ * @return {number|null}          The pixel equivalent, or null if the unit is unrecognized or the value is not finite.
+ */
+function convertAbsoluteLengthToPx (value, unit) {
+  const numeric = typeof value === 'number' ? value : parseFloat(value);
+  const conversionMap = {
+    px: 1,
+    pt: 96 / 72,
+    pc: 16,
+    in: 96,
+    cm: 96 / 2.54,
+    mm: 96 / 25.4,
+    q: 96 / 101.6
+  };
+  const factor = conversionMap[unit.toLowerCase()];
+  if (!factor || !Number.isFinite(numeric)) {
+    return null;
+  }
+  return numeric * factor;
+}
+
+/**
+ * Formats a numeric value with its CSS unit as a compact string, rounding to the specified precision.
+ *
+ * @param  {number} value      The numeric dimension value.
+ * @param  {string} unit       The CSS unit suffix (e.g. "px", "%").
+ * @param  {number} precision  The number of decimal places to keep.
+ * @return {string}            The formatted dimension string.
+ */
+function formatDimension (value, unit, precision = 3) {
+  return roundCompactNumber(value, precision) + unit;
+}
+
+/**
+ * Parses a CSS alpha string (e.g. "0.5", "50%") into a numeric 0–1 value.
+ * If the string is undefined or null, returns the provided fallback.
+ *
+ * @param  {string|undefined} alphaStr  The alpha string, optionally ending in "%".
+ * @param  {number}           fallback  The value to return when alphaStr is absent.
+ * @return {number}                     The parsed alpha value in the 0–1 range.
+ */
+function parseAlphaString (alphaStr, fallback = 1) {
+  if (alphaStr === undefined || alphaStr === null) {
+    return fallback;
+  }
+  if (alphaStr.endsWith('%')) {
+    return parseFloat(alphaStr) / 100;
+  }
+  return parseFloat(alphaStr);
+}
+
+/**
+ * Collapses redundant CSS shorthand parts using the standard box-model
+ * reduction rules: 4-value → 3-value → 2-value → 1-value.
+ *
+ * For example, `["10px", "5px", "10px", "5px"]` becomes `["10px", "5px"]`.
+ *
+ * @param  {Array} parts  The array of shorthand value strings to collapse in place.
+ * @return {Array}        The same array, mutated with redundant entries removed.
+ */
+function collapseShorthandParts (parts) {
+  if (parts.length === 4 && parts[1] === parts[3]) {
+    parts.splice(3, 1);
+  }
+  if (parts.length === 3 && parts[0] === parts[2]) {
+    parts.splice(2, 1);
+  }
+  if (parts.length === 2 && parts[0] === parts[1]) {
+    parts.splice(1, 1);
+  }
+  return parts;
+}
+
+export {
+  collapseShorthandParts,
+  convertAbsoluteLengthToPx,
+  formatCompactNumber,
+  formatDimension,
+  normalizeScaleComponent,
+  parseAlphaString,
+  roundCompactNumber
+};

package/src/value/transforms.js

@@ -0,0 +1,222 @@
+/**
+ * @file Minifies CSS transform values by simplifying individual transform functions, collapsing axes, and removing identity components.
+ */
+
+import {
+  normalizeScaleComponent,
+  roundCompactNumber
+} from './shared.js';
+
+/**
+ * Checks if a transform function argument represents a zero value, regardless of what CSS unit is attached.
+ *
+ * @param  {string}  value  The transform argument string to test.
+ * @return {boolean}        True if the value is zero with any unit.
+ */
+function isZeroTransformValue (value) {
+  return /^[-+]?0(?:[a-z%]+)?$/i.test(value.trim());
+}
+
+/**
+ * Splits a CSS function's comma-separated argument string into an array, correctly handling nested parentheses.
+ *
+ * @param  {string} value  The raw arguments string inside the function parentheses.
+ * @return {Array}         An array of trimmed argument strings.
+ */
+function splitFunctionArguments (value) {
+  const parts = [];
+  let depth = 0;
+  let current = '';
+  for (const character of value) {
+    if (character === '(') {
+      depth++;
+    }
+    if (character === ')') {
+      depth--;
+    }
+    if (character === ',' && depth === 0) {
+      parts.push(current.trim());
+      current = '';
+    } else {
+      current += character;
+    }
+  }
+  if (current.trim() || parts.length) {
+    parts.push(current.trim());
+  }
+  return parts;
+}
+
+/**
+ * Parses a CSS transform value string into an array of objects, each containing a function name and its raw arguments string.
+ *
+ * @param  {string}     value  The full CSS transform value string.
+ * @return {Array|null}        An array of { name, args } objects, or null if the string cannot be parsed.
+ */
+function splitTransformFunctions (value) {
+  const parts = [];
+  let position = 0;
+  while (position < value.length) {
+    // Skip whitespace between transform functions
+    while (position < value.length && /\s/.test(value[position])) {
+      position++;
+    }
+    if (position >= value.length) {
+      break;
+    }
+    const nameStart = position;
+    // Consume alphanumeric and hyphen characters for the function name
+    while (position < value.length && /[A-Za-z0-9-]/.test(value[position])) {
+      position++;
+    }
+    if (nameStart === position || value[position] !== '(') {
+      return null;
+    }
+    const name = value.slice(nameStart, position);
+    let depth = 1;
+    let end = position + 1;
+    while (end < value.length && depth > 0) {
+      if (value[end] === '(') {
+        depth++;
+      }
+      if (value[end] === ')') {
+        depth--;
+      }
+      end++;
+    }
+    if (depth !== 0) {
+      return null;
+    }
+    parts.push({ name, args: value.slice(position + 1, end - 1) });
+    position = end;
+  }
+  return parts;
+}
+
+/**
+ * Minifies a single CSS transform function by simplifying 3D functions to 2D equivalents, collapsing redundant axes, and normalizing scale percentages.
+ *
+ * @param  {string} name  The transform function name (e.g. "translate3d", "scale").
+ * @param  {string} args  The raw comma-separated arguments string.
+ * @return {string}       The minified transform function call string.
+ */
+function minifyTransformFunction (name, args) {
+  const lowerName = name.toLowerCase();
+  const parts = splitFunctionArguments(args);
+
+  if (lowerName === 'rotate' && parts.length === 1) {
+    // Convert turn units to degrees (e.g. 0.5turn → 180deg)
+    const angle = parts[0].replace(/^(-?(?:\d+|\d*\.\d+))turn$/i, (_, turns) => {
+      return roundCompactNumber(parseFloat(turns) * 360) + 'deg';
+    });
+    return 'rotate(' + angle + ')';
+  }
+
+  if (lowerName === 'translate3d' && parts.length === 3) {
+    const [x, y, z] = parts;
+    if (isZeroTransformValue(y) && isZeroTransformValue(z)) {
+      return 'translate(' + x + ')';
+    }
+    if (isZeroTransformValue(x) && isZeroTransformValue(z)) {
+      return 'translateY(' + y + ')';
+    }
+    if (isZeroTransformValue(x) && isZeroTransformValue(y)) {
+      return 'translateZ(' + z + ')';
+    }
+    return name + '(' + parts.join(',') + ')';
+  }
+
+  if (lowerName === 'translate' && parts.length === 2) {
+    const [x, y] = parts;
+    if (isZeroTransformValue(x)) {
+      return 'translateY(' + y + ')';
+    }
+    if (isZeroTransformValue(y)) {
+      return 'translate(' + x + ')';
+    }
+    return name + '(' + parts.join(',') + ')';
+  }
+
+  if (lowerName === 'scale') {
+    const normalized = parts.map(normalizeScaleComponent);
+    if (normalized.length === 1) {
+      return 'scale(' + normalized[0] + ')';
+    }
+    if (normalized.length === 2) {
+      const [x, y] = normalized;
+      if (x === y) {
+        return 'scale(' + x + ')';
+      }
+      if (y === '1') {
+        return 'scaleX(' + x + ')';
+      }
+      if (x === '1') {
+        return 'scaleY(' + y + ')';
+      }
+      return 'scale(' + normalized.join(',') + ')';
+    }
+  }
+
+  if (lowerName === 'scale3d' && parts.length === 3) {
+    const normalized = parts.map(normalizeScaleComponent);
+    const [x, y, z] = normalized;
+    if (z === '1') {
+      return minifyTransformFunction('scale', x + ',' + y);
+    }
+    if (y === '1' && z === '1') {
+      return 'scaleX(' + x + ')';
+    }
+    if (x === '1' && z === '1') {
+      return 'scaleY(' + y + ')';
+    }
+    if (x === '1' && y === '1') {
+      return 'scaleZ(' + z + ')';
+    }
+    return 'scale3d(' + normalized.join(',') + ')';
+  }
+
+  if (lowerName === 'rotatez' && parts.length === 1) {
+    return 'rotate(' + parts[0] + ')';
+  }
+
+  if (lowerName === 'rotate3d' && parts.length === 4) {
+    const [x, y, z, angle] = parts;
+    if (x === '1' && y === '0' && z === '0') {
+      return 'rotateX(' + angle + ')';
+    }
+    if (x === '0' && y === '1' && z === '0') {
+      return 'rotateY(' + angle + ')';
+    }
+    if (x === '0' && y === '0' && z === '1') {
+      return 'rotate(' + angle + ')';
+    }
+    return name + '(' + parts.join(',') + ')';
+  }
+
+  if (lowerName.startsWith('scale')) {
+    return name + '(' + parts.map(normalizeScaleComponent).join(',') + ')';
+  }
+
+  return name + '(' + parts.join(',') + ')';
+}
+
+/**
+ * Minifies an entire CSS transform value by parsing each function call and applying per-function optimizations.
+ *
+ * @param  {string} value  The full CSS transform value string.
+ * @return {string}        The minified transform value, or the original value if parsing fails.
+ */
+function minifyTransformValue (value) {
+  if (!value || value === 'none') {
+    return value;
+  }
+  const functions = splitTransformFunctions(value);
+  if (!functions) {
+    return value;
+  }
+  return functions.map(({ name, args }) => {
+    return minifyTransformFunction(name, args);
+  }).join(' ');
+}
+
+export { minifyTransformValue };