@jsenv/plugin-transpilation 1.4.93 → 1.4.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/plugin-transpilation",
-  "version": "1.4.93",
+  "version": "1.4.95",
   "description": "TODO",
   "license": "MIT",
   "repository": {
@@ -51,8 +51,8 @@
     "@babel/plugin-transform-template-literals": "7.25.9",
     "@babel/plugin-transform-typeof-symbol": "7.25.9",
     "@babel/plugin-transform-unicode-regex": "7.25.9",
-    "@jsenv/ast": "6.5.0",
-    "@jsenv/js-module-fallback": "1.3.57",
+    "@jsenv/ast": "6.5.2",
+    "@jsenv/js-module-fallback": "1.3.59",
     "@jsenv/runtime-compat": "1.3.1",
     "babel-plugin-transform-async-to-promises": "0.8.18",
     "construct-style-sheets-polyfill": "3.1.0",

package/src/import_attributes/jsenv_plugin_import_attributes.js

@@ -15,7 +15,7 @@ import { JS_QUOTES } from "@jsenv/utils/src/string/js_quotes.js";
 
 export const jsenvPluginImportAttributes = ({
   json = "auto",
-  css = "auto",
+  css = true,
   text = "auto",
 }) => {
   const transpilations = { json, css, text };
@@ -25,7 +25,11 @@ export const jsenvPluginImportAttributes = ({
       reference.filenameHint = `${urlToFilename(reference.url)}.js`;
     }
   };
-  const turnIntoJsModuleProxy = (reference, type) => {
+  const turnIntoJsModuleProxy = (
+    reference,
+    type,
+    { injectSearchParamForSideEffectImports },
+  ) => {
     reference.mutation = (magicSource) => {
       if (reference.subtype === "import_dynamic") {
         const { importTypeAttributeNode } = reference.astInfo;
@@ -52,12 +56,19 @@ export const jsenvPluginImportAttributes = ({
     };
     const newUrl = injectQueryParams(reference.url, {
       [`as_${type}_module`]: "",
+      ...(injectSearchParamForSideEffectImports && reference.isSideEffectImport
+        ? { side_effect: "" }
+        : {}),
     });
     markAsJsModuleProxy(reference, type);
     return newUrl;
   };
 
-  const createImportTypePlugin = ({ type, createUrlContent }) => {
+  const createImportTypePlugin = ({
+    type,
+    createUrlContent,
+    injectSearchParamForSideEffectImports,
+  }) => {
     return {
       name: `jsenv:import_type_${type}`,
       appliesDuring: "*",
@@ -95,7 +106,9 @@ export const jsenvPluginImportAttributes = ({
           return null;
         }
         if (reference.importAttributes.type === type) {
-          return turnIntoJsModuleProxy(reference, type);
+          return turnIntoJsModuleProxy(reference, type, {
+            injectSearchParamForSideEffectImports,
+          });
         }
         return null;
       },
@@ -144,6 +157,7 @@ export const jsenvPluginImportAttributes = ({
 
   const asCssModule = createImportTypePlugin({
     type: "css",
+    injectSearchParamForSideEffectImports: true,
     createUrlContent: (cssUrlInfo) => {
       const cssText = JS_QUOTES.escapeSpecialChars(cssUrlInfo.content, {
         // If template string is choosen and runtime do not support template literals
@@ -161,15 +175,38 @@ export const jsenvPluginImportAttributes = ({
       } else {
         inlineContentCall = `new __InlineContent__(${cssText}, { type: "text/css" })`;
       }
-      return {
-        content: `
-import ${JSON.stringify(cssUrlInfo.context.inlineContentClientFileUrl)};
+
+      let autoInject = cssUrlInfo.searchParams.has("side_effect");
+      let cssModuleAutoInjectCode = ``;
+      if (autoInject) {
+        if (cssUrlInfo.context.dev) {
+          cssModuleAutoInjectCode = `
+document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
+
+if (import.meta.hot) {
+  import.meta.hot.dispose(() => {
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+      (s) => s !== stylesheet,
+    );
+  });
+};
+`;
+        } else {
+          cssModuleAutoInjectCode = `
+document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
+`;
+        }
+      }
+      let cssModuleContent = `import ${JSON.stringify(cssUrlInfo.context.inlineContentClientFileUrl)};
 
 const inlineContent = ${inlineContentCall};
 const stylesheet = new CSSStyleSheet();
 stylesheet.replaceSync(inlineContent.text);
+${cssModuleAutoInjectCode}
+export default stylesheet;`;
 
-export default stylesheet;`,
+      return {
+        content: cssModuleContent,
         contentType: "text/javascript",
         type: "js_module",
         originalUrl: cssUrlInfo.originalUrl,