@jsenv/core 41.5.8 → 41.5.9

package/dist/build/build.js

@@ -8520,30 +8520,46 @@ const jsenvPluginImportMetaCss = () => {
           const relativeUrl = packageName
             ? `${packageName}${relativePathInPackage}`
             : relativePathInPackage;
-          const { code } = await applyBabelPlugins({
-            babelPlugins: [
-              [babelPluginRewriteImportMetaCssAssignment, { relativeUrl }],
-            ],
-            input: urlInfo.content,
-            inputIsJsModule: true,
-            inputUrl: urlInfo.originalUrl,
-            outputUrl: urlInfo.generatedUrl,
-            // the map would be dropped: the content sent back carries none
-            options: { sourceMaps: false },
+          // wrap each `import.meta.css = X` right-hand side into
+          // [X, relativeUrl]: two insertions around the existing expression,
+          // so content and sourcemap stay untouched everywhere else
+          const assignmentsToWrap = [];
+          visitJsAst(urlInfo.contentAst, {
+            AssignmentExpression: (node) => {
+              if (node.operator !== "=") {
+                return;
+              }
+              if (getImportMetaPropertyName(node.left) !== "css") {
+                return;
+              }
+              if (node.right.type === "ArrayExpression") {
+                // already in array form (pre-built file)
+                return;
+              }
+              assignmentsToWrap.push(node);
+            },
           });
-          if (code === urlInfo.content) {
-            // all assignments were already in array form (pre-built file) — nothing to do
+          if (assignmentsToWrap.length === 0) {
             return null;
           }
+          const magicSource = createMagicSource(urlInfo.content);
+          for (const assignment of assignmentsToWrap) {
+            const { right } = assignment;
+            magicSource.insert({ position: right.start, text: "[" });
+            magicSource.insert({
+              position: right.end,
+              text: `, ${JSON.stringify(relativeUrl)}]`,
+            });
+          }
           return injectImportMetaCss(urlInfo, {
-            content: code,
+            magicSource,
             importFrom: importMetaCssBuildClientFileUrl,
             importName: "installImportMetaCssBuild",
             importAs: "__installImportMetaCssBuild__",
           });
         }
         return injectImportMetaCss(urlInfo, {
-          content: urlInfo.content,
+          magicSource: createMagicSource(urlInfo.content),
           importFrom: importMetaCssDevClientFileUrl,
           importName: "installImportMetaCssDev",
           importAs: "__installImportMetaCssDev__",
@@ -8576,44 +8592,9 @@ const hasModuleScopeAssignment = (ast) => {
   return false;
 };
 
-const babelPluginRewriteImportMetaCssAssignment = (
-  { types: t },
-  { relativeUrl },
-) => {
-  return {
-    name: "rewrite-import-meta-css-assignment",
-    visitor: {
-      AssignmentExpression(path) {
-        const { left, right } = path.node;
-        if (left.type !== "MemberExpression") {
-          return;
-        }
-        const { object, property } = left;
-        if (object.type !== "MetaProperty") {
-          return;
-        }
-        if (object.meta.name !== "import" || object.property.name !== "meta") {
-          return;
-        }
-        if (property.name !== "css") {
-          return;
-        }
-        // already transformed (e.g. pre-built file): leave as-is
-        if (right.type === "ArrayExpression") {
-          return;
-        }
-        path.node.right = t.arrayExpression([
-          right,
-          t.stringLiteral(relativeUrl),
-        ]);
-      },
-    },
-  };
-};
-
 const injectImportMetaCss = (
   urlInfo,
-  { content, importFrom, importName, importAs, hot },
+  { magicSource, importFrom, importName, importAs, hot },
 ) => {
   const importMetaCssClientFileReference = urlInfo.dependencies.inject({
     parentUrl: urlInfo.url,
@@ -8648,9 +8629,8 @@ ${importVariableName}(import.meta);
 
 `;
 
-  return {
-    content: `${prelude.replace(/\n/g, "")}${content}`,
-  };
+  magicSource.prepend(prelude);
+  return magicSource.toContentAndSourcemap();
 };
 
 // Some "smart" default applied to decide what should hot reload / fullreload:

package/dist/start_dev_server/start_dev_server.js

@@ -6245,30 +6245,46 @@ const jsenvPluginImportMetaCss = () => {
           const relativeUrl = packageName
             ? `${packageName}${relativePathInPackage}`
             : relativePathInPackage;
-          const { code } = await applyBabelPlugins({
-            babelPlugins: [
-              [babelPluginRewriteImportMetaCssAssignment, { relativeUrl }],
-            ],
-            input: urlInfo.content,
-            inputIsJsModule: true,
-            inputUrl: urlInfo.originalUrl,
-            outputUrl: urlInfo.generatedUrl,
-            // the map would be dropped: the content sent back carries none
-            options: { sourceMaps: false },
+          // wrap each `import.meta.css = X` right-hand side into
+          // [X, relativeUrl]: two insertions around the existing expression,
+          // so content and sourcemap stay untouched everywhere else
+          const assignmentsToWrap = [];
+          visitJsAst(urlInfo.contentAst, {
+            AssignmentExpression: (node) => {
+              if (node.operator !== "=") {
+                return;
+              }
+              if (getImportMetaPropertyName(node.left) !== "css") {
+                return;
+              }
+              if (node.right.type === "ArrayExpression") {
+                // already in array form (pre-built file)
+                return;
+              }
+              assignmentsToWrap.push(node);
+            },
           });
-          if (code === urlInfo.content) {
-            // all assignments were already in array form (pre-built file) — nothing to do
+          if (assignmentsToWrap.length === 0) {
             return null;
           }
+          const magicSource = createMagicSource(urlInfo.content);
+          for (const assignment of assignmentsToWrap) {
+            const { right } = assignment;
+            magicSource.insert({ position: right.start, text: "[" });
+            magicSource.insert({
+              position: right.end,
+              text: `, ${JSON.stringify(relativeUrl)}]`,
+            });
+          }
           return injectImportMetaCss(urlInfo, {
-            content: code,
+            magicSource,
             importFrom: importMetaCssBuildClientFileUrl,
             importName: "installImportMetaCssBuild",
             importAs: "__installImportMetaCssBuild__",
           });
         }
         return injectImportMetaCss(urlInfo, {
-          content: urlInfo.content,
+          magicSource: createMagicSource(urlInfo.content),
           importFrom: importMetaCssDevClientFileUrl,
           importName: "installImportMetaCssDev",
           importAs: "__installImportMetaCssDev__",
@@ -6301,44 +6317,9 @@ const hasModuleScopeAssignment = (ast) => {
   return false;
 };
 
-const babelPluginRewriteImportMetaCssAssignment = (
-  { types: t },
-  { relativeUrl },
-) => {
-  return {
-    name: "rewrite-import-meta-css-assignment",
-    visitor: {
-      AssignmentExpression(path) {
-        const { left, right } = path.node;
-        if (left.type !== "MemberExpression") {
-          return;
-        }
-        const { object, property } = left;
-        if (object.type !== "MetaProperty") {
-          return;
-        }
-        if (object.meta.name !== "import" || object.property.name !== "meta") {
-          return;
-        }
-        if (property.name !== "css") {
-          return;
-        }
-        // already transformed (e.g. pre-built file): leave as-is
-        if (right.type === "ArrayExpression") {
-          return;
-        }
-        path.node.right = t.arrayExpression([
-          right,
-          t.stringLiteral(relativeUrl),
-        ]);
-      },
-    },
-  };
-};
-
 const injectImportMetaCss = (
   urlInfo,
-  { content, importFrom, importName, importAs, hot },
+  { magicSource, importFrom, importName, importAs, hot },
 ) => {
   const importMetaCssClientFileReference = urlInfo.dependencies.inject({
     parentUrl: urlInfo.url,
@@ -6373,9 +6354,8 @@ ${importVariableName}(import.meta);
 
 `;
 
-  return {
-    content: `${prelude.replace(/\n/g, "")}${content}`,
-  };
+  magicSource.prepend(prelude);
+  return magicSource.toContentAndSourcemap();
 };
 
 // Some "smart" default applied to decide what should hot reload / fullreload:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "41.5.8",
+  "version": "41.5.9",
   "type": "module",
   "description": "Tool to develop, test and build js projects",
   "repository": {
@@ -74,13 +74,13 @@
   },
   "dependencies": {
     "@jsenv/ast": "6.10.1",
-    "@jsenv/js-module-fallback": "1.6.4",
-    "@jsenv/plugin-bundling": "2.10.23",
-    "@jsenv/plugin-minification": "1.7.17",
-    "@jsenv/plugin-supervisor": "1.8.19",
-    "@jsenv/plugin-transpilation": "1.7.4",
+    "@jsenv/js-module-fallback": "1.6.5",
+    "@jsenv/plugin-bundling": "2.10.24",
+    "@jsenv/plugin-minification": "1.7.18",
+    "@jsenv/plugin-supervisor": "1.8.20",
+    "@jsenv/plugin-transpilation": "1.7.5",
     "@jsenv/server": "17.6.3",
-    "@jsenv/sourcemap": "1.4.5",
+    "@jsenv/sourcemap": "1.4.6",
     "react-table": "7.8.0"
   },
   "devDependencies": {

package/src/plugins/import_meta_css/jsenv_plugin_import_meta_css.js

@@ -30,10 +30,11 @@
  */
 
 import {
-  applyBabelPlugins,
   getImportMetaPropertyName,
+  visitJsAst,
   visitJsAstUntil,
 } from "@jsenv/ast";
+import { createMagicSource } from "@jsenv/sourcemap";
 
 export const jsenvPluginImportMetaCss = () => {
   const importMetaCssDevClientFileUrl = import.meta
@@ -79,30 +80,46 @@ export const jsenvPluginImportMetaCss = () => {
           const relativeUrl = packageName
             ? `${packageName}${relativePathInPackage}`
             : relativePathInPackage;
-          const { code } = await applyBabelPlugins({
-            babelPlugins: [
-              [babelPluginRewriteImportMetaCssAssignment, { relativeUrl }],
-            ],
-            input: urlInfo.content,
-            inputIsJsModule: true,
-            inputUrl: urlInfo.originalUrl,
-            outputUrl: urlInfo.generatedUrl,
-            // the map would be dropped: the content sent back carries none
-            options: { sourceMaps: false },
+          // wrap each `import.meta.css = X` right-hand side into
+          // [X, relativeUrl]: two insertions around the existing expression,
+          // so content and sourcemap stay untouched everywhere else
+          const assignmentsToWrap = [];
+          visitJsAst(urlInfo.contentAst, {
+            AssignmentExpression: (node) => {
+              if (node.operator !== "=") {
+                return;
+              }
+              if (getImportMetaPropertyName(node.left) !== "css") {
+                return;
+              }
+              if (node.right.type === "ArrayExpression") {
+                // already in array form (pre-built file)
+                return;
+              }
+              assignmentsToWrap.push(node);
+            },
           });
-          if (code === urlInfo.content) {
-            // all assignments were already in array form (pre-built file) — nothing to do
+          if (assignmentsToWrap.length === 0) {
             return null;
           }
+          const magicSource = createMagicSource(urlInfo.content);
+          for (const assignment of assignmentsToWrap) {
+            const { right } = assignment;
+            magicSource.insert({ position: right.start, text: "[" });
+            magicSource.insert({
+              position: right.end,
+              text: `, ${JSON.stringify(relativeUrl)}]`,
+            });
+          }
           return injectImportMetaCss(urlInfo, {
-            content: code,
+            magicSource,
             importFrom: importMetaCssBuildClientFileUrl,
             importName: "installImportMetaCssBuild",
             importAs: "__installImportMetaCssBuild__",
           });
         }
         return injectImportMetaCss(urlInfo, {
-          content: urlInfo.content,
+          magicSource: createMagicSource(urlInfo.content),
           importFrom: importMetaCssDevClientFileUrl,
           importName: "installImportMetaCssDev",
           importAs: "__installImportMetaCssDev__",
@@ -135,44 +152,9 @@ const hasModuleScopeAssignment = (ast) => {
   return false;
 };
 
-const babelPluginRewriteImportMetaCssAssignment = (
-  { types: t },
-  { relativeUrl },
-) => {
-  return {
-    name: "rewrite-import-meta-css-assignment",
-    visitor: {
-      AssignmentExpression(path) {
-        const { left, right } = path.node;
-        if (left.type !== "MemberExpression") {
-          return;
-        }
-        const { object, property } = left;
-        if (object.type !== "MetaProperty") {
-          return;
-        }
-        if (object.meta.name !== "import" || object.property.name !== "meta") {
-          return;
-        }
-        if (property.name !== "css") {
-          return;
-        }
-        // already transformed (e.g. pre-built file): leave as-is
-        if (right.type === "ArrayExpression") {
-          return;
-        }
-        path.node.right = t.arrayExpression([
-          right,
-          t.stringLiteral(relativeUrl),
-        ]);
-      },
-    },
-  };
-};
-
 const injectImportMetaCss = (
   urlInfo,
-  { content, importFrom, importName, importAs, hot },
+  { magicSource, importFrom, importName, importAs, hot },
 ) => {
   const importMetaCssClientFileReference = urlInfo.dependencies.inject({
     parentUrl: urlInfo.url,
@@ -207,7 +189,6 @@ ${importVariableName}(import.meta);
 
 `;
 
-  return {
-    content: `${prelude.replace(/\n/g, "")}${content}`,
-  };
+  magicSource.prepend(prelude);
+  return magicSource.toContentAndSourcemap();
 };