@jsenv/core 22.4.0 → 23.0.0

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

@@ -1,5 +1,5 @@
-import { basename } from "path"
 import { urlToFilename, urlToRelativeUrl, resolveUrl } from "@jsenv/filesystem"
+
 import {
   getCssSourceMappingUrl,
   setCssSourceMappingUrl,
@@ -11,19 +11,27 @@ import { replaceCssUrls } from "./replaceCssUrls.js"
 export const parseCssRessource = async (
   cssRessource,
   { notifyReferenceFound },
-  { urlToOriginalServerUrl, minify, minifyCssOptions },
+  { asProjectUrl, asOriginalUrl, minify, minifyCssOptions },
 ) => {
   const cssString = String(cssRessource.bufferBeforeBuild)
   const cssSourcemapUrl = getCssSourceMappingUrl(cssString)
   let sourcemapReference
   if (cssSourcemapUrl) {
     sourcemapReference = notifyReferenceFound({
-      ressourceContentTypeExpected: "application/json",
+      contentTypeExpected: ["application/json", "application/octet-stream"],
       ressourceSpecifier: cssSourcemapUrl,
       // we don't really know the line or column
       // but let's asusme it the last line and first column
       referenceLine: cssString.split(/\r?\n/).length - 1,
       referenceColumn: 0,
+      isSourcemap: true,
+    })
+  } else {
+    sourcemapReference = notifyReferenceFound({
+      contentType: "application/octet-stream",
+      ressourceSpecifier: `${urlToFilename(cssRessource.url)}.map`,
+      isPlaceholder: true,
+      isSourcemap: true,
     })
   }
 
@@ -48,15 +56,22 @@ export const parseCssRessource = async (
     urlNodeReferenceMapping.set(urlDeclaration.urlNode, urlReference)
   })
 
-  return async ({
-    getUrlRelativeToImporter,
-    precomputeBuildRelativeUrl,
-    registerAssetEmitter,
-  }) => {
-    const cssReplaceResult = await replaceCssUrls(
-      cssString,
-      cssRessource.url,
-      ({ urlNode }) => {
+  return async ({ getUrlRelativeToImporter, 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,
+      map,
+      getUrlReplacementValue: ({ urlNode }) => {
         const nodeCandidates = Array.from(urlNodeReferenceMapping.keys())
         const urlNodeFound = nodeCandidates.find((urlNodeCandidate) =>
           isSameCssDocumentUrlNode(urlNodeCandidate, urlNode),
@@ -65,7 +80,7 @@ export const parseCssRessource = async (
           return urlNode.value
         }
 
-        // url node nous dit quel réfrence y correspond
+        // url node nous dit quel référence y correspond
         const urlNodeReference = urlNodeReferenceMapping.get(urlNodeFound)
         const cssUrlRessource = urlNodeReference.ressource
 
@@ -80,74 +95,55 @@ export const parseCssRessource = async (
         }
         return getUrlRelativeToImporter(cssUrlRessource)
       },
-      {
-        cssMinification: minify,
-        cssMinificationOptions: minifyCssOptions,
-        // https://postcss.org/api/#sourcemapoptions
-        sourcemapOptions: sourcemapReference
-          ? { prev: String(sourcemapReference.ressource.bufferAfterBuild) }
-          : {},
-      },
-    )
-    const code = cssReplaceResult.css
-    const map = cssReplaceResult.map.toJSON()
-    const cssBuildRelativeUrl = precomputeBuildRelativeUrl(code)
+      cssMinification: minify,
+      cssMinificationOptions: minifyCssOptions,
+    })
+    code = replaceCssResult.code
+    map = replaceCssResult.map
 
-    const cssSourcemapFilename = `${basename(cssBuildRelativeUrl)}.map`
+    cssRessource.buildEnd(code)
 
-    // In theory code should never be modified once the url for caching is computed
-    // because url for caching depends on file content.
+    // In theory code should never be modified once buildEnd() is called
+    // because buildRelativeUrl might be versioned based on file content
     // There is an exception for sourcemap because we want to update sourcemap.file
     // to the cached filename of the css file.
     // To achieve that we set/update the sourceMapping url comment in compiled css file.
     // This is totally fine to do that because sourcemap and css file lives togethers
     // so this comment changes nothing regarding cache invalidation and is not important
-    // to decide the filename for this css asset.
-    const cssSourceAfterTransformation = setCssSourceMappingUrl(
-      code,
-      cssSourcemapFilename,
+    // to decide buildRelativeUrl for this css file.
+    const cssBuildUrl = resolveUrl(
+      cssRessource.buildRelativeUrl,
+      buildDirectoryUrl,
+    )
+    const sourcemapPrecomputedBuildUrl = resolveUrl(
+      `${urlToFilename(cssBuildUrl)}.map`,
+      cssBuildUrl,
     )
 
-    registerAssetEmitter(({ buildDirectoryUrl, emitAsset }) => {
-      const cssBuildUrl = resolveUrl(
-        cssRessource.buildRelativeUrl,
-        buildDirectoryUrl,
-      )
-      const mapBuildUrl = resolveUrl(cssSourcemapFilename, cssBuildUrl)
-      map.file = urlToFilename(cssBuildUrl)
-      if (map.sources) {
-        // hum en fait si css est inline, alors la source n'est pas le fichier compilé
-        // mais bien le fichier html compilé ?
-        const importerUrl = cssRessource.isInline
-          ? urlToOriginalServerUrl(cssRessource.url)
-          : cssRessource.url
-        map.sources = map.sources.map((source) => {
-          const sourceUrl = resolveUrl(source, importerUrl)
-          const sourceUrlRelativeToSourceMap = urlToRelativeUrl(
-            sourceUrl,
-            mapBuildUrl,
-          )
-          return sourceUrlRelativeToSourceMap
-        })
-      }
-
-      const mapSource = JSON.stringify(map, null, "  ")
-      const buildRelativeUrl = urlToRelativeUrl(mapBuildUrl, buildDirectoryUrl)
-      if (sourcemapReference) {
-        sourcemapReference.ressource.buildRelativeUrl = buildRelativeUrl
-        sourcemapReference.ressource.bufferAfterBuild = mapSource
-      } else {
-        emitAsset({
-          fileName: buildRelativeUrl,
-          source: mapSource,
-        })
-      }
-    })
-
-    return {
-      buildRelativeUrl: cssBuildRelativeUrl,
-      bufferAfterBuild: cssSourceAfterTransformation,
+    map.file = urlToFilename(cssBuildUrl)
+    if (map.sources) {
+      map.sources = map.sources.map((source) => {
+        const sourceUrl = resolveUrl(source, cssOriginalUrl)
+        const sourceUrlRelativeToSourceMap = urlToRelativeUrl(
+          sourceUrl,
+          sourcemapPrecomputedBuildUrl,
+        )
+        return sourceUrlRelativeToSourceMap
+      })
     }
+    const mapSource = JSON.stringify(map, null, "  ")
+    sourcemapRessource.buildEnd(mapSource)
+
+    const sourcemapBuildUrl = resolveUrl(
+      sourcemapRessource.buildRelativeUrl,
+      buildDirectoryUrl,
+    )
+    const sourcemapUrlForCss = urlToRelativeUrl(sourcemapBuildUrl, cssBuildUrl)
+    const codeWithSourcemapComment = setCssSourceMappingUrl(
+      code,
+      sourcemapUrlForCss,
+    )
+    cssRessource.bufferAfterBuild = codeWithSourcemapComment
   }
 }
 

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

@@ -1,11 +1,11 @@
 import { applyPostCss } from "./applyPostCss.js"
-import { postCssUrlHashPlugin } from "./postcss-urlhash-plugin.js"
+import { postCssPluginUrlVisitor } from "./postcss_plugin_url_visitor.js"
 
 export const parseCssUrls = async (css, cssUrl = "file:///file.css") => {
   const atImports = []
   const urlDeclarations = []
 
-  const postCssPlugins = [postCssUrlHashPlugin]
+  const postCssPlugins = [postCssPluginUrlVisitor]
   const postCssOptions = { collectUrls: true }
   const result = await applyPostCss(css, cssUrl, postCssPlugins, postCssOptions)
 

package/src/internal/building/css/{postcss-urlhash-plugin.js → postcss_plugin_url_visitor.js}

@@ -14,12 +14,12 @@ 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 postCssUrlHashPlugin = () => {
+export const postCssPluginUrlVisitor = () => {
   const parseCssValue = require("postcss-value-parser")
   const stringifyCssNodes = parseCssValue.stringify
 
   return {
-    postcssPlugin: "urlhash",
+    postcssPlugin: "url_visitor",
     prepare: (result) => {
       const {
         from,
@@ -27,6 +27,7 @@ export const postCssUrlHashPlugin = () => {
         getUrlReplacementValue = () => undefined,
       } = result.opts
       const fromUrl = fileSystemPathToUrl(from)
+      const mutations = []
       return {
         AtRule: {
           import: (atImportNode, { AtRule }) => {
@@ -126,10 +127,12 @@ export const postCssUrlHashPlugin = () => {
           },
         },
         Declaration: (declarationNode) => {
-          walkUrls(declarationNode, {
-            parseCssValue,
+          const parsed = parseCssValue(declarationNode.value)
+          const urlMutations = []
+
+          walkUrls(parsed, {
             stringifyCssNodes,
-            visitor: (url, urlNode) => {
+            visitor: ({ url, urlNode }) => {
               // Empty URL
               if (!urlNode || url.length === 0) {
                 declarationNode.warn(
@@ -155,28 +158,40 @@ export const postCssUrlHashPlugin = () => {
                 urlNode,
               }
 
-              const urlNewValue = getUrlReplacementValue(urlReference)
-              if (urlNewValue) {
-                urlNode.value = urlNewValue
-              }
-
               if (collectUrls) {
                 result.messages.push(urlReference)
               }
+
+              const urlNewValue = getUrlReplacementValue(urlReference)
+              if (urlNewValue) {
+                urlMutations.push(() => {
+                  urlNode.value = urlNewValue
+                })
+              }
             },
           })
+
+          if (urlMutations.length) {
+            mutations.push(() => {
+              urlMutations.forEach((urlMutation) => {
+                urlMutation()
+              })
+              declarationNode.value = parsed.toString()
+            })
+          }
+        },
+        OnceExit: () => {
+          mutations.forEach((mutation) => {
+            mutation()
+          })
         },
       }
     },
   }
 }
-postCssUrlHashPlugin.postcss = true
+postCssPluginUrlVisitor.postcss = true
 
-const walkUrls = (
-  declarationNode,
-  { parseCssValue, stringifyCssNodes, visitor },
-) => {
-  const parsed = parseCssValue(declarationNode.value)
+const walkUrls = (parsed, { stringifyCssNodes, visitor }) => {
   parsed.walk((node) => {
     // https://github.com/andyjansson/postcss-functions
     if (isUrlFunctionNode(node)) {
@@ -186,14 +201,20 @@ const walkUrls = (
         urlNode && urlNode.type === "string"
           ? urlNode.value
           : stringifyCssNodes(nodes)
-      visitor(url.trim(), urlNode)
+      visitor({
+        url: url.trim(),
+        urlNode,
+      })
       return
     }
 
     if (isImageSetFunctionNode(node)) {
       Array.from(node.nodes).forEach((childNode) => {
         if (childNode.type === "string") {
-          visitor(childNode.value.trim(), childNode)
+          visitor({
+            url: childNode.value.trim(),
+            urlNode: childNode,
+          })
           return
         }
 
@@ -204,14 +225,15 @@ const walkUrls = (
             urlNode && urlNode.type === "string"
               ? urlNode.value
               : stringifyCssNodes(nodes)
-          visitor(url.trim(), urlNode)
+          visitor({
+            url: url.trim(),
+            urlNode,
+          })
           return
         }
       })
     }
   })
-
-  declarationNode.value = parsed.toString()
 }
 
 const isUrlFunctionNode = (node) => {

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

@@ -1,19 +1,17 @@
 import { require } from "@jsenv/core/src/internal/require.js"
 import { applyPostCss } from "./applyPostCss.js"
-import { postCssUrlHashPlugin } from "./postcss-urlhash-plugin.js"
+import { postCssPluginUrlVisitor } from "./postcss_plugin_url_visitor.js"
 
-export const replaceCssUrls = async (
-  css,
-  cssUrl,
+export const replaceCssUrls = async ({
+  url,
+  code,
+  map,
   getUrlReplacementValue,
-  {
-    cssMinification = false,
-    cssMinificationOptions,
-    sourcemapOptions = {},
-  } = {},
-) => {
+  cssMinification = false,
+  cssMinificationOptions,
+} = {}) => {
   const postcssPlugins = [
-    postCssUrlHashPlugin,
+    postCssPluginUrlVisitor,
     ...(cssMinification
       ? [await getCssMinificationPlugin(cssMinificationOptions)]
       : []),
@@ -22,11 +20,16 @@ export const replaceCssUrls = async (
     getUrlReplacementValue,
     map: {
       inline: false,
-      ...sourcemapOptions,
+      // https://postcss.org/api/#sourcemapoptions
+      ...(map ? { prev: JSON.stringify(map) } : {}),
     },
   }
-  const result = await applyPostCss(css, cssUrl, postcssPlugins, postcssOptions)
-  return result
+  const result = await applyPostCss(code, url, postcssPlugins, postcssOptions)
+
+  return {
+    code: result.css,
+    map: result.map.toJSON(),
+  }
 }
 
 const getCssMinificationPlugin = async (cssMinificationOptions = {}) => {

package/src/internal/building/css_module.js

@@ -0,0 +1,47 @@
+import { resolveUrl, urlToRelativeUrl } from "@jsenv/filesystem"
+
+import { replaceCssUrls } from "@jsenv/core/src/internal/building/css/replaceCssUrls.js"
+import { escapeTemplateStringSpecialCharacters } from "@jsenv/core/src/internal/escapeTemplateStringSpecialCharacters.js"
+import {
+  getCssSourceMappingUrl,
+  setCssSourceMappingUrl,
+} from "@jsenv/core/src/internal/sourceMappingURLUtils.js"
+
+export const convertCssTextToJavascriptModule = async ({
+  cssUrl,
+  jsUrl,
+  code,
+  map,
+}) => {
+  const directoryUrl = resolveUrl("./", cssUrl)
+  const jsDirectoryUrl = resolveUrl("./", jsUrl)
+  if (directoryUrl !== jsDirectoryUrl) {
+    const cssUrlReplaceResult = await replaceCssUrls({
+      url: cssUrl,
+      code,
+      map,
+      getUrlReplacementValue: ({ specifier }) => {
+        const urlForCss = resolveUrl(specifier, cssUrl)
+        const urlForJs = urlToRelativeUrl(urlForCss, jsUrl)
+        return urlForJs
+      },
+    })
+    code = cssUrlReplaceResult.code
+    map = cssUrlReplaceResult.map
+    const sourcemapUrlSpecifier = getCssSourceMappingUrl(code)
+    const sourcemapUrlForCss = resolveUrl(sourcemapUrlSpecifier, cssUrl)
+    const sourcemapUrlForJs = urlToRelativeUrl(sourcemapUrlForCss, jsUrl)
+    code = setCssSourceMappingUrl(code, sourcemapUrlForJs)
+  }
+
+  const cssTextEscaped = escapeTemplateStringSpecialCharacters(code)
+
+  return {
+    code: `
+const stylesheet = new CSSStyleSheet()
+
+stylesheet.replaceSync(\`${cssTextEscaped}\`)
+
+export default stylesheet`,
+  }
+}

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

@@ -17,7 +17,7 @@ Or be sure to also reference this url somewhere in the html file like
 */
 
 import {
-  urlToBasename,
+  urlToFilename,
   urlToRelativeUrl,
   resolveUrl,
   urlToParentUrl,
@@ -71,20 +71,18 @@ export const parseHtmlRessource = async (
 
   const linksMutations = collectNodesMutations(
     links,
-    notifiers,
+    {
+      ...notifiers,
+      ressourceHintNeverUsedCallback,
+    },
     htmlRessource,
-    [
-      linkStylesheetHrefVisitor,
-      (link, notifiers) =>
-        linkHrefVisitor(link, {
-          ...notifiers,
-          ressourceHintNeverUsedCallback,
-        }),
-    ],
+    [linkStylesheetHrefVisitor, linkHrefVisitor],
   )
   const scriptsMutations = collectNodesMutations(
     scripts,
-    notifiers,
+    {
+      ...notifiers,
+    },
     htmlRessource,
     [
       // regular javascript are not parseable by rollup
@@ -154,9 +152,10 @@ export const parseHtmlRessource = async (
     })
 
     const htmlAfterTransformation = htmlAstToHtmlString(htmlAst)
-    return minify
+    const html = minify
       ? minifyHtml(htmlAfterTransformation, minifyHtmlOptions)
       : htmlAfterTransformation
+    htmlRessource.buildEnd(html)
   }
 }
 
@@ -179,7 +178,7 @@ const regularScriptSrcVisitor = (
   }
 
   const remoteScriptReference = notifyReferenceFound({
-    ressourceContentTypeExpected: "application/javascript",
+    contentTypeExpected: "application/javascript",
     ressourceSpecifier: srcAttribute.value,
     ...referenceLocationFromHtmlNode(script, "src"),
   })
@@ -238,13 +237,14 @@ const regularScriptTextNodeVisitor = (
     return null
   }
 
+  const ressourceSpecifier = getUniqueNameForInlineHtmlNode(
+    script,
+    scripts,
+    `${urlToFilename(htmlRessource.url)}__inline__[id].js`,
+  )
   const jsReference = notifyReferenceFound({
-    ressourceContentTypeExpected: "application/javascript",
-    ressourceSpecifier: getUniqueNameForInlineHtmlNode(
-      script,
-      scripts,
-      `${urlToBasename(htmlRessource.url)}.[id].js`,
-    ),
+    contentTypeExpected: "application/javascript",
+    ressourceSpecifier,
     ...referenceLocationFromHtmlNode(script),
     contentType: "application/javascript",
     bufferBeforeBuild: Buffer.from(textNode.value),
@@ -270,7 +270,7 @@ const moduleScriptSrcVisitor = (script, { format, notifyReferenceFound }) => {
   }
 
   const remoteScriptReference = notifyReferenceFound({
-    ressourceContentTypeExpected: "application/javascript",
+    contentTypeExpected: "application/javascript",
     ressourceSpecifier: srcAttribute.value,
     ...referenceLocationFromHtmlNode(script, "src"),
     isJsModule: true,
@@ -334,13 +334,14 @@ const moduleScriptTextNodeVisitor = (
     return null
   }
 
+  const ressourceSpecifier = getUniqueNameForInlineHtmlNode(
+    script,
+    scripts,
+    `${urlToFilename(htmlRessource.url)}__inline__[id].js`,
+  )
   const jsReference = notifyReferenceFound({
-    ressourceContentTypeExpected: "application/javascript",
-    ressourceSpecifier: getUniqueNameForInlineHtmlNode(
-      script,
-      scripts,
-      `${urlToBasename(htmlRessource.url)}.[id].js`,
-    ),
+    contentTypeExpected: "application/javascript",
+    ressourceSpecifier,
     ...referenceLocationFromHtmlNode(script),
     contentType: "application/javascript",
     bufferBeforeBuild: textNode.value,
@@ -352,7 +353,10 @@ const moduleScriptTextNodeVisitor = (
       removeHtmlNodeAttribute(script, typeAttribute)
     }
     const { bufferAfterBuild } = jsReference.ressource
-    textNode.value = bufferAfterBuild
+    const jsText = String(bufferAfterBuild)
+    // ici on voudrait pouvoir ajouter le commentaire de la sourcemap
+    // sauf que cela se produit un poil plus tard je crois?
+    textNode.value = jsText
   }
 }
 
@@ -373,7 +377,7 @@ const importmapScriptSrcVisitor = (
   }
 
   const importmapReference = notifyReferenceFound({
-    ressourceContentTypeExpected: "application/importmap+json",
+    contentTypeExpected: "application/importmap+json",
     ressourceSpecifier: srcAttribute.value,
     ...referenceLocationFromHtmlNode(script, "src"),
     // here we want to force the fileName for the importmap
@@ -460,11 +464,11 @@ const importmapScriptTextNodeVisitor = (
   }
 
   const importmapReference = notifyReferenceFound({
-    ressourceContentTypeExpected: "application/importmap+json",
+    contentTypeExpected: "application/importmap+json",
     ressourceSpecifier: getUniqueNameForInlineHtmlNode(
       script,
       scripts,
-      `${urlToBasename(htmlRessource.url)}.[id].importmap`,
+      `${urlToFilename(htmlRessource.url)}__inline__[id].importmap`,
     ),
     ...referenceLocationFromHtmlNode(script),
 
@@ -500,7 +504,7 @@ const linkStylesheetHrefVisitor = (
   }
 
   const cssReference = notifyReferenceFound({
-    ressourceContentTypeExpected: "text/css",
+    contentTypeExpected: "text/css",
     ressourceSpecifier: hrefAttribute.value,
     ...referenceLocationFromHtmlNode(link, "href"),
   })
@@ -555,26 +559,25 @@ const linkHrefVisitor = (
     "modulepreload",
   ].includes(rel)
 
-  let ressourceContentTypeExpected
+  let contentTypeExpected
   const typeAttribute = getHtmlNodeAttributeByName(link, "type")
   const type = typeAttribute ? typeAttribute.value : ""
   let isJsModule = false
   if (type) {
-    ressourceContentTypeExpected = type
+    contentTypeExpected = type
   } else if (rel === "manifest") {
-    ressourceContentTypeExpected = "application/manifest+json"
+    contentTypeExpected = "application/manifest+json"
   } else if (rel === "modulepreload") {
-    ressourceContentTypeExpected = "application/javascript"
+    contentTypeExpected = "application/javascript"
     isJsModule = true
   }
 
   const linkReference = notifyReferenceFound({
     isRessourceHint,
-    ressourceContentTypeExpected,
+    contentTypeExpected,
     ressourceSpecifier: hrefAttribute.value,
     ...referenceLocationFromHtmlNode(link, "href"),
-    urlVersioningDisabled:
-      ressourceContentTypeExpected === "application/manifest+json",
+    urlVersioningDisabled: contentTypeExpected === "application/manifest+json",
     isJsModule,
   })
   return ({ getUrlRelativeToImporter }) => {
@@ -636,11 +639,11 @@ const styleTextNodeVisitor = (
   }
 
   const inlineStyleReference = notifyReferenceFound({
-    ressourceContentTypeExpected: "text/css",
+    contentTypeExpected: "text/css",
     ressourceSpecifier: getUniqueNameForInlineHtmlNode(
       style,
       styles,
-      `${urlToBasename(htmlRessource.url)}.[id].css`,
+      `${urlToFilename(htmlRessource.url)}__inline__[id].css`,
     ),
     ...referenceLocationFromHtmlNode(style),
 
@@ -714,9 +717,7 @@ const sourceSrcVisitor = (source, { notifyReferenceFound }) => {
 
   const typeAttribute = getHtmlNodeAttributeByName(source, "type")
   const srcReference = notifyReferenceFound({
-    ressourceContentTypeExpected: typeAttribute
-      ? typeAttribute.value
-      : undefined,
+    contentTypeExpected: typeAttribute ? typeAttribute.value : undefined,
     ressourceSpecifier: srcAttribute.value,
     ...referenceLocationFromHtmlNode(source, "src"),
   })