@jsenv/core 40.7.2 → 40.8.0

package/dist/build/build.js

@@ -7645,6 +7645,116 @@ const jsenvPluginNodeRuntime = ({ runtimeCompat }) => {
   };
 };
 
+/**
+ * Inline CSS would force to write the following boilerplate all the time:
+ * ```js
+ * const css = `body { color: red; }`;
+ * const stylesheet = new CSSStyleSheet();
+ * stylesheet.replaceSync(css);
+ * document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
+ * if (import.meta.hot) {
+ *   import.meta.hot.dispose(() => {
+ *       document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+ *           (s) => s !== stylesheet,
+ *       );
+ *   });
+ * }
+ * ```
+ *
+ * It would be nice to have a plugin that does this automatically with the following syntax
+ *
+ * ```js
+ * const css = `body { color: red; }`;
+ * import.meta.css = css;
+ * ```
+ *
+ */
+
+
+const jsenvPluginImportMetaCss = () => {
+  const importMetaCssClientFileUrl = import.meta.resolve(
+    "../js/import_meta_css.js",
+  );
+
+  return {
+    name: "jsenv:import_meta_css",
+    appliesDuring: "*",
+    transformUrlContent: {
+      js_module: async (urlInfo) => {
+        if (!urlInfo.content.includes("import.meta.css")) {
+          return null;
+        }
+        const { metadata } = await applyBabelPlugins({
+          babelPlugins: [babelPluginMetadataUsesImportMetaCss],
+          input: urlInfo.content,
+          inputIsJsModule: true,
+          inputUrl: urlInfo.originalUrl,
+          outputUrl: urlInfo.generatedUrl,
+        });
+        const { usesImportMetaCss } = metadata;
+        if (!usesImportMetaCss) {
+          return null;
+        }
+        return injectImportMetaCss(urlInfo, importMetaCssClientFileUrl);
+      },
+    },
+  };
+};
+
+const injectImportMetaCss = (urlInfo, importMetaCssClientFileUrl) => {
+  const importMetaCssClientFileReference = urlInfo.dependencies.inject({
+    parentUrl: urlInfo.url,
+    type: "js_import",
+    expectedType: "js_module",
+    specifier: importMetaCssClientFileUrl,
+  });
+  let content = urlInfo.content;
+  let prelude = `import { installImportMetaCss } from ${importMetaCssClientFileReference.generatedSpecifier};
+
+const remove = installImportMetaCss(import.meta);
+if (import.meta.hot) {
+  import.meta.hot.dispose(() => {
+    remove();
+  });
+}
+
+`;
+  return {
+    content: `${prelude.replace(/\n/g, "")}${content}`,
+  };
+};
+
+const babelPluginMetadataUsesImportMetaCss = () => {
+  return {
+    name: "metadata-uses-import-meta-css",
+    visitor: {
+      Program(programPath, state) {
+        let usesImportMetaCss = false;
+        programPath.traverse({
+          MemberExpression(path) {
+            const { node } = path;
+            const { object } = node;
+            if (object.type !== "MetaProperty") {
+              return;
+            }
+            const { property: objectProperty } = object;
+            if (objectProperty.name !== "meta") {
+              return;
+            }
+            const { property } = node;
+            const { name } = property;
+            if (name === "css") {
+              usesImportMetaCss = true;
+              path.stop();
+            }
+          },
+        });
+        state.file.metadata.usesImportMetaCss = usesImportMetaCss;
+      },
+    },
+  };
+};
+
 // https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#toc-stages-of-babel
 // https://github.com/cfware/babel-plugin-bundled-import-meta/blob/master/index.js
 // https://github.com/babel/babel/blob/f4edf62f6beeab8ae9f2b7f0b82f1b3b12a581af/packages/babel-helper-module-imports/src/index.js#L7
@@ -7656,13 +7766,13 @@ const babelPluginMetadataImportMetaHot = () => {
       Program(programPath, state) {
         Object.assign(
           state.file.metadata,
-          collectImportMetaProperties(programPath),
+          collectImportMetaHotProperties(programPath),
         );
       },
     },
   };
 };
