Fix stylesheet mismatch pages in SSR (#230)

ije · ije · commit b14a203735f5 · 2021-04-10T22:40:59.000+08:00
diff --git a/framework/core/style.ts b/framework/core/style.ts
@@ -1,7 +1,6 @@
 import util from '../../shared/util.ts'
 
 export const clientStyles = new Map<string, string>()
-export const serverStyles = new Map<string, string>()
 
 export function removeCSS(url: string, recoverable?: boolean) {
   const { document } = window as any
@@ -32,9 +31,7 @@ export function recoverCSS(url: string) {
 }
 
 export function applyCSS(url: string, css?: string) {
-  if (util.inDeno) {
-    serverStyles.set(url, css || '')
-  } else {
+  if (!util.inDeno) {
     const { document } = window as any
     const ssr = Array.from<any>(document.head.children).find((el: any) => {
       return el.getAttribute('data-module-id') === url && el.hasAttribute('ssr')
diff --git a/server/app.ts b/server/app.ts
@@ -51,10 +51,11 @@ import { Renderer } from './ssr.ts'
 /** A module includes the compilation details. */
 export type Module = {
   url: string
-  jsFile: string
+  deps: DependencyDescriptor[]
+  isStyle: boolean
   sourceHash: string
   hash: string
-  deps: DependencyDescriptor[]
+  jsFile: string
 }
 
 /** The dependency descriptor. */
@@ -449,6 +450,19 @@ export class Application implements ServerApplication {
     return null
   }
 
+  lookupStyleModules(...urls: string[]): Module[] {
+    const mods: Module[] = []
+    urls.forEach(url => {
+      this.lookupDeps(url, ({ url }) => {
+        const mod = this.#modules.get(url)
+        if (mod && mod.isStyle) {
+          mods.push({ ...mod, deps: [...mod.deps] })
+        }
+      })
+    })
+    return mods
+  }
+
   getPageRoute(location: { pathname: string, search?: string }): [RouterURL, RouteModule[]] {
     return this.#pageRouting.createRouter(location)
   }
@@ -567,6 +581,11 @@ export class Application implements ServerApplication {
       }
     }
 
+    const mod = this.#modules.get(url)
+    if (mod && mod.isStyle) {
+      return true
+    }
+
     return this.loaders.some(p => (
       p.test.test(url) &&
       (p.acceptHMR || p.allowPage)
@@ -917,12 +936,18 @@ export class Application implements ServerApplication {
     url: string,
     sourceContent: Uint8Array,
     contentType: string | null
-  ): Promise<{ code: string, type: SourceType, map: string | null } | null> {
+  ): Promise<{
+    code: string
+    type: SourceType
+    isStyle: boolean
+    map?: string
+  } | null> {
     const encoder = new TextEncoder()
     const decoder = new TextDecoder()
 
     let sourceType: SourceType | null = null
     let sourceMap: Uint8Array | null = null
+    let isStyle = false
 
     if (contentType !== null) {
       switch (contentType.split(';')[0].trim()) {
@@ -1000,6 +1025,7 @@ export class Application implements ServerApplication {
       const { code, map } = await this.#cssProcesser.transform(url, (new TextDecoder).decode(sourceContent))
       sourceContent = encoder.encode(code)
       sourceType = SourceType.JS
+      isStyle = true
       if (map) {
         sourceMap = encoder.encode(map)
       }
@@ -1008,7 +1034,8 @@ export class Application implements ServerApplication {
     return {
       code: decoder.decode(sourceContent),
       type: sourceType,
-      map: sourceMap ? decoder.decode(sourceMap) : null
+      isStyle,
+      map: sourceMap ? decoder.decode(sourceMap) : undefined
     }
   }
 
@@ -1024,12 +1051,12 @@ export class Application implements ServerApplication {
       once?: boolean,
     } = {}
   ): Promise<Module> {
+    const { sourceCode, forceCompile, once } = options
     const isRemote = util.isLikelyHttpURL(url)
     const localUrl = toLocalUrl(url)
     const saveDir = join(this.buildDir, dirname(localUrl))
     const name = trimModuleExt(basename(localUrl))
     const metaFile = join(saveDir, `${name}.meta.json`)
-    const { sourceCode, forceCompile, once } = options
 
     let mod: Module
     if (this.#modules.has(url)) {
@@ -1041,6 +1068,7 @@ export class Application implements ServerApplication {
       mod = {
         url,
         deps: [],
+        isStyle: false,
         sourceHash: '',
         hash: '',
         jsFile: join(saveDir, `${name}.js`),
@@ -1050,10 +1078,11 @@ export class Application implements ServerApplication {
       }
       if (existsFileSync(metaFile)) {
         try {
-          const { url: __url, sourceHash, deps } = JSON.parse(await Deno.readTextFile(metaFile))
-          if (__url === url && util.isNEString(sourceHash) && util.isArray(deps)) {
+          const { url: _url, deps, isStyle, sourceHash } = JSON.parse(await Deno.readTextFile(metaFile))
+          if (_url === url && util.isNEString(sourceHash) && util.isArray(deps)) {
             mod.sourceHash = sourceHash
             mod.deps = deps
+            mod.isStyle = !!isStyle
           } else {
             log.warn(`removing invalid metadata '${name}.meta.json'`)
             Deno.remove(metaFile)
@@ -1145,6 +1174,7 @@ export class Application implements ServerApplication {
         }
       }
 
+      mod.isStyle = source.isStyle
       mod.deps = deps.map(({ specifier, isDynamic }) => {
         const dep: DependencyDescriptor = { url: specifier, hash: '' }
         if (isDynamic) {
@@ -1188,8 +1218,9 @@ export class Application implements ServerApplication {
       await Promise.all([
         ensureTextFile(metaFile, JSON.stringify({
           url,
-          sourceHash: mod.sourceHash,
           deps: mod.deps,
+          sourceHash: mod.sourceHash,
+          isStyle: mod.isStyle ? true : undefined
         }, undefined, 2)),
         ensureTextFile(mod.jsFile, jsContent + (jsSourceMap ? `//# sourceMappingURL=${basename(mod.jsFile)}.map` : '')),
         jsSourceMap ? ensureTextFile(mod.jsFile + '.map', jsSourceMap) : Promise.resolve(),
diff --git a/server/css.ts b/server/css.ts
@@ -6,7 +6,7 @@ const productionOnlyPostcssPlugins = ['autoprefixer']
 
 export class CSSProcessor {
   #isProd: boolean
-  #options: CSSOptions
+  #options: Required<CSSOptions>
   #postcss: any
   #cleanCSS: any
   #modulesJSON: Record<string, Record<string, string>>
@@ -24,21 +24,24 @@ export class CSSProcessor {
 
   config(isProd: boolean, options: CSSOptions) {
     this.#isProd = isProd
+    if (util.isPlainObject(options.postcss) && Array.isArray(options.postcss.plugins)) {
+      this.#options.postcss.plugins = options.postcss.plugins
+    }
     if (util.isPlainObject(options.modules)) {
-      options.postcss.plugins = options.postcss.plugins.filter(p => {
+      const plugins = this.#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', {
+      plugins.push(['postcss-modules', {
         ...options.modules,
         getJSON: (url: string, json: Record<string, string>) => {
           this.#modulesJSON = { [url]: json }
         },
       }])
+      this.#options.postcss.plugins = plugins
     }
-    this.#options = options
   }
 
   private getModulesJSON(url: string) {
diff --git a/server/ssr.ts b/server/ssr.ts
@@ -28,7 +28,8 @@ export type FrameworkRenderer = {
   render(
     url: RouterURL,
     AppComponent: any,
-    nestedPageComponents: { url: string, Component?: any }[]
+    nestedPageComponents: { url: string, Component?: any }[],
+    styles: Record<string, string>
   ): Promise<FrameworkRenderResult>
 }
 
@@ -95,26 +96,31 @@ export class Renderer {
   async renderPage(url: RouterURL, nestedModules: RouteModule[]): Promise<[string, Record<string, SSRData> | null]> {
     const start = performance.now()
     const isDev = this.#app.isDev
+    const state = { entryFile: '' }
     const appModule = this.#app.findModuleByName('app')
     const { default: App } = appModule ? await import(`file://${appModule.jsFile}#${appModule.hash.slice(0, 6)}`) : {} as any
-
-    let entryFile = ''
     const nestedPageComponents = await Promise.all(nestedModules
       .filter(({ url }) => this.#app.getModule(url) !== null)
       .map(async ({ url }) => {
         const { jsFile, hash } = this.#app.getModule(url)!
         const { default: Component } = await import(`file://${jsFile}#${hash.slice(0, 6)}`)
-        entryFile = dirname(url) + '/' + basename(jsFile)
+        state.entryFile = dirname(url) + '/' + basename(jsFile)
         return {
           url,
           Component
         }
       })
     )
+    const styles = await this.lookupStyleModules(...[
+      appModule ? appModule.url : [],
+      nestedModules.map(({ url }) => url)
+    ].flat())
+
     const { head, body, data, scripts } = await this.#renderer.render(
       url,
       App,
-      nestedPageComponents
+      nestedPageComponents,
+      styles
     )
 
     if (isDev) {
@@ -131,7 +137,7 @@ export class Renderer {
             type: 'application/json',
             innerText: JSON.stringify(data, undefined, isDev ? 2 : 0),
           } : '',
-          ...this.#app.getSSRHTMLScripts(entryFile),
+          ...this.#app.getSSRHTMLScripts(state.entryFile),
           ...scripts.map((script: Record<string, any>) => {
             if (script.innerText && !isDev) {
               return { ...script, innerText: script.innerText }
@@ -152,10 +158,15 @@ export class Renderer {
     const e404Module = this.#app.findModuleByName('404')
     const { default: App } = appModule ? await import(`file://${appModule.jsFile}#${appModule.hash.slice(0, 6)}`) : {} as any
     const { default: E404 } = e404Module ? await import(`file://${e404Module.jsFile}#${e404Module.hash.slice(0, 6)}`) : {} as any
+    const styles = await this.lookupStyleModules(...[
+      appModule ? appModule.url : [],
+      e404Module ? e404Module.url : []
+    ].flat())
     const { head, body, data, scripts } = await this.#renderer.render(
       url,
       App,
-      e404Module ? [{ url: e404Module.url, Component: E404 }] : []
+      e404Module ? [{ url: e404Module.url, Component: E404 }] : [],
+      styles
     )
     return createHtml({
       lang: url.locale,
@@ -186,14 +197,16 @@ export class Renderer {
 
     if (loadingModule) {
       const { default: Loading } = await import(`file://${loadingModule.jsFile}#${loadingModule.hash.slice(0, 6)}`)
+      const styles = await this.lookupStyleModules(loadingModule.url)
       const {
         head,
         body,
         scripts
       } = await this.#renderer.render(
         createBlankRouterURL(baseUrl, defaultLocale),
         undefined,
-        [{ url: loadingModule.url, Component: Loading }]
+        [{ url: loadingModule.url, Component: Loading }],
+        styles
       )
       return createHtml({
         lang: defaultLocale,
@@ -220,6 +233,16 @@ export class Renderer {
       minify: !this.#app.isDev
     })
   }
+
+  private async lookupStyleModules(...urls: string[]): Promise<Record<string, string>> {
+    return (await Promise.all(this.#app.lookupStyleModules(...urls).map(async ({ jsFile, hash }) => {
+      const { default: { __url$: url, __css$: css } } = await import(`file://${jsFile}#${hash.slice(0, 6)}`)
+      return { url, css }
+    }))).reduce((styles, mod) => {
+      styles[mod.url] = mod.css
+      return styles
+    }, {} as Record<string, string>)
+  }
 }
 
 /** create html content by given arguments */
