refactor: improve css-loader plugin

Author: ije

plugins/css.ts

@@ -1,6 +1,5 @@
-import CleanCSS from 'https://esm.sh/[email protected]?no-check'
-import type { AcceptedPlugin } from 'https://esm.sh/[email protected]'
-import PostCSS from 'https://esm.sh/[email protected]'
+import CleanCSS from 'https://esm.sh/[email protected]?no-check'
+import PostCSS, { AcceptedPlugin } from 'https://esm.sh/[email protected]'
 import { path } from '../deps.ts'
 import { existsFileSync } from '../shared/fs.ts'
 import util from '../shared/util.ts'
@@ -16,47 +15,22 @@ type Options = {
 }
 
 export default (options?: Options): LoaderPlugin => {
-  let postcss: any = null
-  let loading = (async () => {
-    if (options?.postcss) {
-      postcss = PostCSS(await loadPostcssPlugins(options.postcss.plugins))
-      return
-    }
-
-    for (const name of Array.from(['ts', 'js', 'json']).map(ext => `postcss.config.${ext}`)) {
-      const p = path.join(Deno.cwd(), name)
-      if (existsFileSync(p)) {
-        let config: any = null
-        if (name.endsWith('.json')) {
-          config = JSON.parse(await Deno.readTextFile(p))
-        } else {
-          const mod = await import('file://' + p)
-          config = mod.default
-          if (util.isFunction(config)) {
-            config = await config()
-          }
-        }
-        if (isPostcssConfig(config)) {
-          postcss = PostCSS(await loadPostcssPlugins(config.plugins))
-          return
-        }
-      }
-    }
+  const isDev = Deno.env.get('BUILD_MODE') === 'production'
+  const decoder = new TextDecoder()
 
-    postcss = PostCSS(await loadPostcssPlugins(['autoprefixer']))
-  })()
+  let pcssProcessor: any = null
 
   return {
     name: 'css-loader',
     type: 'loader',
     test: /\.p?css$/i,
     acceptHMR: true,
     async transform({ url, content }) {
-      if (postcss == null) {
-        await loading
+      if (pcssProcessor == null) {
+        pcssProcessor = await initPostCSSProcessor(options)
       }
-      const pcss = (await postcss!.process((new TextDecoder).decode(content)).async()).content
-      const css = Deno.env.get('BUILD_MODE') === 'production' ? cleanCSS.minify(pcss).styles : pcss
+      const { content: pcss } = await pcssProcessor.process(decoder.decode(content)).async()
+      const css = isDev ? cleanCSS.minify(pcss).styles : pcss
       if (url.startsWith('#inline-style-')) {
         return {
           code: css,
@@ -75,6 +49,33 @@ export default (options?: Options): LoaderPlugin => {
   }
 }
 
+async function initPostCSSProcessor(options?: Options) {
+  if (options?.postcss) {
+    return PostCSS(await loadPostcssPlugins(options.postcss.plugins))
+  }
+
+  for (const name of Array.from(['ts', 'js', 'json']).map(ext => `postcss.config.${ext}`)) {
+    const p = path.join(Deno.cwd(), name)
+    if (existsFileSync(p)) {
+      let config: any = null
+      if (name.endsWith('.json')) {
+        config = JSON.parse(await Deno.readTextFile(p))
+      } else {
+        const mod = await import('file://' + p)
+        config = mod.default
+        if (util.isFunction(config)) {
+          config = await config()
+        }
+      }
+      if (isPostcssConfig(config)) {
+        return PostCSS(await loadPostcssPlugins(config.plugins))
+      }
+    }
+  }
+
+  return PostCSS(await loadPostcssPlugins(['autoprefixer']))
+}
+
 async function loadPostcssPlugins(plugins: (string | [string, any] | AcceptedPlugin)[]) {
   const isDev = Deno.env.get('BUILD_MODE') === 'development'
   return await Promise.all(plugins.filter(p => {
@@ -88,17 +89,17 @@ async function loadPostcssPlugins(plugins: (string | [string, any] | AcceptedPlu
     return true
   }).map(async p => {
     if (util.isNEString(p)) {
-      return await importPostcssPlugin(p)
+      return await importPostcssPluginByName(p)
     } else if (Array.isArray(p)) {
-      const Plugin = await importPostcssPlugin(p[0])
+      const Plugin = await importPostcssPluginByName(p[0])
       return [Plugin, p[1]]
     } else {
       return p
     }
-  }) || [])
+  }))
 }
 
-async function importPostcssPlugin(name: string) {
+async function importPostcssPluginByName(name: string) {
   const { default: Plugin } = await import(`https://esm.sh/${name}[email protected]&no-check`)
   return Plugin
 }