@jsenv/core 24.2.2 → 24.4.0

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

@@ -1,23 +1,35 @@
 import { urlToFileSystemPath } from "@jsenv/filesystem"
 
-export const applyPostCss = async (
-  cssString,
-  cssUrl,
+export const applyPostCss = async ({
+  code,
+  url,
+  map,
+  sourcemapMethod = "comment",
   plugins,
   // https://github.com/postcss/postcss#options
   options = {},
-) => {
+}) => {
   const { default: postcss } = await import("postcss")
 
-  let result
   try {
-    const cssFileUrl = urlToFileUrl(cssUrl)
-    result = await postcss(plugins).process(cssString, {
+    const cssFileUrl = urlToFileUrl(url)
+    const result = await postcss(plugins).process(code, {
       collectUrls: true,
       from: urlToFileSystemPath(cssFileUrl),
       to: urlToFileSystemPath(cssFileUrl),
+      map: {
+        annotation: sourcemapMethod === "comment",
+        inline: sourcemapMethod === "inline",
+        // https://postcss.org/api/#sourcemapoptions
+        ...(map ? { prev: JSON.stringify(map) } : {}),
+      },
       ...options,
     })
+    return {
+      code: result.css,
+      map: result.map.toJSON(),
+      postCssMessages: result.messages,
+    }
   } catch (error) {
     if (error.name === "CssSyntaxError") {
       console.error(String(error))
@@ -25,7 +37,6 @@ export const applyPostCss = async (
     }
     throw error
   }
-  return result
 }
 
 // the goal of this function is to take an url that is likely an http url

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

@@ -0,0 +1,44 @@
+import { urlToRelativeUrl } from "@jsenv/filesystem"
+
+import { applyPostCss } from "./applyPostCss.js"
+import { postCssPluginUrlVisitor } from "./postcss_plugin_url_visitor.js"
+
+export const moveCssUrls = async ({
+  code,
+  from,
+  to,
+  map,
+  sourcemapMethod,
+} = {}) => {
+  const fromDirectoryUrl = new URL("./", from).href
+  const toDirectoryUrl = new URL("./", to).href
+  // same directory, nothing to do
+  if (fromDirectoryUrl === toDirectoryUrl) {
+    return { code, map }
+  }
+
+  const result = await applyPostCss({
+    code,
+    url: from,
+    map,
+    sourcemapMethod,
+    plugins: [
+      postCssPluginUrlVisitor({
+        urlVisitor: ({ specifier }) => {
+          if (specifier[0] === "#") {
+            return null
+          }
+          const url = new URL(specifier, fromDirectoryUrl).href
+          const relativeUrl = urlToRelativeUrl(url, toDirectoryUrl)
+          return relativeUrl
+        },
+      }),
+    ],
+  })
+  code = result.code
+  map = result.map
+  return {
+    code,
+    map,
+  }
+}

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

@@ -1,4 +1,9 @@
-import { urlToFilename, urlToRelativeUrl, resolveUrl } from "@jsenv/filesystem"
+import {
+  urlToFilename,
+  urlToRelativeUrl,
+  resolveUrl,
+  fileSystemPathToUrl,
+} from "@jsenv/filesystem"
 
 import {
   getCssSourceMappingUrl,
@@ -7,14 +12,18 @@ import {
 import { getRessourceAsBase64Url } from "../ressource_builder_util.js"
 import { parseCssUrls } from "./parseCssUrls.js"
 import { replaceCssUrls } from "./replaceCssUrls.js"
+import { moveCssUrls } from "./moveCssUrls.js"
 
 export const parseCssRessource = async (
   cssRessource,
   { notifyReferenceFound },
-  { asProjectUrl, asOriginalUrl, minify, minifyCssOptions },
+  { asProjectUrl, asOriginalUrl, minify, minifyCssOptions, cssConcatenation },
 ) => {
   const cssString = String(cssRessource.bufferBeforeBuild)
   const cssSourcemapUrl = getCssSourceMappingUrl(cssString)
+  const url = cssRessource.url
+  let code = cssString
+  let map
   let sourcemapReference
   if (cssSourcemapUrl) {
     sourcemapReference = notifyReferenceFound({
@@ -26,6 +35,8 @@ export const parseCssRessource = async (
       referenceColumn: 0,
       isSourcemap: true,
     })
+    await sourcemapReference.ressource.getBufferAvailablePromise()
+    map = JSON.parse(String(sourcemapReference.ressource.bufferBeforeBuild))
   } else {
     sourcemapReference = notifyReferenceFound({
       contentType: "application/octet-stream",
@@ -35,20 +46,25 @@ export const parseCssRessource = async (
     })
   }
 
-  const { atImports, urlDeclarations } = await parseCssUrls(
-    cssString,
-    cssRessource.url,
-  )
-
+  const { atImports, urlDeclarations } = await parseCssUrls({
+    code,
+    url,
+  })
   const urlNodeReferenceMapping = new Map()
+  const atImportReferences = []
   atImports.forEach((atImport) => {
     const importReference = notifyReferenceFound({
       ressourceSpecifier: atImport.specifier,
       ...cssNodeToReferenceLocation(atImport.urlDeclarationNode),
     })
     urlNodeReferenceMapping.set(atImport.urlNode, importReference)
+    atImportReferences.push(importReference)
   })
   urlDeclarations.forEach((urlDeclaration) => {
+    if (urlDeclaration.specifier[0] === "#") {
+      return
+    }
+
     const urlReference = notifyReferenceFound({
       ressourceSpecifier: urlDeclaration.specifier,
       ...cssNodeToReferenceLocation(urlDeclaration.urlDeclarationNode),
@@ -56,22 +72,20 @@ export const parseCssRessource = async (
     urlNodeReferenceMapping.set(urlDeclaration.urlNode, urlReference)
   })
 
-  return async ({ getUrlRelativeToImporter, buildDirectoryUrl }) => {
+  return async ({
+    getUrlRelativeToImporter,
+    precomputeBuildRelativeUrl,
+    buildDirectoryUrl,
+  }) => {
     const sourcemapRessource = sourcemapReference.ressource
-
-    let code = cssString
-    let map = sourcemapRessource.isPlaceholder
-      ? undefined
-      : JSON.parse(String(sourcemapRessource.bufferBeforeBuild))
-
     const cssCompiledUrl = cssRessource.url
     const cssOriginalUrl = asOriginalUrl(cssCompiledUrl)
 
     const replaceCssResult = await replaceCssUrls({
-      url: map ? asProjectUrl(cssCompiledUrl) : cssOriginalUrl,
-      code: cssString,
+      url: asProjectUrl(cssCompiledUrl),
+      code,
       map,
-      getUrlReplacementValue: ({ urlNode }) => {
+      urlVisitor: ({ urlNode }) => {
         const nodeCandidates = Array.from(urlNodeReferenceMapping.keys())
         const urlNodeFound = nodeCandidates.find((urlNodeCandidate) =>
           isSameCssDocumentUrlNode(urlNodeCandidate, urlNode),
@@ -95,6 +109,42 @@ export const parseCssRessource = async (
         }
         return getUrlRelativeToImporter(cssUrlRessource)
       },
+      cssConcatenation,
+      loadCssImport: async (path) => {
+        // const cssFileUrl = asProjectUrl(url)
+        const importedCssFileUrl = fileSystemPathToUrl(path)
+        const atImportReference = atImportReferences.find(
+          (atImportReference) => {
+            return (
+              asProjectUrl(atImportReference.ressource.url) ===
+              importedCssFileUrl
+            )
+          },
+        )
+        atImportReference.inlinedCallback()
+        let code = String(atImportReference.ressource.bufferAfterBuild)
+        const moveResult = await moveCssUrls({
+          code,
+          from: resolveUrl(
+            atImportReference.ressource.buildRelativeUrl,
+            buildDirectoryUrl,
+          ),
+          to: resolveUrl(
+            precomputeBuildRelativeUrl(cssRessource),
+            buildDirectoryUrl,
+          ),
+          // 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
+        return code
+      },
       cssMinification: minify,
       cssMinificationOptions: minifyCssOptions,
     })

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 }) => {