Holiday Snow: switch to a CSS-only implementation

Fixes #40569

Moving away from Javascript:

- should be better for performance
- will avoid glitches like the one described in #40569
- will avoid issues with other parts of the site, such as notifications or comments. (see p1734109348431089-slack-C029GN3KD )

projects/packages/jetpack-mu-wpcom/changelog/update-snow-scss

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Holiday Snow: switch to a CSS-only implementation.

projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/class-holiday-snow.php

@@ -52,6 +52,8 @@ public static function is_snow_season() {
 	 * p2 is currently not compatible with Holiday Snow.
 	 * This covers both P2 and P2020 themes.
 	 *
+	 * @deprecated $$next-version$$
+	 *
 	 * @return bool
 	 */
 	private static function is_p2() {
@@ -74,7 +76,7 @@ public static function is_snow_enabled() {
 	 * @return void
 	 */
 	public static function init() {
-		if ( ! self::is_snow_season() || self::is_p2() ) {
+		if ( ! self::is_snow_season() ) {
 			return;
 		}
 
@@ -84,12 +86,23 @@ public static function init() {
 		add_action( 'update_option_' . self::HOLIDAY_SNOW_OPTION_NAME, array( __CLASS__, 'holiday_snow_option_updated' ) );
 
 		if ( self::is_snow_enabled() ) {
+			add_action( 'wp_footer', array( __CLASS__, 'holiday_snow_markup' ) );
 			add_action( 'wp_enqueue_scripts', array( __CLASS__, 'holiday_snow_script' ) );
 		}
 	}
 
 	/**
-	 * Enqueue the snowstorm script on the frontend.
+	 * Add the snowstorm markup to the footer.
+	 *
+	 * @return void
+	 * @since $$next-version$$
+	 */
+	public static function holiday_snow_markup() {
+		echo '<div id="jetpack-holiday-snow"></div>';
+	}
+
+	/**
+	 * Enqueue the snowstorm CSS on the frontend.
 	 *
 	 * @return void
 	 */
@@ -118,20 +131,23 @@ public static function holiday_snow_script() {
 		 * Filter the URL of the snowstorm script.
 		 *
 		 * @since $$next-version$$
+		 * @deprecated $$next-version$$ We've switched to a CSS-only snow effect.
 		 *
 		 * @param string $snowstorm_url URL of the snowstorm script.
 		 */
-		$snowstorm_url = apply_filters(
+		$snowstorm_url = apply_filters_deprecated( // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
 			'jetpack_holiday_snow_js_url',
-			plugins_url( 'snowstorm.js', __FILE__ )
+			array( plugins_url( 'snowstorm.js', __FILE__ ) ),
+			'$$next-version$$',
+			'',
+			'This filter is no longer useful. We use a CSS-only snow effect instead.'
 		);
 
-		wp_enqueue_script(
-			'snowstorm',
-			$snowstorm_url,
+		wp_enqueue_style(
+			'holiday-snow',
+			plugins_url( 'build/holiday-snow/holiday-snow.css', \Automattic\Jetpack\Jetpack_Mu_Wpcom::BASE_FILE ),
 			array(),
-			\Automattic\Jetpack\Jetpack_Mu_Wpcom::PACKAGE_VERSION,
-			true
+			\Automattic\Jetpack\Jetpack_Mu_Wpcom::PACKAGE_VERSION
 		);
 	}
 

projects/packages/jetpack-mu-wpcom/src/features/holiday-snow/holiday-snow.scss

@@ -0,0 +1,67 @@
+/**
+ * Holiday Snow
+ * Credits: https://codepen.io/keithclark/pen/DjXzBw
+ *
+ * @package automattic/jetpack-mu-wpcom
+ */
+
+$grid_width: 600;
+$snow_density: 15;
+$snow_speed: 9s;
+$snow_selector: '#jetpack-holiday-snow';
+
+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,
+				rgba(255, 255, 255, $alpha) 50%,
+				rgba(0, 0, 0, 0));
+	}
+
+	#{$snow_selector} {
+		display: inline !important;
+		background-color: rgba(0, 0, 0, 0.05);
+		z-index: 9999999999 !important;
+	}
+
+	#{$snow_selector},
+	#{$snow_selector}:before,
+	#{$snow_selector}:after {
+		pointer-events: none;
+		position: fixed;
+		top: -600px;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		background-image: $grad;
+		background-size: 600px 600px;
+		animation: snowstorm $snow_speed linear infinite;
+		content: "";
+	}
+
+	#{$snow_selector}:after {
+		margin-left: -$grid_width/3 + px;
+		opacity: .4;
+		animation-duration: $snow_speed * 2;
+		animation-direction: reverse;
+		filter: blur(3px);
+	}
+
+	#{$snow_selector}:before {
+		animation-duration: $snow_speed * 3;
+		animation-direction: reverse;
+		margin-left: -$grid_width/2 + px;
+		opacity: .65;
+		filter: blur(1.5px);
+	}
+
+	@keyframes snowstorm {
+		to {
+			transform: translateY($grid_width + px);
+		}
+	}
+}

projects/packages/jetpack-mu-wpcom/webpack.config.js

@@ -16,6 +16,7 @@ module.exports = [
 				'./src/features/custom-css/custom-css/js/core-customizer-css-preview.js',
 			'customizer-control': './src/features/custom-css/custom-css/css/customizer-control.css',
 			'error-reporting': './src/features/error-reporting/index.js',
+			'holiday-snow': './src/features/holiday-snow/holiday-snow.scss',
 			'jetpack-global-styles': './src/features/jetpack-global-styles/index.js',
 			'jetpack-global-styles-customizer-fonts':
 				'./src/features/jetpack-global-styles/customizer-fonts/index.js',