@jsenv/core 27.0.0-alpha.51 → 27.0.0-alpha.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "27.0.0-alpha.51",
+  "version": "27.0.0-alpha.52",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "repository": {
@@ -68,7 +68,7 @@
     "@jsenv/node-esm-resolution": "0.0.6",
     "@jsenv/server": "12.6.2",
     "@jsenv/uneval": "1.6.0",
-    "@jsenv/utils": "1.7.1",
+    "@jsenv/utils": "1.7.2",
     "construct-style-sheets-polyfill": "3.1.0",
     "cssnano": "5.1.7",
     "cssnano-preset-default": "5.2.7",

package/src/build/build.js

@@ -29,6 +29,7 @@ import {
   parseHtmlString,
   stringifyHtmlAst,
 } from "@jsenv/utils/html_ast/html_ast.js"
+import { sortByDependencies } from "@jsenv/utils/graph/sort_by_dependencies.js"
 
 import { jsenvPluginUrlAnalysis } from "../plugins/url_analysis/jsenv_plugin_url_analysis.js"
 import { jsenvPluginInline } from "../plugins/inline/jsenv_plugin_inline.js"
@@ -38,7 +39,6 @@ import { getCorePlugins } from "../plugins/plugins.js"
 import { createKitchen } from "../omega/kitchen.js"
 import { loadUrlGraph } from "../omega/url_graph/url_graph_load.js"
 import { createUrlGraphSummary } from "../omega/url_graph/url_graph_report.js"
-import { sortUrlGraphByDependencies } from "../omega/url_graph/url_graph_sort.js"
 import { isWebWorkerEntryPointReference } from "../omega/web_workers.js"
 
 import { GRAPH } from "./graph_utils.js"
@@ -783,7 +783,7 @@ const applyUrlVersioning = async ({
 }) => {
   const versioningTask = createTaskLog(logger, "inject version in urls")
   try {
-    const urlsSorted = sortUrlGraphByDependencies(finalGraph)
+    const urlsSorted = sortByDependencies(finalGraph.urlInfos)
     urlsSorted.forEach((url) => {
       if (url.startsWith("data:")) {
         return

package/src/plugins/bundling/css/bundle_css.js

@@ -1,21 +1,140 @@
-import { bundleWithParcel } from "@jsenv/utils/css_ast/parcel_css.js"
+/*
+ * Each @import found in css is replaced by the file content
+ * - There is no need to worry about urls (such as background-image: url())
+ *   because they are absolute (file://*) and will be made relative again by jsenv build
+ * - The sourcemap are not generated but ideally they should be
+ *   It can be quite challenging, see "bundle_sourcemap.js"
+ */
 
+import { applyPostCss } from "@jsenv/utils/css_ast/apply_post_css.js"
+import { postCssPluginUrlVisitor } from "@jsenv/utils/css_ast/postcss_plugin_url_visitor.js"
+import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+import { sortByDependencies } from "@jsenv/utils/graph/sort_by_dependencies.js"
+
+// Do not use until https://github.com/parcel-bundler/parcel-css/issues/181
 export const bundleCss = async ({ cssUrlInfos, context }) => {
   const bundledCssUrlInfos = {}
+  const cssBundleInfos = await performCssBundling({
+    cssEntryUrlInfos: cssUrlInfos,
+    context,
+  })
   cssUrlInfos.forEach((cssUrlInfo) => {
-    const { code, map } = bundleWithParcel(cssUrlInfo, context)
-    const content = String(code)
-    const sourcemap = map
-    // here we need to replace css urls to ensure
-    // all urls targets the correct stuff
     bundledCssUrlInfos[cssUrlInfo.url] = {
       data: {
         generatedBy: "parcel",
       },
       contentType: "text/css",
-      content,
-      sourcemap,
+      content: cssBundleInfos[cssUrlInfo.url].bundleContent,
     }
   })
   return bundledCssUrlInfos
 }
+
+const performCssBundling = async ({ cssEntryUrlInfos, context }) => {
+  const cssBundleInfos = await loadCssUrls({
+    cssEntryUrlInfos,
+    context,
+  })
+  const cssUrlsSorted = sortByDependencies(cssBundleInfos)
+  cssUrlsSorted.forEach((cssUrl) => {
+    const cssBundleInfo = cssBundleInfos[cssUrl]
+    const magicSource = createMagicSource(cssBundleInfo.content)
+    cssBundleInfo.cssUrls.forEach((cssUrl) => {
+      if (cssUrl.type === "@import") {
+        magicSource.replace({
+          start: cssUrl.atRuleStart,
+          end: cssUrl.atRuleEnd,
+          replacement: cssBundleInfos[cssUrl.url].bundleContent,
+        })
+      }
+    })
+    const { content } = magicSource.toContentAndSourcemap()
+    cssBundleInfo.bundleContent = content.trim()
+  })
+  return cssBundleInfos
+}
+
+const parseCssUrls = async ({ css, url }) => {
+  const cssUrls = []
+  await applyPostCss({
+    sourcemaps: false,
+    plugins: [
+      postCssPluginUrlVisitor({
+        urlVisitor: ({
+          type,
+          specifier,
+          specifierStart,
+          specifierEnd,
+          atRuleStart,
+          atRuleEnd,
+        }) => {
+          cssUrls.push({
+            type,
+            url: new URL(specifier, url).href,
+            specifierStart,
+            specifierEnd,
+            atRuleStart,
+            atRuleEnd,
+          })
+        },
+      }),
+    ],
+    url,
+    content: css,
+  })
+
+  return cssUrls
+}
+
+const loadCssUrls = async ({ cssEntryUrlInfos, context }) => {
+  const cssBundleInfos = {}
+  const promises = []
+  const promiseMap = new Map()
+
+  const load = (cssUrlInfo) => {
+    const promiseFromData = promiseMap.get(cssUrlInfo.url)
+    if (promiseFromData) return promiseFromData
+    const promise = _load(cssUrlInfo)
+    promises.push(promise)
+    promiseMap.set(cssUrlInfo.url, promise)
+    return promise
+  }
+
+  const _load = async (cssUrlInfo) => {
+    const cssUrls = await parseCssUrls({
+      css: cssUrlInfo.content,
+      url: cssUrlInfo.url,
+    })
+    const cssBundleInfo = {
+      content: cssUrlInfo.content,
+      cssUrls,
+      dependencies: [],
+    }
+    cssBundleInfos[cssUrlInfo.url] = cssBundleInfo
+    cssUrls.forEach((cssUrl) => {
+      if (cssUrl.type === "@import") {
+        cssBundleInfo.dependencies.push(cssUrl.url)
+        const importedCssUrlInfo = context.urlGraph.getUrlInfo(cssUrl.url)
+        load(importedCssUrlInfo)
+      }
+    })
+  }
+
+  cssEntryUrlInfos.forEach((cssEntryUrlInfo) => {
+    load(cssEntryUrlInfo)
+  })
+
+  const waitAll = async () => {
+    if (promises.length === 0) {
+      return
+    }
+    const promisesToWait = promises.slice()
+    promises.length = 0
+    await Promise.all(promisesToWait)
+    await waitAll()
+  }
+  await waitAll()
+  promiseMap.clear()
+
+  return cssBundleInfos
+}

package/src/plugins/url_analysis/css/css_urls.js

@@ -13,19 +13,26 @@ export const parseAndTransformCssUrls = async (urlInfo, context) => {
     sourcemaps: false,
     plugins: [
       postCssPluginUrlVisitor({
-        urlVisitor: ({ type, specifier, line, column, start, end }) => {
+        urlVisitor: ({
+          type,
+          specifier,
+          specifierStart,
+          specifierEnd,
+          specifierLine,
+          specifierColumn,
+        }) => {
           const [reference] = context.referenceUtils.found({
             type: `css_${type}`,
             specifier,
-            specifierStart: start,
-            specifierEnd: end,
-            specifierLine: line,
-            specifierColumn: column,
+            specifierStart,
+            specifierEnd,
+            specifierLine,
+            specifierColumn,
           })
           actions.push(async () => {
             magicSource.replace({
-              start,
-              end,
+              start: specifierStart,
+              end: specifierEnd,
               replacement: await context.referenceUtils.readGeneratedSpecifier(
                 reference,
               ),

package/src/omega/url_graph/url_graph_sort.js

@@ -1,29 +0,0 @@
-export const sortUrlGraphByDependencies = (urlGraph) => {
-  const { urlInfos } = urlGraph
-
-  const visited = []
-  const sorted = []
-  const circular = []
-  const visit = (url) => {
-    const isSorted = sorted.includes(url)
-    if (isSorted) {
-      return
-    }
-    const isVisited = visited.includes(url)
-    if (isVisited) {
-      circular.push(url)
-      sorted.push(url)
-    } else {
-      visited.push(url)
-      urlInfos[url].dependencies.forEach((dependencyUrl) => {
-        visit(dependencyUrl, url)
-      })
-      sorted.push(url)
-    }
-  }
-  Object.keys(urlInfos).forEach((url) => {
-    visit(url)
-  })
-  sorted.circular = circular
-  return sorted
-}