-const collectImportMetaProperties = (programPath) => {
+const collectImportMetaHotProperties = (programPath) => {
   const importMetaHotPaths = [];
   let hotDecline = false;
   let hotAcceptSelf = false;
@@ -8942,6 +9052,7 @@ const getCorePlugins = ({
       ? [jsenvPluginAutoreloadOnServerRestart()]
       : []),
 
+    jsenvPluginImportMetaCss(),
     jsenvPluginCommonJsGlobals(),
     jsenvPluginImportMetaScenarios(),
     ...(scenarioPlaceholders ? [jsenvPluginGlobalScenarios()] : []),

package/dist/js/import_meta_css.js

@@ -0,0 +1,38 @@
+import "file:///Users/dmail/Documents/dev/jsenv/core/packages/internal/plugin-transpilation/src/babel/new_stylesheet/client/new_stylesheet.js";
+
+const installImportMetaCss = importMeta => {
+  let cssText = "";
+  let stylesheet = new CSSStyleSheet();
+  let adopted = false;
+  const css = {
+    toString: () => cssText,
+    update: value => {
+      cssText = value;
+      stylesheet.replaceSync(cssText);
+    },
+    inject: () => {
+      if (!adopted) {
+        document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
+        adopted = true;
+      }
+    },
+    remove: () => {
+      if (adopted) {
+        document.adoptedStyleSheets = document.adoptedStyleSheets.filter(s => s !== stylesheet);
+        adopted = false;
+      }
+    }
+  };
+  Object.defineProperty(importMeta, "css", {
+    get() {
+      return css;
+    },
+    set(value) {
+      css.update(value);
+      css.inject();
+    }
+  });
+  return css.remove;
+};
+
+export { installImportMetaCss };

package/dist/start_dev_server/start_dev_server.js

@@ -7685,6 +7685,116 @@ const jsenvPluginNodeRuntime = ({ runtimeCompat }) => {
   };
 };
 
+/**
+ * Inline CSS would force to write the following boilerplate all the time:
+ * ```js
+ * const css = `body { color: red; }`;
+ * const stylesheet = new CSSStyleSheet();
+ * stylesheet.replaceSync(css);
+ * document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
+ * if (import.meta.hot) {
+ *   import.meta.hot.dispose(() => {
+ *       document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+ *           (s) => s !== stylesheet,
+ *       );
+ *   });
+ * }
+ * ```
+ *
+ * It would be nice to have a plugin that does this automatically with the following syntax
+ *
+ * ```js
+ * const css = `body { color: red; }`;
+ * import.meta.css = css;
+ * ```
+ *
+ */
+
+
+const jsenvPluginImportMetaCss = () => {
+  const importMetaCssClientFileUrl = import.meta.resolve(
+    "../js/import_meta_css.js",
+  );
+
+  return {
+    name: "jsenv:import_meta_css",
+    appliesDuring: "*",
+    transformUrlContent: {
+      js_module: async (urlInfo) => {
+        if (!urlInfo.content.includes("import.meta.css")) {
+          return null;
+        }
+        const { metadata } = await applyBabelPlugins({
+          babelPlugins: [babelPluginMetadataUsesImportMetaCss],
+          input: urlInfo.content,
+          inputIsJsModule: true,
+          inputUrl: urlInfo.originalUrl,
+          outputUrl: urlInfo.generatedUrl,
+        });
+        const { usesImportMetaCss } = metadata;
+        if (!usesImportMetaCss) {
+          return null;
+        }
+        return injectImportMetaCss(urlInfo, importMetaCssClientFileUrl);
+      },
+    },
+  };
+};
+
+const injectImportMetaCss = (urlInfo, importMetaCssClientFileUrl) => {
+  const importMetaCssClientFileReference = urlInfo.dependencies.inject({
+    parentUrl: urlInfo.url,
+    type: "js_import",
+    expectedType: "js_module",
+    specifier: importMetaCssClientFileUrl,
+  });
+  let content = urlInfo.content;
+  let prelude = `import { installImportMetaCss } from ${importMetaCssClientFileReference.generatedSpecifier};
+
+const remove = installImportMetaCss(import.meta);
+if (import.meta.hot) {
+  import.meta.hot.dispose(() => {
+    remove();
+  });
+}
+
+`;
+  return {
+    content: `${prelude.replace(/\n/g, "")}${content}`,
+  };
+};
+
+const babelPluginMetadataUsesImportMetaCss = () => {
+  return {
+    name: "metadata-uses-import-meta-css",
+    visitor: {
+      Program(programPath, state) {
+        let usesImportMetaCss = false;
+        programPath.traverse({
+          MemberExpression(path) {
+            const { node } = path;
+            const { object } = node;
+            if (object.type !== "MetaProperty") {
+              return;
+            }
+            const { property: objectProperty } = object;
+            if (objectProperty.name !== "meta") {
+              return;
+            }
+            const { property } = node;
+            const { name } = property;
+            if (name === "css") {
+              usesImportMetaCss = true;
+              path.stop();
+            }
+          },
+        });
+        state.file.metadata.usesImportMetaCss = usesImportMetaCss;
+      },
+    },
+  };
+};
+
 // https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#toc-stages-of-babel
 // https://github.com/cfware/babel-plugin-bundled-import-meta/blob/master/index.js
 // https://github.com/babel/babel/blob/f4edf62f6beeab8ae9f2b7f0b82f1b3b12a581af/packages/babel-helper-module-imports/src/index.js#L7
@@ -7696,13 +7806,13 @@ const babelPluginMetadataImportMetaHot = () => {
       Program(programPath, state) {
         Object.assign(
           state.file.metadata,
-          collectImportMetaProperties(programPath),
+          collectImportMetaHotProperties(programPath),
         );
       },
     },
   };
 };
