From 3ed576dddb5ab6db78afe0202dfa2731ec45f68e Mon Sep 17 00:00:00 2001
From: Brad Jorsch <anomiex@users.noreply.github.com>
Date: Wed, 18 Dec 2024 15:12:18 -0500
Subject: [PATCH] ci: Check for use of SCSS `random()` (#40666)

Normal CSS can't do random numbers. SCSS has a `random()` function,
which produces random values in the output CSS. Unfortunately this makes
the built CSS change for each build, which means that every PR merged
will require a Simple deploy. To avoid this, add a CI check looking for
calls to the function in all `.scss` files.

Also do the same for `unique-id()`.
---
 .github/files/lint-project-structure.sh            | 11 +++++++++++
 .../changelog/update-no-scss-random                |  4 ++++
 .../src/features/holiday-snow/holiday-snow.scss    | 14 +++++++++++---
 3 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 projects/packages/jetpack-mu-wpcom/changelog/update-no-scss-random

diff --git a/.github/files/lint-project-structure.sh b/.github/files/lint-project-structure.sh
index 175f7e6c4575f..194bf66cd9d32 100755
--- a/.github/files/lint-project-structure.sh
+++ b/.github/files/lint-project-structure.sh
@@ -635,4 +635,15 @@ while IFS= read -r FILE; do
 	done < <( git grep -h --line-number --column -o "$RE" "$FILE" )
 done < <( git -c core.quotepath=off grep -l "$RE" )
 
+# - Check for `random(` in scss files.
+debug "Checking for SCSS random."
+while IFS= read -r FILE; do
+	EXIT=1
+	while IFS=: read -r LINE COL X; do
+		X=${X%(}
+		echo "::error file=$FILE,line=$LINE,col=$COL::Do not use SCSS \`$X()\`. It means that every build will have different CSS, dirtying the diffs (and making for redudant Simple deploys if this gets into a relevant plugin)."
+	done < <( git grep -h --line-number --column -o '\(random\|unique-id\)\s*(' "$FILE" )
+done < <( git -c core.quotepath=off grep -l '\(random\|unique-id\)\s*(' '*.sass' '*.scss' )
+
+
 exit $EXIT
diff --git a/projects/packages/jetpack-mu-wpcom/changelog/update-no-scss-random b/projects/packages/jetpack-mu-wpcom/changelog/update-no-scss-random
new file mode 100644
index 0000000000000..dfbf589fd7a43
--- /dev/null
+++ b/projects/packages/jetpack-mu-wpcom/changelog/update-no-scss-random
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Holiday snow: Replace SCSS `random()` with pregenerated arrays of random numbers to make builds reproducable.
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/holiday-snow.scss b/projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/holiday-snow.scss
index c548402cf8483..093158e54a445 100644
--- a/projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/holiday-snow.scss
+++ b/projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/holiday-snow.scss
@@ -10,14 +10,22 @@ $snow_density: 10;
 $snow_speed: 9s;
 $snow_selector: '#jetpack-holiday-snow';
 
+// Random numbers, to replace the `random` function so we can have reproducable builds.
+// Needs $snow_density entries. Intergers 3-6.
+$snow_sizes: 6, 6, 3, 5, 3, 4, 6, 5, 4, 6;
+// Needs $snow_density entries. Floats 0.6-1.0.
+$snow_alphas: 0.8, 1, 0.9, 1, 0.6, 1, 1, 1, 0.8, 1;
+// Needs $snow_density * 2 entries. Floats 0-1.
+$snow_positions: 0.17857, 0.30782, 0.65476, 0.04422, 0.31145, 0.02525, 0.72542, 0.19153, 0.26094, 0.12121, 0.47466, 0.76351, 0.46259, 0.92007, 0.24915, 0.44915, 0.19088, 0.86993, 0.62925, 0.68707;
+
 html {
 	$grad: (
 	);
 
 	@for $i from 0 to $snow_density {
-		$v: random(4) + 2;
-		$alpha: random(5) * .1 + .5;
-		$grad: $grad, radial-gradient($v+px $v+px at (random($grid_width - $v * 2) + $v)+px (random($grid_width - $v * 2) + $v)+px,
+		$v: nth($snow_sizes, $i + 1);
+		$alpha: nth($snow_alphas, $i + 1);
+		$grad: $grad, radial-gradient($v+px $v+px at (round(nth($snow_positions, $i * 2 + 1) * ($grid_width - $v * 2)) + $v)+px (round(nth($snow_positions, $i * 2 + 2) * ($grid_width - $v * 2)) + $v)+px,
 				rgba(255, 255, 255, $alpha) 50%,
 				rgba(0, 0, 0, 0));
 	}