@jsenv/plugin-transpilation 1.6.3 → 1.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/plugin-transpilation",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "type": "module",
   "description": "TODO",
   "repository": {
@@ -49,8 +49,8 @@
     "@babel/plugin-transform-unicode-property-regex": "7.29.7",
     "@babel/plugin-transform-unicode-regex": "7.29.7",
     "@jsenv/ast": "6.9.3",
-    "@jsenv/js-module-fallback": "1.5.2",
-    "@jsenv/sourcemap": "1.4.2",
+    "@jsenv/js-module-fallback": "1.5.3",
+    "@jsenv/sourcemap": "1.4.3",
     "@jsenv/urls": "2.9.10",
     "@jsenv/utils": "2.3.1",
     "babel-plugin-transform-async-to-promises": "0.8.18",

package/src/css/apply_css_transpilation.js

@@ -18,7 +18,45 @@ export const applyCssTranspilation = async ({
       customMedia: true,
     },
   });
-  return { content: String(code), sourcemap: map };
+  return {
+    content: defineLightDarkSwitchIfNeeded(String(code)),
+    sourcemap: map,
+  };
+};
+
+// The two custom properties lightningcss lowers "light-dark()" into. The pair
+// works as a switch: exactly one of them computes to the guaranteed-invalid
+// "initial" at a time, so exactly one of the two var() fallbacks survives.
+const LIGHT_DARK_SWITCH_CSS = `
+:root {
+  --lightningcss-light: initial;
+  --lightningcss-dark: ;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --lightningcss-light: ;
+    --lightningcss-dark: initial;
+  }
+}
+`;
+
+// lightningcss writes that switch into the rule declaring "color-scheme", and
+// only there: a stylesheet lowering light-dark() without one references two
+// properties nobody defines, both var() fall back, the two values concatenate
+// and the declaration is dropped as invalid — a color silently missing rather
+// than an approximation of it. Each module owning a stylesheet of its own (see
+// jsenv:import_meta_css), the sheet declaring color-scheme is almost never the
+// sheet using light-dark(), so the switch is written here instead. Appended
+// rather than prepended: nothing else declares these two, so cascade order does
+// not matter, and the sourcemap of what comes before stays exact.
+const defineLightDarkSwitchIfNeeded = (css) => {
+  if (!css.includes("var(--lightningcss-light")) {
+    return css;
+  }
+  if (css.includes("--lightningcss-light:")) {
+    return css;
+  }
+  return `${css}${LIGHT_DARK_SWITCH_CSS}`;
 };
 
 // runtimeCompat names on the left, lightningcss target names on the right