@jsenv/core 40.7.2 → 40.8.1

package/dist/build/build.js

@@ -2134,6 +2134,9 @@ const INJECTIONS = {
     return { [injectionSymbol]: "global", value };
   },
   optional: (value) => {
+    if (value && value[injectionSymbol] === "optional") {
+      return value;
+    }
     return { [injectionSymbol]: "optional", value };
   },
 };
@@ -2949,6 +2952,7 @@ const createKitchen = ({
       isSupportedOnCurrentClients: memoizeIsSupported(clientRuntimeCompat),
       isSupportedOnFutureClients: memoizeIsSupported(runtimeCompat),
       isPlaceholderInjection,
+      INJECTIONS,
       getPluginMeta: null,
       sourcemaps,
       outDirectoryUrl,
@@ -7645,6 +7649,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 +7770,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 +9056,7 @@ const getCorePlugins = ({
       ? [jsenvPluginAutoreloadOnServerRestart()]
       : []),
 
+    jsenvPluginImportMetaCss(),
     jsenvPluginCommonJsGlobals(),
     jsenvPluginImportMetaScenarios(),
     ...(scenarioPlaceholders ? [jsenvPluginGlobalScenarios()] : []),

package/dist/build/jsenv_core_packages.js

@@ -2517,7 +2517,10 @@ const comparePathnames = (leftPathame, rightPathname) => {
     const rightPart = rightPartArray[i];
     i++;
     // local comparison comes first
-    const comparison = leftPart.localeCompare(rightPart);
+    const comparison = leftPart.localeCompare(rightPart, undefined, {
+      numeric: true,
+      sensitivity: "base",
+    });
     if (comparison !== 0) {
       return comparison;
     }

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/jsenv_core.js

@@ -7,6 +7,9 @@ const INJECTIONS = {
     return { [injectionSymbol]: "global", value };
   },
   optional: (value) => {
+    if (value && value[injectionSymbol] === "optional") {
+      return value;
+    }
     return { [injectionSymbol]: "optional", value };
   },
 };

package/dist/start_dev_server/jsenv_core_packages.js

@@ -1822,7 +1822,10 @@ const comparePathnames = (leftPathame, rightPathname) => {
     const rightPart = rightPartArray[i];
     i++;
     // local comparison comes first
-    const comparison = leftPart.localeCompare(rightPart);
+    const comparison = leftPart.localeCompare(rightPart, undefined, {
+      numeric: true,
+      sensitivity: "base",
+    });
     if (comparison !== 0) {
       return comparison;
     }

package/dist/start_dev_server/start_dev_server.js

@@ -2174,6 +2174,9 @@ const INJECTIONS = {
     return { [injectionSymbol]: "global", value };
   },
   optional: (value) => {
+    if (value && value[injectionSymbol] === "optional") {
+      return value;
+    }
     return { [injectionSymbol]: "optional", value };
   },
 };
@@ -2989,6 +2992,7 @@ const createKitchen = ({
       isSupportedOnCurrentClients: memoizeIsSupported(clientRuntimeCompat),
       isSupportedOnFutureClients: memoizeIsSupported(runtimeCompat),
       isPlaceholderInjection,
+      INJECTIONS,
       getPluginMeta: null,
       sourcemaps,
       outDirectoryUrl,
@@ -7685,6 +7689,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 +7810,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 +9096,7 @@ const getCorePlugins = ({
       ? [jsenvPluginAutoreloadOnServerRestart()]
       : []),
 
+    jsenvPluginImportMetaCss(),
     jsenvPluginCommonJsGlobals(),
     jsenvPluginImportMetaScenarios(),
     ...(scenarioPlaceholders ? [jsenvPluginGlobalScenarios()] : []),

package/package.json

@@ -1,22 +1,22 @@
 {
   "name": "@jsenv/core",
-  "version": "40.7.2",
+  "version": "40.8.1",
   "description": "Tool to develop, test and build js projects",
-  "license": "MIT",
-  "author": {
-    "name": "dmail",
-    "email": "dmaillard06@gmail.com"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/jsenv/core"
   },
-  "engines": {
-    "node": ">=20.8.0"
-  },
-  "publishConfig": {
-    "access": "public"
+  "license": "MIT",
+  "author": {
+    "name": "dmail",
+    "email": "dmaillard06@gmail.com"
   },
+  "sideEffects": [
+    "./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"
+  ],
   "type": "module",
   "imports": {},
   "exports": {
@@ -33,11 +33,6 @@
     "/dist/",
     "/src/"
   ],
-  "volta": {
-    "node": "23.11.0",
-    "npm": "11.3.0"
-  },
-  "packageManager": "npm@11.3.0",
   "workspaces": [
     "./packages/backend/*",
     "./packages/frontend/*",
@@ -48,49 +43,44 @@
     "./packages/related/cli/*",
     "./packages/tooling/*"
   ],
-  "sideEffects": [
-    "./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"
-  ],
   "scripts": {
-    "eslint": "npx eslint .",
-    "test": "node --conditions=dev:jsenv ./scripts/test/test.mjs",
-    "test:packages": "npm run test -- ./packages/",
     "build": "node --conditions=dev:jsenv ./scripts/build/build.mjs",
+    "build:file_size": "node ./scripts/build/build_file_size.mjs --log",
     "build:packages": "npm run build --workspaces --if-present --conditions=developement",
-    "monorepo:sync_packages_versions": "node ./scripts/monorepo/sync_packages_versions.mjs",
+    "database:install": "npx @jsenv/database install",
+    "database:manage": "node --conditions=dev:jsenv ./packages/backend/database/src/cli/manage.js",
+    "database:setup": "npm run database:setup --workspaces --if-present --conditions=dev:jsenv",
+    "database:start": "npx @jsenv/database start",
+    "database:stop": "npx @jsenv/database stop",
+    "dev": "node --watch --conditions=dev:jsenv ./scripts/dev/dev.mjs",
+    "dev:route-inspector": "node --watch --conditions=dev:jsenv ./packages/backend/server/tests/route_inspector/start_server.js",
+    "eslint": "npx eslint .",
+    "https:setup": "npx @jsenv/https-local setup",
+    "md:build": "node ./docs/build.js",
+    "monorepo:node_modules_clear": "npx @jsenv/filesystem clear **/node_modules/",
     "monorepo:publish": "node ./scripts/monorepo/publish_packages.mjs",
+    "monorepo:sync_packages_versions": "node ./scripts/monorepo/sync_packages_versions.mjs",
     "monorepo:upgrade_versions": "node ./scripts/monorepo/upgrade_external_versions.mjs",
-    "monorepo:node_modules_clear": "npx @jsenv/filesystem clear **/node_modules/",
-    "md:build": "node ./docs/build.js",
+    "oto:start": "npm run start -w oto",
     "performances": "node --expose-gc ./scripts/performance/generate_performance_report.mjs --log --once",
-    "build:file_size": "node ./scripts/build/build_file_size.mjs --log",
+    "playwright:install": "npx playwright install-deps && npx playwright install",
+    "prepublishOnly": "npm run build",
     "prettier": "prettier --write .",
-    "test:snapshot_clear": "npx @jsenv/filesystem clear **/tests/**/side_effects/",
+    "test": "node --conditions=dev:jsenv ./scripts/test/test.mjs",
     "test:ci": "CI=1 npm run test",
-    "test:packages:ci": "CI=1 npm run workspace:test",
     "test:only_dev_server_errors": "node --conditions=dev:jsenv ./tests/dev_server/errors/dev_errors_snapshots.test.mjs",
-    "dev": "node --watch --conditions=dev:jsenv ./scripts/dev/dev.mjs",
-    "dev:route-inspector": "node --watch --conditions=dev:jsenv ./packages/backend/server/tests/route_inspector/start_server.js",
-    "playwright:install": "npx playwright install-deps && npx playwright install",
-    "https:setup": "npx @jsenv/https-local setup",
-    "prepublishOnly": "npm run build",
-    "database:install": "npx @jsenv/database install",
-    "database:start": "npx @jsenv/database start",
-    "database:stop": "npx @jsenv/database stop",
-    "database:setup": "npx @jsenv/database setup",
-    "oto:start": "npm run start -w oto"
+    "test:packages": "npm run test -- ./packages/",
+    "test:packages:ci": "CI=1 npm run workspace:test",
+    "test:snapshot_clear": "npx @jsenv/filesystem clear **/tests/**/side_effects/"
   },
   "dependencies": {
     "@financial-times/polyfill-useragent-normaliser": "1.10.2",
-    "@jsenv/ast": "6.7.6",
-    "@jsenv/js-module-fallback": "1.4.18",
-    "@jsenv/plugin-bundling": "2.9.8",
+    "@jsenv/ast": "6.7.7",
+    "@jsenv/js-module-fallback": "1.4.19",
+    "@jsenv/plugin-bundling": "2.9.9",
     "@jsenv/plugin-minification": "1.7.0",
-    "@jsenv/plugin-supervisor": "1.7.3",
-    "@jsenv/plugin-transpilation": "1.5.50",
+    "@jsenv/plugin-supervisor": "1.7.4",
+    "@jsenv/plugin-transpilation": "1.5.51",
     "@jsenv/server": "16.1.2",
     "@jsenv/sourcemap": "1.3.9",
     "react-table": "7.8.0"
@@ -137,7 +127,19 @@
     "prettier": "3.5.3",
     "prettier-plugin-embed": "0.5.0",
     "prettier-plugin-organize-imports": "4.1.0",
+    "prettier-plugin-packagejson": "2.5.15",
     "prettier-plugin-sql": "0.19.0",
     "strip-ansi": "7.1.0"
+  },
+  "packageManager": "npm@11.3.0",
+  "engines": {
+    "node": ">=20.8.0"
+  },
+  "volta": {
+    "node": "24.1.0",
+    "npm": "11.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/kitchen/kitchen.js

@@ -17,7 +17,10 @@ import {
   determineSourcemapFileUrl,
 } from "./out_directory_url.js";
 import { createUrlGraph } from "./url_graph/url_graph.js";
-import { isPlaceholderInjection } from "./url_graph/url_info_injections.js";
+import {
+  INJECTIONS,
+  isPlaceholderInjection,
+} from "./url_graph/url_info_injections.js";
 import { createUrlInfoTransformer } from "./url_graph/url_info_transformations.js";
 import { urlSpecifierEncoding } from "./url_graph/url_specifier_encoding.js";
 
@@ -104,6 +107,7 @@ export const createKitchen = ({
       isSupportedOnCurrentClients: memoizeIsSupported(clientRuntimeCompat),
       isSupportedOnFutureClients: memoizeIsSupported(runtimeCompat),
       isPlaceholderInjection,
+      INJECTIONS,
       getPluginMeta: null,
       sourcemaps,
       outDirectoryUrl,

package/src/kitchen/url_graph/url_info_injections.js

@@ -7,6 +7,9 @@ export const INJECTIONS = {
     return { [injectionSymbol]: "global", value };
   },
   optional: (value) => {
+    if (value && value[injectionSymbol] === "optional") {
+      return value;
+    }
     return { [injectionSymbol]: "optional", value };
   },
 };

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()] : []),