@jsenv/core 24.2.1 → 24.3.3

package/src/internal/building/css/parseCssUrls.js

@@ -1,32 +1,38 @@
 import { applyPostCss } from "./applyPostCss.js"
 import { postCssPluginUrlVisitor } from "./postcss_plugin_url_visitor.js"
 
-export const parseCssUrls = async (css, cssUrl = "file:///file.css") => {
+export const parseCssUrls = async ({ code, url = "file:///file.css" }) => {
   const atImports = []
   const urlDeclarations = []
-
-  const postCssPlugins = [postCssPluginUrlVisitor]
-  const postCssOptions = { collectUrls: true }
-  const result = await applyPostCss(css, cssUrl, postCssPlugins, postCssOptions)
-
-  result.messages.forEach(
-    ({ type, specifier, atImportNode, declarationNode, urlNode }) => {
-      if (type === "import") {
-        atImports.push({
+  await applyPostCss({
+    code,
+    url,
+    plugins: [
+      postCssPluginUrlVisitor({
+        urlVisitor: ({
+          type,
           specifier,
+          atImportNode,
+          declarationNode,
           urlNode,
-          urlDeclarationNode: atImportNode,
-        })
-      }
-      if (type === "asset") {
-        urlDeclarations.push({
-          specifier,
-          urlNode,
-          urlDeclarationNode: declarationNode,
-        })
-      }
-    },
-  )
-
+        }) => {
+          if (type === "import") {
+            atImports.push({
+              specifier,
+              urlNode,
+              urlDeclarationNode: atImportNode,
+            })
+          }
+          if (type === "asset") {
+            urlDeclarations.push({
+              specifier,
+              urlNode,
+              urlDeclarationNode: declarationNode,
+            })
+          }
+        },
+      }),
+    ],
+  })
   return { atImports, urlDeclarations }
 }

package/src/internal/building/css/postcss_plugin_url_visitor.js

@@ -14,18 +14,14 @@ hence sourcemap cannot point the original source location
 import { fileSystemPathToUrl, resolveUrl } from "@jsenv/filesystem"
 import { require } from "@jsenv/core/src/internal/require.js"
 
-export const postCssPluginUrlVisitor = () => {
+export const postCssPluginUrlVisitor = ({ urlVisitor = () => null }) => {
   const parseCssValue = require("postcss-value-parser")
   const stringifyCssNodes = parseCssValue.stringify
 
   return {
     postcssPlugin: "url_visitor",
     prepare: (result) => {
-      const {
-        from,
-        collectUrls = false,
-        getUrlReplacementValue = () => undefined,
-      } = result.opts
+      const { from } = result.opts
       const fromUrl = fileSystemPathToUrl(from)
       const mutations = []
       return {
@@ -109,9 +105,12 @@ export const postCssPluginUrlVisitor = () => {
               atImportNode,
               urlNode,
             }
-            const urlNewValue = getUrlReplacementValue(urlReference)
-            if (urlNewValue && urlNewValue !== urlNode.value) {
-              urlNode.value = urlNewValue
+            const urlVisitorReturnValue = urlVisitor(urlReference)
+            if (
+              urlVisitorReturnValue &&
+              urlVisitorReturnValue !== urlNode.value
+            ) {
+              urlNode.value = urlVisitorReturnValue
               const newParams = parsed.toString()
               const newAtImportRule = new AtRule({
                 name: "import",
@@ -120,10 +119,6 @@ export const postCssPluginUrlVisitor = () => {
               })
               atImportNode.replaceWith(newAtImportRule)
             }
-
-            if (collectUrls) {
-              result.messages.push(urlReference)
-            }
           },
         },
         Declaration: (declarationNode) => {
@@ -158,14 +153,10 @@ export const postCssPluginUrlVisitor = () => {
                 urlNode,
               }
 
-              if (collectUrls) {
-                result.messages.push(urlReference)
-              }
-
-              const urlNewValue = getUrlReplacementValue(urlReference)
-              if (urlNewValue) {
+              const urlVisitorReturnValue = urlVisitor(urlReference)
+              if (urlVisitorReturnValue) {
                 urlMutations.push(() => {
-                  urlNode.value = urlNewValue
+                  urlNode.value = urlVisitorReturnValue
                 })
               }
             },

package/src/internal/building/css/replaceCssUrls.js

@@ -1,3 +1,8 @@
+import {
+  assertAndNormalizeDirectoryUrl,
+  urlToFileSystemPath,
+} from "@jsenv/filesystem"
+
 import { require } from "@jsenv/core/src/internal/require.js"
 import { applyPostCss } from "./applyPostCss.js"
 import { postCssPluginUrlVisitor } from "./postcss_plugin_url_visitor.js"
@@ -6,32 +11,46 @@ export const replaceCssUrls = async ({
   url,
   code,
   map,
-  getUrlReplacementValue,
+  urlVisitor,
+  cssConcatenation = false,
+  loadCssImport,
   cssMinification = false,
   cssMinificationOptions,
 } = {}) => {
-  const postcssPlugins = [
-    postCssPluginUrlVisitor,
-    ...(cssMinification
-      ? [await getCssMinificationPlugin(cssMinificationOptions)]
-      : []),
-  ]
-  const postcssOptions = {
-    getUrlReplacementValue,
-    map: {
-      inline: false,
-      // https://postcss.org/api/#sourcemapoptions
-      ...(map ? { prev: JSON.stringify(map) } : {}),
-    },
-  }
-  const result = await applyPostCss(code, url, postcssPlugins, postcssOptions)
-
+  const result = await applyPostCss({
+    code,
+    url,
+    plugins: [
+      postCssPluginUrlVisitor({ urlVisitor }),
+      ...(cssConcatenation
+        ? [await getCssConcatenationPlugin({ url, loadCssImport })]
+        : []),
+      ...(cssMinification
+        ? [await getCssMinificationPlugin(cssMinificationOptions)]
+        : []),
+    ],
+  })
+  code = result.code
+  map = result.map
   return {
-    code: result.css,
-    map: result.map.toJSON(),
+    code,
+    map,
   }
 }
 
+const getCssConcatenationPlugin = async ({ loadCssImport }) => {
+  const postcssImport = require("postcss-import")
+  return postcssImport({
+    resolve: (id, basedir) => {
+      const url = new URL(id, assertAndNormalizeDirectoryUrl(basedir)).href
+      return urlToFileSystemPath(url)
+    },
+    load: (id) => {
+      return loadCssImport(id)
+    },
+  })
+}
+
 const getCssMinificationPlugin = async (cssMinificationOptions = {}) => {
   const cssnano = require("cssnano")
   const cssnanoDefaultPreset = require("cssnano-preset-default")

package/src/internal/building/css_module.js

@@ -1,6 +1,6 @@
 import { resolveUrl, urlToRelativeUrl } from "@jsenv/filesystem"
 
-import { replaceCssUrls } from "@jsenv/core/src/internal/building/css/replaceCssUrls.js"
+import { moveCssUrls } from "@jsenv/core/src/internal/building/css/moveCssUrls.js"
 import { escapeTemplateStringSpecialCharacters } from "@jsenv/core/src/internal/escapeTemplateStringSpecialCharacters.js"
 import {
   getCssSourceMappingUrl,
@@ -16,18 +16,14 @@ export const convertCssTextToJavascriptModule = async ({
   const directoryUrl = resolveUrl("./", cssUrl)
   const jsDirectoryUrl = resolveUrl("./", jsUrl)
   if (directoryUrl !== jsDirectoryUrl) {
-    const cssUrlReplaceResult = await replaceCssUrls({
-      url: cssUrl,
+    const moveUrlResult = await moveCssUrls({
+      from: cssUrl,
+      to: jsUrl,
       code,
       map,
-      getUrlReplacementValue: ({ specifier }) => {
-        const urlForCss = resolveUrl(specifier, cssUrl)
-        const urlForJs = urlToRelativeUrl(urlForCss, jsUrl)
-        return urlForJs
-      },
     })
-    code = cssUrlReplaceResult.code
-    map = cssUrlReplaceResult.map
+    code = moveUrlResult.code
+    map = moveUrlResult.map
     const sourcemapUrlSpecifier = getCssSourceMappingUrl(code)
     const sourcemapUrlForCss = resolveUrl(sourcemapUrlSpecifier, cssUrl)
     const sourcemapUrlForJs = urlToRelativeUrl(sourcemapUrlForCss, jsUrl)

package/src/internal/building/html/parseHtmlRessource.js

@@ -51,6 +51,7 @@ import {
 import { collectNodesMutations } from "../parsing.utils.js"
 
 import { collectSvgMutations } from "../svg/parseSvgRessource.js"
+import { moveCssUrls } from "../css/moveCssUrls.js"
 
 export const parseHtmlRessource = async (
   htmlRessource,
@@ -144,11 +145,12 @@ export const parseHtmlRessource = async (
   ]
 
   return async (params) => {
-    htmlMutations.forEach((mutationCallback) => {
-      mutationCallback({
+    await htmlMutations.reduce(async (previous, mutationCallback) => {
+      await previous
+      await mutationCallback({
         ...params,
       })
-    })
+    }, Promise.resolve())
 
     const htmlAfterTransformation = htmlAstToHtmlString(htmlAst)
     const html = minify
@@ -507,7 +509,11 @@ const linkStylesheetHrefVisitor = (
     ressourceSpecifier: hrefAttribute.value,
     ...referenceLocationFromHtmlNode(link, "href"),
   })
-  return ({ getUrlRelativeToImporter }) => {
+  return async ({
+    getUrlRelativeToImporter,
+    precomputeBuildRelativeUrl,
+    buildDirectoryUrl,
+  }) => {
     const { ressource } = cssReference
 
     if (ressource.isExternal) {
@@ -516,18 +522,38 @@ const linkStylesheetHrefVisitor = (
 
     if (shouldInline({ ressource, htmlNode: link })) {
       const { bufferAfterBuild } = ressource
-      let cssString = String(bufferAfterBuild)
-      const sourcemapRelativeUrl = getCssSourceMappingUrl(cssString)
+      let code = String(bufferAfterBuild)
+      const { buildRelativeUrl } = ressource
+      const cssBuildUrl = resolveUrl(buildRelativeUrl, buildDirectoryUrl)
+      const htmlUrl = resolveUrl(
+        precomputeBuildRelativeUrl(htmlRessource),
+        buildDirectoryUrl,
+      )
+
+      const moveResult = await moveCssUrls({
+        code,
+        from: cssBuildUrl,
+        to: htmlUrl,
+        // moveCssUrls will change the css source code
+        // Ideally we should update the sourcemap referenced by css
+        // to target the one after css urls are moved.
+        // It means we should force sourcemap ressource to the new one
+        // until it's supported we prevent postcss from updating the
+        // sourcemap comment, othwise css would reference a sourcemap
+        // that won't by in the build directory
+        sourcemapMethod: null,
+      })
+      code = moveResult.code
+
+      const sourcemapRelativeUrl = getCssSourceMappingUrl(code)
       if (sourcemapRelativeUrl) {
-        const { buildRelativeUrl } = ressource
-        const cssBuildUrl = resolveUrl(buildRelativeUrl, "file:///")
+        const cssBuildUrl = resolveUrl(buildRelativeUrl, buildDirectoryUrl)
         const sourcemapBuildUrl = resolveUrl(sourcemapRelativeUrl, cssBuildUrl)
-        const htmlUrl = resolveUrl(htmlRessource.fileNamePattern, "file:///")
         const sourcemapInlineUrl = urlToRelativeUrl(sourcemapBuildUrl, htmlUrl)
-        cssString = setCssSourceMappingUrl(cssString, sourcemapInlineUrl)
+        code = setCssSourceMappingUrl(code, sourcemapInlineUrl)
       }
 
-      replaceHtmlNode(link, `<style>${cssString}</style>`, {
+      replaceHtmlNode(link, `<style>${code}</style>`, {
         attributesToIgnore: ["href", "rel", "as", "crossorigin", "type"],
       })
       cssReference.inlinedCallback()

package/src/internal/building/parseRessource.js

@@ -39,6 +39,7 @@ export const parseRessource = (
     minifyJs,
     minifyHtml,
     minifyCssOptions,
+    cssConcatenation,
   },
 ) => {
   const { contentType } = ressource
@@ -124,10 +125,12 @@ export const parseRessource = (
 
   if (contentType === "text/css") {
     return parseCssRessource(ressource, notifiers, {
+      asProjectUrl,
       asOriginalUrl,
       asOriginalServerUrl,
       minify,
       minifyCssOptions,
+      cssConcatenation,
     })
   }
 

package/src/internal/building/ressource_builder.js

@@ -49,6 +49,7 @@ export const createRessourceBuilder = (
     entryUrl,
     entryBuffer,
     entryBuildRelativeUrl,
+    urlVersionningForEntryPoints,
   }) => {
     // The entry point is conceptually referenced by code passing "entryPointMap"
     // to buildProject. So we analyse stack trace to put this function caller
@@ -68,8 +69,12 @@ export const createRessourceBuilder = (
       isEntryPoint: true,
 
       // don't hash asset entry points
-      urlVersioningDisabled: true,
-      fileNamePattern: entryBuildRelativeUrl,
+      ...(urlVersionningForEntryPoints
+        ? {}
+        : {
+            urlVersioningDisabled: true,
+            fileNamePattern: entryBuildRelativeUrl,
+          }),
     })
     entryReference.isProgrammatic = true
 
@@ -567,6 +572,10 @@ export const createRessourceBuilder = (
       )
       await transform({
         buildDirectoryUrl,
+        precomputeBuildRelativeUrl: (ressource) =>
+          precomputeBuildRelativeUrlForRessource(ressource, {
+            lineBreakNormalization,
+          }),
         getUrlRelativeToImporter: (referencedRessource) => {
           const ressourceImporter = ressource
 
@@ -1021,7 +1030,7 @@ const isEmitChunkNeeded = ({ ressource, reference }) => {
  *
  * see also:
  * - https://rollupjs.org/guide/en/#thisemitfileemittedfile-emittedchunk--emittedasset--string
- * -https://github.com/rollup/rollup/issues/2872
+ * - https://github.com/rollup/rollup/issues/2872
  */
 const referenceShouldBeIgnoredWarning = ({
   isJsModule,

package/src/internal/compiling/babel_plugin_import_assertions.js

@@ -10,8 +10,7 @@ export const babelPluginImportAssertions = (
   return {
     ...babelPluginImportVisitor(
       babel,
-      // During the build we throw when for import call expression where
-      // sepcifier or type is dynamic.
+      // During build we throw on import call expression where "specifier" or "type" is dynamic
       // Here there is no strong need to throw because keeping the source code intact
       // will throw an error when browser will execute the code
       ({ importPath, specifierPath }) => {

package/src/internal/compiling/html_source_file_service.js

@@ -21,14 +21,12 @@ import {
 import { moveImportMap } from "@jsenv/importmap"
 import { createDetailedMessage } from "@jsenv/logger"
 
-import { fetchUrl } from "@jsenv/core/src/internal/fetchUrl.js"
-import { jsenvBrowserSystemFileInfo } from "@jsenv/core/src/internal/jsenvInternalFiles.js"
-import { redirectorHtmlFileInfo } from "@jsenv/core/src/internal/dev_server/redirector/redirector_file_info.js"
-import { eventSourceClientFileInfo } from "@jsenv/core/src/internal/dev_server/event_source_client/event_source_client_file_info.js"
 import {
-  toolbarInjectorFileInfo,
-  toolbarHtmlFileInfo,
-} from "@jsenv/core/src/internal/dev_server/toolbar/toolbar_file_info.js"
+  BROWSER_RUNTIME_BUILD_URL,
+  EVENT_SOURCE_CLIENT_BUILD_URL,
+  TOOLBAR_INJECTOR_BUILD_URL,
+} from "@jsenv/core/dist/build_manifest.js"
+import { fetchUrl } from "@jsenv/core/src/internal/fetchUrl.js"
 import { stringifyDataUrl } from "@jsenv/core/src/internal/dataUrl.utils.js"
 import {
   parseHtmlString,
@@ -43,6 +41,9 @@ import {
   setHtmlNodeText,
   getUniqueNameForInlineHtmlNode,
 } from "./compileHtml.js"
+import { jsenvCoreDirectoryUrl } from "../jsenvCoreDirectoryUrl.js"
+
+const jsenvDistDirectoryUrl = new URL("./dist/", jsenvCoreDirectoryUrl).href
 
 export const createTransformHtmlSourceFileService = ({
   logger,
@@ -70,6 +71,10 @@ export const createTransformHtmlSourceFileService = ({
     const relativeUrl = ressource.slice(1)
     const fileUrl = resolveUrl(relativeUrl, projectDirectoryUrl)
 
+    if (urlIsInsideOf(fileUrl, jsenvDistDirectoryUrl)) {
+      return null
+    }
+
     const inlineScript = htmlInlineScriptMap.get(fileUrl)
     if (inlineScript) {
       return {
@@ -159,41 +164,38 @@ const transformHTMLSourceFile = async ({
     })
   }
 
-  const jsenvBrowserBuildUrlRelativeToProject = urlToRelativeUrl(
-    jsenvBrowserSystemFileInfo.jsenvBuildUrl,
+  const browserRuntimeBuildUrlRelativeToProject = urlToRelativeUrl(
+    BROWSER_RUNTIME_BUILD_URL,
     projectDirectoryUrl,
   )
+
   const eventSourceClientBuildRelativeUrlForProject = urlToRelativeUrl(
-    eventSourceClientFileInfo.buildUrl,
+    EVENT_SOURCE_CLIENT_BUILD_URL,
     projectDirectoryUrl,
   )
+
   const toolbarInjectorBuildRelativeUrlForProject = urlToRelativeUrl(
-    toolbarInjectorFileInfo.buildUrl,
+    TOOLBAR_INJECTOR_BUILD_URL,
     projectDirectoryUrl,
   )
+
   manipulateHtmlAst(htmlAst, {
     scriptInjections: [
-      ...(fileUrl !== toolbarHtmlFileInfo.sourceUrl &&
-      fileUrl !== redirectorHtmlFileInfo.sourceUrl &&
-      jsenvScriptInjection
+      ...(jsenvScriptInjection
         ? [
             {
-              src: `/${jsenvBrowserBuildUrlRelativeToProject}`,
+              src: `/${browserRuntimeBuildUrlRelativeToProject}`,
             },
           ]
         : []),
-      ...(fileUrl !== toolbarHtmlFileInfo.sourceUrl &&
-      fileUrl !== redirectorHtmlFileInfo.sourceUrl &&
-      jsenvEventSourceClientInjection
+      ...(jsenvEventSourceClientInjection
         ? [
             {
               src: `/${eventSourceClientBuildRelativeUrlForProject}`,
             },
           ]
         : []),
-      ...(fileUrl !== toolbarHtmlFileInfo.sourceUrl &&
-      fileUrl !== redirectorHtmlFileInfo.sourceUrl &&
-      jsenvToolbarInjection
+      ...(jsenvToolbarInjection
         ? [
             {
               src: `/${toolbarInjectorBuildRelativeUrlForProject}`,

package/src/internal/compiling/jsenvCompilerForHtml.js

@@ -2,14 +2,14 @@ import { resolveUrl, urlToRelativeUrl } from "@jsenv/filesystem"
 import { moveImportMap, composeTwoImportMaps } from "@jsenv/importmap"
 import { createDetailedMessage } from "@jsenv/logger"
 
-import { jsenvBrowserSystemFileInfo } from "@jsenv/core/src/internal/jsenvInternalFiles.js"
-import { eventSourceClientFileInfo } from "@jsenv/core/src/internal/dev_server/event_source_client/event_source_client_file_info.js"
 import {
-  toolbarInjectorFileInfo,
-  toolbarHtmlFileInfo,
-} from "@jsenv/core/src/internal/dev_server/toolbar/toolbar_file_info.js"
+  BROWSER_RUNTIME_BUILD_URL,
+  EVENT_SOURCE_CLIENT_BUILD_URL,
+  TOOLBAR_INJECTOR_BUILD_URL,
+} from "@jsenv/core/dist/build_manifest.js"
 import { fetchUrl } from "@jsenv/core/src/internal/fetchUrl.js"
 import { getDefaultImportMap } from "@jsenv/core/src/internal/import-resolution/importmap-default.js"
+
 import {
   setJavaScriptSourceMappingUrl,
   sourcemapToBase64Url,
@@ -54,16 +54,18 @@ export const compileHtml = async ({
   jsenvToolbarInjection,
   onHtmlImportmapInfo,
 }) => {
-  const jsenvBrowserBuildUrlRelativeToProject = urlToRelativeUrl(
-    jsenvBrowserSystemFileInfo.jsenvBuildUrl,
+  const browserRuntimeBuildUrlRelativeToProject = urlToRelativeUrl(
+    BROWSER_RUNTIME_BUILD_URL,
     projectDirectoryUrl,
   )
+
   const eventSourceClientBuildRelativeUrlForProject = urlToRelativeUrl(
-    eventSourceClientFileInfo.buildUrl,
+    EVENT_SOURCE_CLIENT_BUILD_URL,
     projectDirectoryUrl,
   )
+
   const toolbarInjectorBuildRelativeUrlForProject = urlToRelativeUrl(
-    toolbarInjectorFileInfo.buildUrl,
+    TOOLBAR_INJECTOR_BUILD_URL,
     projectDirectoryUrl,
   )
 
@@ -74,26 +76,23 @@ export const compileHtml = async ({
     await mutateRessourceHints(htmlAst)
   }
 
-  const urlNoSearch = urlWithoutSearch(url)
-
   manipulateHtmlAst(htmlAst, {
     scriptInjections: [
-      ...(urlNoSearch !== toolbarHtmlFileInfo.sourceUrl && jsenvScriptInjection
+      ...(jsenvScriptInjection
         ? [
             {
-              src: `/${jsenvBrowserBuildUrlRelativeToProject}`,
+              src: `/${browserRuntimeBuildUrlRelativeToProject}`,
             },
           ]
         : []),
-      ...(urlNoSearch !== toolbarHtmlFileInfo.sourceUrl &&
-      jsenvEventSourceClientInjection
+      ...(jsenvEventSourceClientInjection
         ? [
             {
               src: `/${eventSourceClientBuildRelativeUrlForProject}`,
             },
           ]
         : []),
-      ...(urlNoSearch !== toolbarHtmlFileInfo.sourceUrl && jsenvToolbarInjection
+      ...(jsenvToolbarInjection
         ? [
             {
               src: `/${toolbarInjectorBuildRelativeUrlForProject}`,
@@ -405,9 +404,3 @@ const mutateRessourceHints = async (htmlAst) => {
   )
   mutations.forEach((mutation) => mutation())
 }
-
-const urlWithoutSearch = (url) => {
-  const urlObject = new URL(url)
-  urlObject.search = ""
-  return urlObject.href
-}