refactor: post-compile inline styles in compiler module

Author: ije

compiler/mod.ts

@@ -1,6 +1,7 @@
 import { ensureDir, path } from '../deps.ts'
 import { existsFileSync } from '../shared/fs.ts'
 import log from '../shared/log.ts'
+import type { LoaderPlugin } from '../types.ts'
 import { VERSION } from '../version.ts'
 import { checksum } from './dist/wasm-checksum.js'
 import init, { transformSync } from './dist/wasm-pack.js'
@@ -27,15 +28,18 @@ export type TransformOptions = {
   transpileOnly?: boolean
   bundleMode?: boolean
   bundleExternal?: string[]
+  // loaders for inline styles transform
+  loaders?: LoaderPlugin[]
 }
 
 export type TransformResult = {
   code: string
   deps: DependencyDescriptor[]
-  inlineStyles: Record<string, { type: string, quasis: string[], exprs: string[] }>
   map?: string
 }
 
+type InlineStyles = Record<string, { type: string, quasis: string[], exprs: string[] }>
+
 type DependencyDescriptor = {
   specifier: string
   isDynamic: boolean
@@ -106,7 +110,44 @@ export async function transform(url: string, code: string, options: TransformOpt
   if (t !== null) {
     log.debug(`init compiler wasm in ${Math.round(performance.now() - t)}ms`)
   }
-  return transformSync(url, code, options)
+
+  const { loaders, ...transformOptions } = options
+  let { code: jsContent, inlineStyles, deps, map } = transformSync(url, code, transformOptions)
+
+  // resolve inline-style
+  await Promise.all(Object.entries(inlineStyles as InlineStyles).map(async ([key, style]) => {
+    let tpl = style.quasis.reduce((tpl, quais, i, a) => {
+      tpl += quais
+      if (i < a.length - 1) {
+        tpl += `%%aleph-inline-style-expr-${i}%%`
+      }
+      return tpl
+    }, '')
+      .replace(/\:\s*%%aleph-inline-style-expr-(\d+)%%/g, (_, id) => `: var(--aleph-inline-style-expr-${id})`)
+      .replace(/%%aleph-inline-style-expr-(\d+)%%/g, (_, id) => `/*%%aleph-inline-style-expr-${id}%%*/`)
+    if (style.type !== 'css' && loaders !== undefined) {
+      for (const loader of loaders) {
+        if (loader.test.test(`.${style.type}`)) {
+          const { code, type } = await loader.transform({ url, content: (new TextEncoder).encode(tpl) })
+          if (type === 'css') {
+            tpl = code
+            break
+          }
+        }
+      }
+    }
+    // todo: postcss and minify
+    tpl = tpl.replace(
+      /\: var\(--aleph-inline-style-expr-(\d+)\)/g,
+      (_, id) => ': ${' + style.exprs[parseInt(id)] + '}'
+    ).replace(
+      /\/\*%%aleph-inline-style-expr-(\d+)%%\*\//g,
+      (_, id) => '${' + style.exprs[parseInt(id)] + '}'
+    )
+    jsContent = jsContent.replace(`"%%${key}-placeholder%%"`, '`' + tpl + '`')
+  }))
+
+  return { code: jsContent, deps, map }
 }
 
 /**

server/app.ts

@@ -12,7 +12,7 @@ import type { Config, LoaderPlugin, LoaderTransformResult, ModuleOptions, Router
 import { VERSION } from '../version.ts'
 import { Bundler } from './bundler.ts'
 import { defaultConfig, loadConfig } from './config.ts'
-import { clearCompilation, computeHash, createHtml, formatBytesWithColor, getAlephPkgUri, getRelativePath, reFullVersion, reHashJs, reHashResolve, toLocalUrl, trimModuleExt } from './helper.ts'
+import { clearCompilation, computeHash, createHtml, formatBytesWithColor, getAlephPkgUri, getRelativePath, isLoaderPlugin, reFullVersion, reHashJs, reHashResolve, toLocalUrl, trimModuleExt } from './helper.ts'
 
 /** A module includes the compilation details. */
 export type Module = {
@@ -730,13 +730,14 @@ export class Application implements ServerApplication {
       }
 
       const t = performance.now()
-      const { code, map, deps, inlineStyles } = await transform(url, sourceCode, {
+      const { code, map, deps } = await transform(url, sourceCode, {
         ...this.defaultCompileOptions,
         swcOptions: {
           target: 'es2020',
           sourceType
         },
         sourceMap: this.isDev,
+        loaders: this.config.plugins.filter(isLoaderPlugin)
       })
 
       fsync = true
@@ -745,39 +746,6 @@ export class Application implements ServerApplication {
         jsSourceMap = map
       }
 
-      // resolve inline-style
-      await Promise.all(Object.entries(inlineStyles).map(async ([key, style]) => {
-        let tpl = style.quasis.reduce((tpl, quais, i, a) => {
-          tpl += quais
-          if (i < a.length - 1) {
-            tpl += `%%aleph-inline-style-expr-${i}%%`
-          }
-          return tpl
-        }, '')
-          .replace(/\:\s*%%aleph-inline-style-expr-(\d+)%%/g, (_, id) => `: var(--aleph-inline-style-expr-${id})`)
-          .replace(/%%aleph-inline-style-expr-(\d+)%%/g, (_, id) => `/*%%aleph-inline-style-expr-${id}%%*/`)
-        if (style.type !== 'css') {
-          for (const plugin of this.config.plugins) {
-            if (plugin.type === 'loader' && plugin.test.test(`.${style.type}`)) {
-              const { code, type } = await plugin.transform({ url, content: (new TextEncoder).encode(tpl) })
-              if (type === 'css') {
-                tpl = code
-                break
-              }
-            }
-          }
-        }
-        // todo: postcss and minify
-        tpl = tpl.replace(
-          /\: var\(--aleph-inline-style-expr-(\d+)\)/g,
-          (_, id) => ': ${' + style.exprs[parseInt(id)] + '}'
-        ).replace(
-          /\/\*%%aleph-inline-style-expr-(\d+)%%\*\//g,
-          (_, id) => '${' + style.exprs[parseInt(id)] + '}'
-        )
-        jsContent = jsContent.replace(`"%%${key}-placeholder%%"`, '`' + tpl + '`')
-      }))
-
       mod.deps = deps.map(({ specifier, isDynamic }) => {
         const dep: DependencyDescriptor = { url: specifier, hash: '' }
         if (isDynamic) {

server/helper.ts

@@ -2,6 +2,7 @@ import { colors, createHash, path } from '../deps.ts'
 import { existsDirSync } from '../shared/fs.ts'
 import { moduleExts } from '../shared/constants.ts'
 import util from '../shared/util.ts'
+import type { Plugin, LoaderPlugin } from '../types.ts'
 import { VERSION } from '../version.ts'
 
 export const reLocaleID = /^[a-z]{2}(-[a-zA-Z0-9]+)?$/
@@ -42,6 +43,11 @@ export const AlephRuntimeCode = `
   });
 `
 
+/** check the plugin whether is a loader plugin. */
+export function isLoaderPlugin(plugin: Plugin): plugin is LoaderPlugin {
+  return plugin.type === 'loader'
+}
+
 /** get aleph pkg uri. */
 export function getAlephPkgUri() {
   const DEV_PORT = Deno.env.get('ALEPH_DEV_PORT')