feat: re-add the postcss option for Config type

Author: ije

compiler/css.ts

@@ -1,11 +1,9 @@
-import { Plugin, PluginCreator } from 'https://esm.sh/[email protected]'
 import util from '../shared/util.ts'
+import { PostCSSPlugin } from '../types.ts'
 
 const postcssVersion = '8.2.8'
 const productionOnlyPostcssPlugins = ['autoprefixer']
 
-export type PostCSSPlugin = string | [string, any] | Plugin | PluginCreator<any>
-
 export class CSSProcessor {
   #isProd: boolean
   #postcssPlugins: PostCSSPlugin[]

server/app.ts

@@ -40,7 +40,7 @@ import type {
 } from '../types.ts'
 import { VERSION } from '../version.ts'
 import { Bundler, bundlerRuntimeCode } from './bundler.ts'
-import { defaultConfig, loadConfig, loadImportMap, loadPostCSSConfig } from './config.ts'
+import { defaultConfig, loadConfig, loadImportMap } from './config.ts'
 import {
   computeHash,
   formatBytesWithColor,
@@ -108,16 +108,17 @@ export class Application implements ServerApplication {
   /** initiate application */
   private async init(reload: boolean) {
     let t = performance.now()
-    const [config, importMap, postcssConfig] = await Promise.all([
+    const [config, importMap,] = await Promise.all([
       loadConfig(this.workingDir),
       loadImportMap(this.workingDir),
-      loadPostCSSConfig(this.workingDir),
     ])
 
     Object.assign(this.config, config)
     Object.assign(this.importMap, importMap)
     this.#pageRouting.config(this.config)
-    this.#cssProcesser.config(!this.isDev, postcssConfig.plugins)
+    this.#cssProcesser.config(!this.isDev, this.config.postcss.plugins)
+
+    console.log(this.config.postcss.plugins)
 
     // inject env variables
     Deno.env.set('ALEPH_VERSION', VERSION)
@@ -150,7 +151,7 @@ export class Application implements ServerApplication {
     const configChecksum = computeHash(JSON.stringify({
       ...this.sharedCompileOptions,
       plugins: this.config.plugins.filter(isLoaderPlugin).map(({ name }) => name),
-      postcssPlugins: postcssConfig.plugins.map(p => p.toString())
+      postcssPlugins: this.config.postcss.plugins.map(p => p.toString())
     }, (key: string, value: any) => {
       if (key === 'inlineStylePreprocess') {
         return void 0

server/config.ts

@@ -1,11 +1,10 @@
 import { join } from 'https://deno.land/[email protected]/path/mod.ts'
-import type { PostCSSPlugin } from '../compiler/css.ts'
 import type { ImportMap } from '../compiler/mod.ts'
 import { defaultReactVersion } from '../shared/constants.ts'
 import { existsFileSync, existsDirSync } from '../shared/fs.ts'
 import log from '../shared/log.ts'
 import util from '../shared/util.ts'
-import type { Config } from '../types.ts'
+import type { Config, PostCSSPlugin } from '../types.ts'
 import { getAlephPkgUri, reLocaleID } from './helper.ts'
 
 export const defaultConfig: Readonly<Required<Config>> = {
@@ -19,6 +18,7 @@ export const defaultConfig: Readonly<Required<Config>> = {
   rewrites: {},
   ssr: {},
   plugins: [],
+  postcss: { plugins: ['autoprefixer'] },
   headers: {},
   env: {},
 }
@@ -60,6 +60,7 @@ export async function loadConfig(workingDir: string): Promise<Config> {
     ssr,
     rewrites,
     plugins,
+    postcss,
     headers,
     env,
   } = data
@@ -110,32 +111,16 @@ export async function loadConfig(workingDir: string): Promise<Config> {
   if (util.isNEArray(plugins)) {
     config.plugins = plugins
   }
+  if (isPostcssConfig(postcss)) {
+    config.postcss = postcss
+  } else {
+    config.postcss = await loadPostCSSConfig(workingDir)
+  }
 
   return config
 }
 
-export async function loadPostCSSConfig(workingDir: string): Promise<{ plugins: PostCSSPlugin[] }> {
-  for (const name of Array.from(['ts', 'js', 'json']).map(ext => `postcss.config.${ext}`)) {
-    const p = join(workingDir, 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 config
-      }
-    }
-  }
 
-  return { plugins: ['autoprefixer'] }
-}
 
 /** load import maps from `import_map.json` */
 export async function loadImportMap(workingDir: string): Promise<ImportMap> {
@@ -172,6 +157,29 @@ export async function loadImportMap(workingDir: string): Promise<ImportMap> {
   return importMap
 }
 
+async function loadPostCSSConfig(workingDir: string): Promise<{ plugins: PostCSSPlugin[] }> {
+  for (const name of Array.from(['ts', 'js', 'json']).map(ext => `postcss.config.${ext}`)) {
+    const p = join(workingDir, 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 config
+      }
+    }
+  }
+
+  return { plugins: ['autoprefixer'] }
+}
+
 function isFramework(v: any): v is 'react' {
   switch (v) {
     case 'react':

server/helper.ts

@@ -3,14 +3,14 @@ import { createHash } from 'https://deno.land/[email protected]/hash/mod.ts'
 import { relative } from 'https://deno.land/[email protected]/path/mod.ts'
 import { existsDirSync } from '../shared/fs.ts'
 import util from '../shared/util.ts'
-import type { Plugin, LoaderPlugin } from '../types.ts'
+import type { ServerPlugin, LoaderPlugin } from '../types.ts'
 import { VERSION } from '../version.ts'
 
 export const reLocaleID = /^[a-z]{2}(-[a-zA-Z0-9]+)?$/
 export const reFullVersion = /@v?\d+\.\d+\.\d+/i
 
 /** check the plugin whether is a loader plugin. */
-export function isLoaderPlugin(plugin: Plugin): plugin is LoaderPlugin {
+export function isLoaderPlugin(plugin: LoaderPlugin | ServerPlugin): plugin is LoaderPlugin {
   return plugin.type === 'loader'
 }
 

types.ts

@@ -1,5 +1,6 @@
 import type { BufReader, BufWriter } from 'https://deno.land/[email protected]/io/bufio.ts'
 import type { MultipartFormData } from 'https://deno.land/[email protected]/mime/multipart.ts'
+import { Plugin, PluginCreator } from 'https://esm.sh/[email protected]'
 
 /**
  * A loader plugin to load source media.
@@ -47,10 +48,7 @@ export type ServerPlugin = {
   onInit(app: ServerApplication): Promise<void> | void
 }
 
-/**
- * A plugin for the aleph server application.
- */
-export type Plugin = LoaderPlugin | ServerPlugin
+export type PostCSSPlugin = string | [string, any] | Plugin | PluginCreator<any>
 
 /**
  * The config for the aleph server application.
@@ -73,7 +71,9 @@ export type Config = {
   /** `ssr` specifies the options for **SSR**. */
   ssr?: boolean | SSROptions
   /** `plugins` specifies some plugins for the appliaction. */
-  plugins?: Plugin[]
+  plugins?: (LoaderPlugin | ServerPlugin)[]
+  /** `postcss` specifies the postcss plugins. */
+  postcss?: { plugins: PostCSSPlugin[] }
   /** `headers` appends custom headers for server requests. */
   headers?: Record<string, string>
   /** `rewrites` specifies the server rewrite map. */