css-calc: update random() (#1567)

packages/color-helpers/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to Color Helpers
 
+### Unreleased (patch)
+
+- Use `Number.isNaN` instead of `NaN` for consistency.
+
 ### 5.0.1
 
 _August 14, 2024_

packages/color-helpers/dist/index.cjs

@@ -239,7 +239,7 @@ function lin_sRGB(t){return[lin_sRGB_channel(t[0]),lin_sRGB_channel(t[1]),lin_sR
  * @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/utilities.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
  *
  * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/better-rgbToHsl.js
- */function sRGB_to_HSL(t){const n=t[0],_=t[1],o=t[2],e=Math.max(n,_,o),r=Math.min(n,_,o),a=(r+e)/2,i=e-r;let l=NaN,s=0;if(0!==Math.round(1e5*i)){const t=Math.round(1e5*a);switch(s=0===t||1e5===t?0:(e-a)/Math.min(a,1-a),e){case n:l=(_-o)/i+(_<o?6:0);break;case _:l=(o-n)/i+2;break;case o:l=(n-_)/i+4}l*=60}return s<0&&(l+=180,s=Math.abs(s)),l>=360&&(l-=360),[l,100*s,100*a]}function sRGB_to_Hue(t){const n=t[0],_=t[1],o=t[2],e=Math.max(n,_,o);let r=NaN;const a=e-Math.min(n,_,o);if(0!==a){switch(e){case n:r=(_-o)/a+(_<o?6:0);break;case _:r=(o-n)/a+2;break;case o:r=(n-_)/a+4}r*=60}return r>=360&&(r-=360),r}function inGamut(t){return t[0]>=-1e-4&&t[0]<=1.0001&&t[1]>=-1e-4&&t[1]<=1.0001&&t[2]>=-1e-4&&t[2]<=1.0001}function clip(t){return[t[0]<0?0:t[0]>1?1:t[0],t[1]<0?0:t[1]>1?1:t[1],t[2]<0?0:t[2]>1?1:t[2]]}
+ */function sRGB_to_HSL(t){const n=t[0],_=t[1],o=t[2],e=Math.max(n,_,o),r=Math.min(n,_,o),a=(r+e)/2,i=e-r;let l=Number.NaN,s=0;if(0!==Math.round(1e5*i)){const t=Math.round(1e5*a);switch(s=0===t||1e5===t?0:(e-a)/Math.min(a,1-a),e){case n:l=(_-o)/i+(_<o?6:0);break;case _:l=(o-n)/i+2;break;case o:l=(n-_)/i+4}l*=60}return s<0&&(l+=180,s=Math.abs(s)),l>=360&&(l-=360),[l,100*s,100*a]}function sRGB_to_Hue(t){const n=t[0],_=t[1],o=t[2],e=Math.max(n,_,o),r=Math.min(n,_,o);let a=Number.NaN;const i=e-r;if(0!==i){switch(e){case n:a=(_-o)/i+(_<o?6:0);break;case _:a=(o-n)/i+2;break;case o:a=(n-_)/i+4}a*=60}return a>=360&&(a-=360),a}function inGamut(t){return t[0]>=-1e-4&&t[0]<=1.0001&&t[1]>=-1e-4&&t[1]<=1.0001&&t[2]>=-1e-4&&t[2]<=1.0001}function clip(t){return[t[0]<0?0:t[0]>1?1:t[0],t[1]<0?0:t[1]>1?1:t[1],t[2]<0?0:t[2]>1?1:t[2]]}
 /**
  * @description Calculate deltaE OK which is the simple root sum of squares
  * @param {number[]} reference - Array of OKLab values: L as 0..1, a and b as -1..1

packages/color-helpers/dist/index.mjs

@@ -113,7 +113,7 @@ function XYZ_to_OKLab(t){const n=multiplyMatrices(l,t);return multiplyMatrices(i
  *
  * @license W3C https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
  * @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/conversions.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
- */const D=1.09929682680944,g=.018053968510807;function gam_2020_channel(t){const n=t<0?-1:1,_=Math.abs(t);return _>g?n*(D*Math.pow(_,.45)-(D-1)):4.5*t}
+ */const D=1.09929682680944,b=.018053968510807;function gam_2020_channel(t){const n=t<0?-1:1,_=Math.abs(t);return _>b?n*(D*Math.pow(_,.45)-(D-1)):4.5*t}
 /**
  * Convert an array of linear-light sRGB values in the range 0.0-1.0 to gamma corrected form
  * Extended transfer function:
@@ -138,7 +138,7 @@ function XYZ_to_OKLab(t){const n=multiplyMatrices(l,t);return multiplyMatrices(i
  *
  * @license W3C https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
  * @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/conversions.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
- */const b=1/512;function gam_ProPhoto_channel(t){const n=t<0?-1:1,_=Math.abs(t);return _>=b?n*Math.pow(_,1/1.8):16*t}
+ */const g=1/512;function gam_ProPhoto_channel(t){const n=t<0?-1:1,_=Math.abs(t);return _>=g?n*Math.pow(_,1/1.8):16*t}
 /**
  * Convert an array of linear-light a98-rgb in the range 0.0-1.0
  * to gamma corrected form. Negative values are also now accepted
@@ -239,7 +239,7 @@ function lin_sRGB(t){return[lin_sRGB_channel(t[0]),lin_sRGB_channel(t[1]),lin_sR
  * @copyright This software or document includes material copied from or derived from https://github.com/w3c/csswg-drafts/blob/main/css-color-4/utilities.js. Copyright © 2022 W3C® (MIT, ERCIM, Keio, Beihang).
  *
  * @see https://github.com/w3c/csswg-drafts/blob/main/css-color-4/better-rgbToHsl.js
- */function sRGB_to_HSL(t){const n=t[0],_=t[1],o=t[2],e=Math.max(n,_,o),a=Math.min(n,_,o),r=(a+e)/2,l=e-a;let i=NaN,c=0;if(0!==Math.round(1e5*l)){const t=Math.round(1e5*r);switch(c=0===t||1e5===t?0:(e-r)/Math.min(r,1-r),e){case n:i=(_-o)/l+(_<o?6:0);break;case _:i=(o-n)/l+2;break;case o:i=(n-_)/l+4}i*=60}return c<0&&(i+=180,c=Math.abs(c)),i>=360&&(i-=360),[i,100*c,100*r]}function sRGB_to_Hue(t){const n=t[0],_=t[1],o=t[2],e=Math.max(n,_,o);let a=NaN;const r=e-Math.min(n,_,o);if(0!==r){switch(e){case n:a=(_-o)/r+(_<o?6:0);break;case _:a=(o-n)/r+2;break;case o:a=(n-_)/r+4}a*=60}return a>=360&&(a-=360),a}function sRGB_to_XYZ_D50(t){let n=t;return n=lin_sRGB(n),n=lin_sRGB_to_XYZ(n),n=D65_to_D50(n),n}function XYZ_D50_to_sRGB(t){let n=t;return n=D50_to_D65(n),n=XYZ_to_lin_sRGB(n),n=gam_sRGB(n),n}function HSL_to_XYZ_D50(t){let n=t;return n=HSL_to_sRGB(n),n=lin_sRGB(n),n=lin_sRGB_to_XYZ(n),n=D65_to_D50(n),n}function XYZ_D50_to_HSL(t){let n=t;return n=D50_to_D65(n),n=XYZ_to_lin_sRGB(n),n=gam_sRGB(n),n=sRGB_to_HSL(n),n}function HWB_to_XYZ_D50(t){let n=t;return n=HWB_to_sRGB(n),n=lin_sRGB(n),n=lin_sRGB_to_XYZ(n),n=D65_to_D50(n),n}function XYZ_D50_to_HWB(t){let n=t;n=D50_to_D65(n),n=XYZ_to_lin_sRGB(n);const _=gam_sRGB(n),o=Math.min(_[0],_[1],_[2]),e=1-Math.max(_[0],_[1],_[2]);return[sRGB_to_Hue(_),100*o,100*e]}function Lab_to_XYZ_D50(t){let n=t;return n=Lab_to_XYZ(n),n}function XYZ_D50_to_Lab(t){let n=t;return n=XYZ_to_Lab(n),n}function LCH_to_XYZ_D50(t){let n=t;return n=LCH_to_Lab(n),n=Lab_to_XYZ(n),n}function XYZ_D50_to_LCH(t){let n=t;return n=XYZ_to_Lab(n),n=Lab_to_LCH(n),n}function OKLab_to_XYZ_D50(t){let n=t;return n=OKLab_to_XYZ(n),n=D65_to_D50(n),n}function XYZ_D50_to_OKLab(t){let n=t;return n=D50_to_D65(n),n=XYZ_to_OKLab(n),n}function OKLCH_to_XYZ_D50(t){let n=t;return n=OKLCH_to_OKLab(n),n=OKLab_to_XYZ(n),n=D65_to_D50(n),n}function XYZ_D50_to_OKLCH(t){let n=t;return n=D50_to_D65(n),n=XYZ_to_OKLab(n),n=OKLab_to_OKLCH(n),n}function lin_sRGB_to_XYZ_D50(t){let n=t;return n=lin_sRGB_to_XYZ(n),n=D65_to_D50(n),n}function XYZ_D50_to_lin_sRGB(t){let n=t;return n=D50_to_D65(n),n=XYZ_to_lin_sRGB(n),n}function a98_RGB_to_XYZ_D50(t){let n=t;
+ */function sRGB_to_HSL(t){const n=t[0],_=t[1],o=t[2],e=Math.max(n,_,o),a=Math.min(n,_,o),r=(a+e)/2,l=e-a;let i=Number.NaN,c=0;if(0!==Math.round(1e5*l)){const t=Math.round(1e5*r);switch(c=0===t||1e5===t?0:(e-r)/Math.min(r,1-r),e){case n:i=(_-o)/l+(_<o?6:0);break;case _:i=(o-n)/l+2;break;case o:i=(n-_)/l+4}i*=60}return c<0&&(i+=180,c=Math.abs(c)),i>=360&&(i-=360),[i,100*c,100*r]}function sRGB_to_Hue(t){const n=t[0],_=t[1],o=t[2],e=Math.max(n,_,o),a=Math.min(n,_,o);let r=Number.NaN;const l=e-a;if(0!==l){switch(e){case n:r=(_-o)/l+(_<o?6:0);break;case _:r=(o-n)/l+2;break;case o:r=(n-_)/l+4}r*=60}return r>=360&&(r-=360),r}function sRGB_to_XYZ_D50(t){let n=t;return n=lin_sRGB(n),n=lin_sRGB_to_XYZ(n),n=D65_to_D50(n),n}function XYZ_D50_to_sRGB(t){let n=t;return n=D50_to_D65(n),n=XYZ_to_lin_sRGB(n),n=gam_sRGB(n),n}function HSL_to_XYZ_D50(t){let n=t;return n=HSL_to_sRGB(n),n=lin_sRGB(n),n=lin_sRGB_to_XYZ(n),n=D65_to_D50(n),n}function XYZ_D50_to_HSL(t){let n=t;return n=D50_to_D65(n),n=XYZ_to_lin_sRGB(n),n=gam_sRGB(n),n=sRGB_to_HSL(n),n}function HWB_to_XYZ_D50(t){let n=t;return n=HWB_to_sRGB(n),n=lin_sRGB(n),n=lin_sRGB_to_XYZ(n),n=D65_to_D50(n),n}function XYZ_D50_to_HWB(t){let n=t;n=D50_to_D65(n),n=XYZ_to_lin_sRGB(n);const _=gam_sRGB(n),o=Math.min(_[0],_[1],_[2]),e=1-Math.max(_[0],_[1],_[2]);return[sRGB_to_Hue(_),100*o,100*e]}function Lab_to_XYZ_D50(t){let n=t;return n=Lab_to_XYZ(n),n}function XYZ_D50_to_Lab(t){let n=t;return n=XYZ_to_Lab(n),n}function LCH_to_XYZ_D50(t){let n=t;return n=LCH_to_Lab(n),n=Lab_to_XYZ(n),n}function XYZ_D50_to_LCH(t){let n=t;return n=XYZ_to_Lab(n),n=Lab_to_LCH(n),n}function OKLab_to_XYZ_D50(t){let n=t;return n=OKLab_to_XYZ(n),n=D65_to_D50(n),n}function XYZ_D50_to_OKLab(t){let n=t;return n=D50_to_D65(n),n=XYZ_to_OKLab(n),n}function OKLCH_to_XYZ_D50(t){let n=t;return n=OKLCH_to_OKLab(n),n=OKLab_to_XYZ(n),n=D65_to_D50(n),n}function XYZ_D50_to_OKLCH(t){let n=t;return n=D50_to_D65(n),n=XYZ_to_OKLab(n),n=OKLab_to_OKLCH(n),n}function lin_sRGB_to_XYZ_D50(t){let n=t;return n=lin_sRGB_to_XYZ(n),n=D65_to_D50(n),n}function XYZ_D50_to_lin_sRGB(t){let n=t;return n=D50_to_D65(n),n=XYZ_to_lin_sRGB(n),n}function a98_RGB_to_XYZ_D50(t){let n=t;
 /**
  * Convert an array of a98-rgb values in the range 0.0 - 1.0
  * to linear light (un-companded) form. Negative values are also now accepted

packages/color-helpers/src/conversions/srgb-to-hsl.ts

@@ -24,7 +24,7 @@ export function sRGB_to_HSL(RGB: Color): Color {
 	const light = (min + max) / 2;
 	const d = max - min;
 
-	let hue = NaN;
+	let hue = Number.NaN;
 	let sat = 0;
 
 	if (Math.round(d * 100_000) !== 0) {

packages/color-helpers/src/conversions/srgb-to-hue.ts

@@ -7,7 +7,7 @@ export function sRGB_to_Hue(x: Color): number {
 
 	const max = Math.max(red, green, blue);
 	const min = Math.min(red, green, blue);
-	let hue = NaN;
+	let hue = Number.NaN;
 	const d = max - min;
 
 	if (d !== 0) {

packages/css-calc/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to CSS Calc
 
+### Unreleased (patch)
+
+- Update `random()` to correctly handle extremely large ranges or extremely tiny steps.
+
 ### 2.1.1
 
 _December 27, 2024_

packages/css-calc/src/functions/random.ts

@@ -31,7 +31,9 @@ export function solveRandom(randomNode: FunctionNode, randomCachingOptions: stri
 		result = Number.NaN;
 	} else if (!Number.isFinite(bToken[4].value)) {
 		result = Number.NaN;
-	} else if (stepValueToken && (!Number.isFinite(stepValueToken[4].value) || stepValueToken[4].value <= 0)) {
+	} else if (!Number.isFinite(bToken[4].value - aToken[4].value)) {
+		result = Number.NaN;
+	} else if (stepValueToken && !Number.isFinite(stepValueToken[4].value)) {
 		result = aToken[4].value
 	} else {
 		const rnd = sfc32(
@@ -52,6 +54,15 @@ export function solveRandom(randomNode: FunctionNode, randomCachingOptions: stri
 			[min, max] = [max, min];
 		}
 
+		if (
+			stepValueToken && (
+				(stepValueToken[4].value <= 0) ||
+				((Math.abs(min - max) / stepValueToken[4].value) > 10_000_000_000)
+			)
+		) {
+			stepValueToken = null
+		}
+
 		if (stepValueToken) {
 			const delta = Math.abs(min - max);
 			const randomValue = rnd();

packages/css-calc/test/additional/random.mjs

@@ -93,12 +93,12 @@ assert.strictEqual(
 
 assert.strictEqual(
 	calc('random(-10px, 20px, by -50px)'),
-	'-10px',
+	'13.45151px',
 );
 
 assert.strictEqual(
 	calc('random(-10px, 20px, by 0px)'),
-	'-10px',
+	'-1.86008px',
 );
 
 assert.strictEqual(
@@ -140,3 +140,28 @@ assert.strictEqual(
 	calc('random(0deg, 360deg)'),
 	'173.25527deg',
 );
+
+assert.strictEqual(
+	calc('random(--foo, 10, 20, by -2)'),
+	'17.30236',
+);
+
+assert.strictEqual(
+	calc('random(10, 20, by 0.00005)'), // Number of steps is small enough
+	'18.7764',
+);
+
+assert.strictEqual(
+	calc('random(10, 20, by 0.000005)'), // Number of steps is small enough
+	'15.882265',
+);
+
+assert.strictEqual(
+	calc('random(0, 1, by 0.00000000005)'), // Number of steps is too large
+	'0.70517',
+);
+
+assert.strictEqual(
+	calc('random(0, 10000000, by 0.00000000005)'), // Number of steps is too large
+	'8282240.00987',
+);

packages/css-color-parser/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to CSS Color Parser
 
+### Unreleased (patch)
+
+- Use `Number.isNaN` instead of `NaN` for consistency.
+
 ### 3.0.7
 
 _December 27, 2024_

packages/css-color-parser/src/color-data.ts

@@ -353,25 +353,25 @@ function convertPowerlessComponentsToMissingComponents(a: Color, colorNotation:
 	switch (colorNotation) {
 		case ColorNotation.HSL:
 			if (!Number.isNaN(out[1]) && reducePrecision(out[1], 4) <= 0) {
-				out[0] = NaN;
+				out[0] = Number.NaN;
 			}
 
 			break;
 		case ColorNotation.HWB:
 			if ((Math.max(0, reducePrecision(out[1], 4)) + Math.max(0, reducePrecision(out[2], 4))) >= 100) {
-				out[0] = NaN;
+				out[0] = Number.NaN;
 			}
 
 			break;
 		case ColorNotation.LCH:
 			if (!Number.isNaN(out[1]) && reducePrecision(out[1], 4) <= 0) {
-				out[2] = NaN;
+				out[2] = Number.NaN;
 			}
 
 			break;
 		case ColorNotation.OKLCH:
 			if (!Number.isNaN(out[1]) && reducePrecision(out[1], 6) <= 0) {
-				out[2] = NaN;
+				out[2] = Number.NaN;
 			}
 
 			break;
@@ -386,50 +386,50 @@ export function convertPowerlessComponentsToZeroValuesForDisplay(a: Color, color
 	switch (colorNotation) {
 		case ColorNotation.HSL:
 			if (reducePrecision(out[2]) <= 0 || reducePrecision(out[2]) >= 100) {
-				out[0] = NaN;
-				out[1] = NaN;
+				out[0] = Number.NaN;
+				out[1] = Number.NaN;
 			}
 
 			if (reducePrecision(out[1]) <= 0) {
-				out[0] = NaN;
+				out[0] = Number.NaN;
 			}
 
 			break;
 		case ColorNotation.HWB:
 			if ((Math.max(0, reducePrecision(out[1])) + Math.max(0, reducePrecision(out[2]))) >= 100) {
-				out[0] = NaN;
+				out[0] = Number.NaN;
 			}
 			break;
 		case ColorNotation.Lab:
 			if (reducePrecision(out[0]) <= 0 || reducePrecision(out[0]) >= 100) {
-				out[1] = NaN;
-				out[2] = NaN;
+				out[1] = Number.NaN;
+				out[2] = Number.NaN;
 			}
 			break;
 		case ColorNotation.LCH:
 			if (reducePrecision(out[1]) <= 0) {
-				out[2] = NaN;
+				out[2] = Number.NaN;
 			}
 
 			if (reducePrecision(out[0]) <= 0 || reducePrecision(out[0]) >= 100) {
-				out[1] = NaN;
-				out[2] = NaN;
+				out[1] = Number.NaN;
+				out[2] = Number.NaN;
 			}
 			break;
 		case ColorNotation.OKLab:
 			if (reducePrecision(out[0]) <= 0 || reducePrecision(out[0]) >= 1) {
-				out[1] = NaN;
-				out[2] = NaN;
+				out[1] = Number.NaN;
+				out[2] = Number.NaN;
 			}
 			break;
 		case ColorNotation.OKLCH:
 			if (reducePrecision(out[1]) <= 0) {
-				out[2] = NaN;
+				out[2] = Number.NaN;
 			}
 
 			if (reducePrecision(out[0]) <= 0 || reducePrecision(out[0]) >= 1) {
-				out[1] = NaN;
-				out[2] = NaN;
+				out[1] = Number.NaN;
+				out[2] = Number.NaN;
 			}
 			break;
 	}
@@ -442,7 +442,7 @@ function carryForwardMissingComponents(a: Color, aIndices: Array<number>, b: Col
 
 	for (const i of aIndices) {
 		if (Number.isNaN(a[aIndices[i]])) {
-			output[bIndices[i]] = NaN;
+			output[bIndices[i]] = Number.NaN;
 		}
 	}
 

packages/css-color-parser/src/functions/color-mix.ts

@@ -577,7 +577,7 @@ function premultiply(x: number, alpha: number): number {
 	}
 
 	if (Number.isNaN(x)) {
-		return NaN;
+		return Number.NaN;
 	}
 
 	return x * alpha;
@@ -593,7 +593,7 @@ function un_premultiply(x: number, alpha: number): number {
 	}
 
 	if (Number.isNaN(x)) {
-		return NaN;
+		return Number.NaN;
 	}
 
 	return x / alpha;

packages/css-color-parser/src/functions/color-normalize-channel-values.ts

@@ -15,7 +15,7 @@ export function normalize_Color_ChannelValues(token: CSSToken, index: number, co
 			token[2],
 			token[3],
 			{
-				value: NaN,
+				value: Number.NaN,
 				type: NumberType.Number,
 			},
 		];

packages/css-color-parser/src/functions/hsl-normalize-channel-values.ts

@@ -79,7 +79,7 @@ export function normalize_modern_HSL_ChannelValues(token: CSSToken, index: numbe
 			token[2],
 			token[3],
 			{
-				value: NaN,
+				value: Number.NaN,
 				type: NumberType.Number,
 			},
 		];

packages/css-color-parser/src/functions/hwb-normalize-channel-values.ts

@@ -16,7 +16,7 @@ export function normalize_HWB_ChannelValues(token: CSSToken, index: number, colo
 			token[2],
 			token[3],
 			{
-				value: NaN,
+				value: Number.NaN,
 				type: NumberType.Number,
 			},
 		];

packages/css-color-parser/src/functions/lab-normalize-channel-values.ts

@@ -15,7 +15,7 @@ export function normalize_Lab_ChannelValues(token: CSSToken, index: number, colo
 			token[2],
 			token[3],
 			{
-				value: NaN,
+				value: Number.NaN,
 				type: NumberType.Number,
 			},
 		];

packages/css-color-parser/src/functions/lch-normalize-channel-values.ts

@@ -16,7 +16,7 @@ export function normalize_LCH_ChannelValues(token: CSSToken, index: number, colo
 			token[2],
 			token[3],
 			{
-				value: NaN,
+				value: Number.NaN,
 				type: NumberType.Number,
 			},
 		];

packages/css-color-parser/src/functions/oklab-normalize-channel-values.ts

@@ -15,7 +15,7 @@ export function normalize_OKLab_ChannelValues(token: CSSToken, index: number, co
 			token[2],
 			token[3],
 			{
-				value: NaN,
+				value: Number.NaN,
 				type: NumberType.Number,
 			},
 		];

packages/css-color-parser/src/functions/oklch-normalize-channel-values.ts

@@ -16,7 +16,7 @@ export function normalize_OKLCH_ChannelValues(token: CSSToken, index: number, co
 			token[2],
 			token[3],
 			{
-				value: NaN,
+				value: Number.NaN,
 				type: NumberType.Number,
 			},
 		];

packages/css-color-parser/src/functions/rgb-normalize-channel-values.ts

@@ -61,7 +61,7 @@ export function normalize_modern_sRGB_ChannelValues(token: CSSToken, index: numb
 			token[2],
 			token[3],
 			{
-				value: NaN,
+				value: Number.NaN,
 				type: NumberType.Number,
 			},
 		];