-const collectImportMetaProperties = (programPath) => {
+const collectImportMetaHotProperties = (programPath) => {
   const importMetaHotPaths = [];
   let hotDecline = false;
   let hotAcceptSelf = false;
@@ -8982,6 +9092,7 @@ const getCorePlugins = ({
       ? [jsenvPluginAutoreloadOnServerRestart()]
       : []),
 
+    jsenvPluginImportMetaCss(),
     jsenvPluginCommonJsGlobals(),
     jsenvPluginImportMetaScenarios(),
     ...(scenarioPlaceholders ? [jsenvPluginGlobalScenarios()] : []),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "40.7.2",
+  "version": "40.8.0",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "author": {
@@ -34,7 +34,7 @@
     "/src/"
   ],
   "volta": {
-    "node": "23.11.0",
+    "node": "24.1.0",
     "npm": "11.3.0"
   },
   "packageManager": "npm@11.3.0",
@@ -52,7 +52,9 @@
     "./src/kitchen/client/inline_content.js",
     "./dist/client/new_stylesheet/new_stylesheet.js",
     "./dist/client/inline_content/inline_content.js",
-    "./dist/client/directory_listing/jsenv_core_node_modules.js"
+    "./dist/client/directory_listing/jsenv_core_node_modules.js",
+    "./src/plugins/import_meta_css/client/import_meta_css.js",
+    "./dist/js/import_meta_css.js"
   ],
   "scripts": {
     "eslint": "npx eslint .",
@@ -140,4 +142,4 @@
     "prettier-plugin-sql": "0.19.0",
     "strip-ansi": "7.1.0"
   }
-}
+}

package/src/plugins/import_meta_css/client/import_meta_css.js

@@ -0,0 +1,42 @@
+export const installImportMetaCss = (importMeta) => {
+  let cssText = "";
+  let stylesheet = new CSSStyleSheet();
+  let adopted = false;
+
+  const css = {
+    toString: () => cssText,
+    update: (value) => {
+      cssText = value;
+      stylesheet.replaceSync(cssText);
+    },
+    inject: () => {
+      if (!adopted) {
+        document.adoptedStyleSheets = [
+          ...document.adoptedStyleSheets,
+          stylesheet,
+        ];
+        adopted = true;
+      }
+    },
+    remove: () => {
+      if (adopted) {
+        document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+          (s) => s !== stylesheet,
+        );
+        adopted = false;
+      }
+    },
+  };
+
+  Object.defineProperty(importMeta, "css", {
+    get() {
+      return css;
+    },
+    set(value) {
+      css.update(value);
+      css.inject();
+    },
+  });
+
+  return css.remove;
+};

package/src/plugins/import_meta_css/jsenv_plugin_import_meta_css.js

