It's going to be green now

.github/workflows/demo_deployment.yaml

@@ -22,12 +22,12 @@ jobs:
     if: github.event_name != 'push' || github.ref_name != 'master'
     environment:
       name: Demo Development
-      url: ${{ steps.deploy.outputs.netlify_url }}
+      url: ${{ steps.deploy.outputs.unique_deploy_url }}
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
         with:
-          ref: dev
+          ref: pass-browser-list
           persist-credentials: false
 
       - name: Setup Node and install

build-scripts/minify-template-literals-loader.cjs

@@ -11,19 +11,36 @@
 
 const remapping = require("@ampproject/remapping");
 
-// minify-literals is ESM-only, so load it via dynamic import from this CJS loader.
-let minifyPromise;
-const getMinifier = () => {
-  if (!minifyPromise) {
-    minifyPromise = import("minify-literals").then((m) => m.minifyHTMLLiterals);
+// Map to cache loader promises per environment (e.g., 'modern', 'legacy')
+const loaderInitPromises = new Map();
+
+const initLoader = (env) => {
+  if (!loaderInitPromises.has(env)) {
+    const promise = Promise.all([
+      import("minify-literals"),
+      import("browserslist"),
+      import("lightningcss"),
+    ]).then(([minifyModule, browserslistModule, lightningcssModule]) => {
+      const browserslist = browserslistModule.default;
+      const { browserslistToTargets } = lightningcssModule;
+
+      // Request raw targets for the specific environment passed from rspack.cjs
+      const rawTargets = browserslist(null, { env });
+      const lightningcssTargets = browserslistToTargets(rawTargets);
+
+      return {
+        minifyHTMLLiterals: minifyModule.minifyHTMLLiterals,
+        lightningcssTargets,
+      };
+    });
+
+    loaderInitPromises.set(env, promise);
   }
-  return minifyPromise;
+  return loaderInitPromises.get(env);
 };
 
 // HTML options mirror the previous babel-plugin-template-html-minifier config
-// (html-minifier-next is option-compatible with html-minifier-terser). CSS in
-// css`` templates and inline <style> is handled by minify-literals' lightningcss
-// default.
+// (html-minifier-next is option-compatible with html-minifier-terser).
 //
 // `keepClosingSlash` is required for `svg`` templates: SVG elements such as
 // `<path />` and `<circle />` are not void elements in HTML, so dropping the
@@ -40,13 +57,28 @@ const htmlOptions = {
 
 module.exports = function minifyTemplateLiteralsLoader(source, map, meta) {
   const callback = this.async();
-  getMinifier()
-    .then((minifyHTMLLiterals) =>
+
+  // Read the environment from options (with fallback if unspecified)
+  const options = this.getOptions() || {};
+  const env = options.env;
+
+  console.log("Minifying template literals for %s build", env);
+
+  initLoader(env)
+    .then(({ minifyHTMLLiterals, lightningcssTargets }) => {
+      console.log(
+        "Targets %s for %s:",
+        JSON.stringify(lightningcssTargets),
+        this.resourcePath
+      );
       minifyHTMLLiterals(source, {
         fileName: this.resourcePath,
         html: htmlOptions,
-      })
-    )
+        css: {
+          targets: lightningcssTargets,
+        },
+      });
+    })
     .then((result) => {
       if (!result) {
         // No tagged templates changed; pass through untouched (incl. incoming map).

build-scripts/rspack.cjs

@@ -96,6 +96,9 @@ const createRspackConfig = ({
                   __dirname,
                   "minify-template-literals-loader.cjs"
                 ),
+                options: {
+                  env: latestBuild ? "modern" : "legacy",
+                },
               },
               !latestBuild &&
                 info.resource.startsWith(

src/components/ha-snowflakes.ts

@@ -1,6 +1,7 @@
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import type { HomeAssistant } from "../types";
 import { subscribeLabFeature } from "../data/labs";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
@@ -81,14 +82,14 @@ export class HaSnowflakes extends SubscribeMixin(LitElement) {
               class="snowflake ${
                 this.narrow && flake.id >= 30 ? "hide-narrow" : ""
               }"
-              style="
-                left: ${flake.left}%;
-                width: ${flake.size}px;
-                height: ${flake.size}px;
-                animation-duration: ${flake.duration}s;
-                animation-delay: ${flake.delay}s;
-                --rotation: ${flake.rotation}deg;
-              "
+              style=${styleMap({
+                left: `${flake.left}%`,
+                width: `${flake.size}px`,
+                height: `${flake.size}px`,
+                "animation-duration": `${flake.duration}s`,
+                "animation-delay": `${flake.delay}s`,
+                "--rotation": `${flake.rotation}deg`,
+              })}
               viewBox="0 0 16 16"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"