Support CSS modules

Author: ije

server/app.ts

@@ -14,7 +14,6 @@ import {
   buildChecksum,
   ImportMap,
   parseExportNames,
-  ReactResolve,
   SourceType,
   transform,
   TransformOptions
@@ -31,12 +30,11 @@ import {
 import log from '../shared/log.ts'
 import util from '../shared/util.ts'
 import type {
-  Config,
   RouterURL,
   ServerApplication
 } from '../types.ts'
 import { VERSION } from '../version.ts'
-import { defaultConfig, loadConfig, loadImportMap } from './config.ts'
+import { defaultConfig, loadConfig, loadImportMap, RequiredConfig } from './config.ts'
 import { CSSProcessor } from './css.ts'
 import {
   computeHash,
@@ -72,7 +70,7 @@ type TransformFn = (url: string, code: string) => string
 export class Application implements ServerApplication {
   readonly workingDir: string
   readonly mode: 'development' | 'production'
-  readonly config: Required<Config & { react: ReactResolve }>
+  readonly config: RequiredConfig
   readonly importMap: ImportMap
   readonly ready: Promise<void>
 
@@ -113,7 +111,7 @@ export class Application implements ServerApplication {
     Object.assign(this.config, config)
     Object.assign(this.importMap, importMap)
     this.#pageRouting.config(this.config)
-    this.#cssProcesser.config(!this.isDev, this.config.postcss.plugins)
+    this.#cssProcesser.config(!this.isDev, this.config.css)
 
     // inject env variables
     Deno.env.set('ALEPH_VERSION', VERSION)
@@ -145,15 +143,18 @@ export class Application implements ServerApplication {
     const buildManifestFile = join(this.buildDir, 'build.manifest.json')
     const plugins = computeHash(JSON.stringify({
       plugins: this.config.plugins.filter(isLoaderPlugin).map(({ name }) => name),
-      postcssPlugins: this.config.postcss.plugins.map(p => {
-        if (util.isString(p)) {
-          return p
-        } else if (util.isArray(p)) {
-          return p[0] + JSON.stringify(p[1])
-        } else {
-          p.toString()
-        }
-      }),
+      css: {
+        modules: this.config.css.modules,
+        postcss: this.config.css.postcss.plugins.map(p => {
+          if (util.isString(p)) {
+            return p
+          } else if (util.isArray(p)) {
+            return p[0] + JSON.stringify(p[1])
+          } else {
+            p.toString()
+          }
+        })
+      },
       react: this.config.react,
     }, (key: string, value: any) => {
       if (key === 'inlineStylePreprocess') {
@@ -711,7 +712,6 @@ export class Application implements ServerApplication {
               const { code, type } = await loader.transform({ url: key, content: (new TextEncoder).encode(tpl) })
               if (type === 'css') {
                 tpl = code
-                break
               }
             }
           }
@@ -918,9 +918,11 @@ export class Application implements ServerApplication {
     sourceContent: Uint8Array,
     contentType: string | null
   ): Promise<{ code: string, type: SourceType, map: string | null } | null> {
-    let sourceCode = (new TextDecoder).decode(sourceContent)
+    const encoder = new TextEncoder()
+    const decoder = new TextDecoder()
+
     let sourceType: SourceType | null = null
-    let sourceMap: string | null = null
+    let sourceMap: Uint8Array | null = null
 
     if (contentType !== null) {
       switch (contentType.split(';')[0].trim()) {
@@ -944,10 +946,10 @@ export class Application implements ServerApplication {
 
     for (const loader of this.loaders) {
       if (loader.test.test(url) && loader.transform) {
-        const { code, type = 'js', map } = await loader.transform({ url, content: sourceContent })
-        sourceCode = code
+        const { code, type = 'js', map } = await loader.transform({ url, content: sourceContent, map: sourceMap ?? undefined })
+        sourceContent = encoder.encode(code)
         if (map) {
-          sourceMap = map
+          sourceMap = encoder.encode(map)
         }
         switch (type) {
           case 'js':
@@ -966,7 +968,6 @@ export class Application implements ServerApplication {
             sourceType = SourceType.CSS
             break
         }
-        break
       }
     }
 
@@ -985,6 +986,7 @@ export class Application implements ServerApplication {
         case 'tsx':
           sourceType = SourceType.TSX
           break
+        case 'postcss':
         case 'pcss':
         case 'css':
           sourceType = SourceType.CSS
@@ -995,15 +997,19 @@ export class Application implements ServerApplication {
     }
 
     if (sourceType === SourceType.CSS) {
-      const { code, map } = await this.#cssProcesser.transform(url, sourceCode)
-      sourceCode = code
+      const { code, map } = await this.#cssProcesser.transform(url, (new TextDecoder).decode(sourceContent))
+      sourceContent = encoder.encode(code)
       sourceType = SourceType.JS
       if (map) {
-        sourceMap = map
+        sourceMap = encoder.encode(map)
       }
     }
 
-    return { code: sourceCode, type: sourceType, map: sourceMap }
+    return {
+      code: decoder.decode(sourceContent),
+      type: sourceType,
+      map: sourceMap ? decoder.decode(sourceMap) : null
+    }
   }
 
   /** compile a moudle by given url, then cache on the disk. */

server/config.ts

@@ -4,10 +4,15 @@ 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, PostCSSPlugin } from '../types.ts'
+import type { Config, PostCSSPlugin, CSSOptions } from '../types.ts'
 import { getAlephPkgUri, reLocaleID } from './helper.ts'
 
-export const defaultConfig: Readonly<Required<Config> & { react: ReactResolve }> = {
+export interface RequiredConfig extends Required<Omit<Config, 'css'>> {
+  react: ReactResolve,
+  css: CSSOptions
+}
+
+export const defaultConfig: Readonly<RequiredConfig> = {
   framework: 'react',
   buildTarget: 'es2015',
   baseUrl: '/',
@@ -18,12 +23,15 @@ export const defaultConfig: Readonly<Required<Config> & { react: ReactResolve }>
   rewrites: {},
   ssr: {},
   plugins: [],
-  postcss: { plugins: ['autoprefixer'] },
+  css: {
+    modules: false,
+    postcss: { plugins: ['autoprefixer'] },
+  },
   headers: {},
   env: {},
   react: {
     version: defaultReactVersion,
-    esmShBuildVersion: 38,
+    esmShBuildVersion: 39,
   }
 }
 
@@ -64,7 +72,7 @@ export async function loadConfig(workingDir: string): Promise<Config> {
     ssr,
     rewrites,
     plugins,
-    postcss,
+    css,
     headers,
     env,
   } = data
@@ -115,10 +123,11 @@ 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)
+  if (util.isPlainObject(css)) {
+    config.css = {
+      modules: util.isPlainObject(css.modules) ? css.modules : false,
+      postcss: isPostcssConfig(css.postcss) ? css.postcss : defaultConfig.css.postcss
+    }
   }
 
   return config

server/css.ts

@@ -1,47 +1,76 @@
 import util from '../shared/util.ts'
-import { PostCSSPlugin } from '../types.ts'
+import { PostCSSPlugin, CSSOptions } from '../types.ts'
 
 const postcssVersion = '8.2.8'
 const productionOnlyPostcssPlugins = ['autoprefixer']
 
 export class CSSProcessor {
   #isProd: boolean
-  #postcssPlugins: PostCSSPlugin[]
+  #options: CSSOptions
   #postcss: any
   #cleanCSS: any
+  #modulesJSON: Record<string, Record<string, string>>
 
   constructor() {
     this.#isProd = false
-    this.#postcssPlugins = []
+    this.#options = {
+      modules: false,
+      postcss: { plugins: ['autoprefixer'] },
+    }
     this.#postcss = null
     this.#cleanCSS = null
+    this.#modulesJSON = {}
   }
 
-  config(isProd: boolean, postcssPlugins: PostCSSPlugin[]) {
+  config(isProd: boolean, options: CSSOptions) {
     this.#isProd = isProd
-    this.#postcssPlugins = postcssPlugins
+    if (util.isPlainObject(options.modules)) {
+      options.postcss.plugins = options.postcss.plugins.filter(p => {
+        if (p === 'postcss-modules' || (Array.isArray(p) && p[0] === 'postcss-modules')) {
+          return false
+        }
+        return true
+      })
+      options.postcss.plugins.push(['postcss-modules', {
+        ...options.modules,
+        getJSON: (url: string, json: Record<string, string>) => {
+          this.#modulesJSON = { [url]: json }
+        },
+      }])
+    }
+    this.#options = options
+  }
+
+  private getModulesJSON(url: string) {
+    const json = this.#modulesJSON[url] || {}
+    if (url in this.#modulesJSON) {
+      delete this.#modulesJSON[url]
+    }
+    return json
   }
 
-  async transform(url: string, content: string): Promise<{ code: string, map?: string }> {
+  async transform(url: string, content: string): Promise<{ code: string, map?: string, classNames?: Record<string, string> }> {
     if (util.isLikelyHttpURL(url)) {
       return {
         code: [
           `import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"`,
-          `applyCSS(${JSON.stringify(url)})`
+          `applyCSS(${JSON.stringify(url)})`,
+          `export default { __url$: ${JSON.stringify(url)} }`
         ].join('\n')
       }
     }
 
     if (this.#postcss == null) {
       const [postcss, cleanCSS] = await Promise.all([
-        initPostCSS(this.#postcssPlugins),
+        initPostCSS(this.#options.postcss.plugins),
         this.#isProd ? initCleanCSS() : Promise.resolve(null)
       ])
       this.#postcss = postcss
       this.#cleanCSS = cleanCSS
     }
 
-    const { content: pcss } = await this.#postcss.process(content).async()
+    const { content: pcss } = await this.#postcss.process(content, { from: url }).async()
+    const modulesJSON = this.getModulesJSON(url)
     const css = this.#isProd ? this.#cleanCSS.minify(pcss).styles : pcss
 
     if (url.startsWith('#inline-style-')) {
@@ -54,7 +83,9 @@ export class CSSProcessor {
     return {
       code: [
         `import { applyCSS } from "https://deno.land/x/aleph/framework/core/style.ts"`,
-        `applyCSS(${JSON.stringify(url)}, ${JSON.stringify(css)})`
+        `const css = ${JSON.stringify(css)}`,
+        `applyCSS(${JSON.stringify(url)}, css)`,
+        `export default { __url$: ${JSON.stringify(url)}, __css$: css, ${util.trimSuffix(JSON.stringify(modulesJSON).slice(1), '}')}}`
       ].join('\n'),
       // todo: generate map
     }
@@ -83,7 +114,10 @@ async function initPostCSS(plugins: PostCSSPlugin[]) {
       return await importPostcssPluginByName(p)
     } else if (Array.isArray(p)) {
       const Plugin = await importPostcssPluginByName(p[0])
-      return [Plugin, p[1]]
+      if (util.isFunction(Plugin)) {
+        return Plugin(p[1])
+      }
+      return null
     } else {
       return p
     }