@@ -0,0 +1,110 @@
+/**
+ * Inline CSS would force to write the following boilerplate all the time:
+ * ```js
+ * const css = `body { color: red; }`;
+ * const stylesheet = new CSSStyleSheet();
+ * stylesheet.replaceSync(css);
+ * document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
+ * if (import.meta.hot) {
+ *   import.meta.hot.dispose(() => {
+ *       document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+ *           (s) => s !== stylesheet,
+ *       );
+ *   });
+ * }
+ * ```
+ *
+ * It would be nice to have a plugin that does this automatically with the following syntax
+ *
+ * ```js
+ * const css = `body { color: red; }`;
+ * import.meta.css = css;
+ * ```
+ *
+ */
+
+import { applyBabelPlugins } from "@jsenv/ast";
+
+export const jsenvPluginImportMetaCss = () => {
+  const importMetaCssClientFileUrl = import.meta.resolve(
+    "./client/import_meta_css.js",
+  );
+
+  return {
+    name: "jsenv:import_meta_css",
+    appliesDuring: "*",
+    transformUrlContent: {
+      js_module: async (urlInfo) => {
+        if (!urlInfo.content.includes("import.meta.css")) {
+          return null;
+        }
+        const { metadata } = await applyBabelPlugins({
+          babelPlugins: [babelPluginMetadataUsesImportMetaCss],
+          input: urlInfo.content,
+          inputIsJsModule: true,
+          inputUrl: urlInfo.originalUrl,
+          outputUrl: urlInfo.generatedUrl,
+        });
+        const { usesImportMetaCss } = metadata;
+        if (!usesImportMetaCss) {
+          return null;
+        }
+        return injectImportMetaCss(urlInfo, importMetaCssClientFileUrl);
+      },
+    },
+  };
+};
+
+const injectImportMetaCss = (urlInfo, importMetaCssClientFileUrl) => {
+  const importMetaCssClientFileReference = urlInfo.dependencies.inject({
+    parentUrl: urlInfo.url,
+    type: "js_import",
+    expectedType: "js_module",
+    specifier: importMetaCssClientFileUrl,
+  });
+  let content = urlInfo.content;
+  let prelude = `import { installImportMetaCss } from ${importMetaCssClientFileReference.generatedSpecifier};
+
+const remove = installImportMetaCss(import.meta);
+if (import.meta.hot) {
+  import.meta.hot.dispose(() => {
+    remove();
+  });
+}
+
+`;
+  return {
+    content: `${prelude.replace(/\n/g, "")}${content}`,
+  };
+};
+
+const babelPluginMetadataUsesImportMetaCss = () => {
+  return {
+    name: "metadata-uses-import-meta-css",
+    visitor: {
+      Program(programPath, state) {
+        let usesImportMetaCss = false;
+        programPath.traverse({
+          MemberExpression(path) {
+            const { node } = path;
+            const { object } = node;
+            if (object.type !== "MetaProperty") {
+              return;
+            }
+            const { property: objectProperty } = object;
+            if (objectProperty.name !== "meta") {
+              return;
+            }
+            const { property } = node;
+            const { name } = property;
+            if (name === "css") {
+              usesImportMetaCss = true;
+              path.stop();
+            }
+          },
+        });
+        state.file.metadata.usesImportMetaCss = usesImportMetaCss;
+      },
+    },
+  };
+};

package/src/plugins/import_meta_hot/babel_plugin_metadata_import_meta_hot.js

@@ -9,13 +9,13 @@ export const babelPluginMetadataImportMetaHot = () => {
       Program(programPath, state) {
         Object.assign(
           state.file.metadata,
-          collectImportMetaProperties(programPath),
+          collectImportMetaHotProperties(programPath),
         );
       },
     },
   };
 };
-const collectImportMetaProperties = (programPath) => {
+const collectImportMetaHotProperties = (programPath) => {
   const importMetaHotPaths = [];
   let hotDecline = false;
   let hotAcceptSelf = false;

package/src/plugins/plugins.js

@@ -16,6 +16,7 @@ import { jsenvPluginCommonJsGlobals } from "./commonjs_globals/jsenv_plugin_comm
 import { jsenvPluginImportMetaScenarios } from "./import_meta_scenarios/jsenv_plugin_import_meta_scenarios.js";
 import { jsenvPluginGlobalScenarios } from "./global_scenarios/jsenv_plugin_global_scenarios.js";
 import { jsenvPluginNodeRuntime } from "./node_runtime/jsenv_plugin_node_runtime.js";
+import { jsenvPluginImportMetaCss } from "./import_meta_css/jsenv_plugin_import_meta_css.js";
 // autoreload
 import { jsenvPluginImportMetaHot } from "./import_meta_hot/jsenv_plugin_import_meta_hot.js";
 import { jsenvPluginAutoreload } from "./autoreload/jsenv_plugin_autoreload.js";
@@ -126,6 +127,7 @@ export const getCorePlugins = ({
       ? [jsenvPluginAutoreloadOnServerRestart()]
       : []),
 
+    jsenvPluginImportMetaCss(),
     jsenvPluginCommonJsGlobals(),
     jsenvPluginImportMetaScenarios(),
     ...(scenarioPlaceholders ? [jsenvPluginGlobalScenarios()] : []),