renderStyles() — vue Function Reference

Architecture documentation for the renderStyles() function in index.ts from the vue codebase.

Function typescript ServerRenderer BundleRenderer calls 2 called by 2

Entity Profile

ServerRenderer→ BundleRenderer→ renderStyles() — vue Function Reference

Dependency Diagram

graph TD
  1fb5bb9f_cd65_3295_c809_a55c72d7282e["renderStyles()"]
  31cd301c_a88b_c811_2866_b3d6f4b7a004["render()"]
  31cd301c_a88b_c811_2866_b3d6f4b7a004 -->|calls| 1fb5bb9f_cd65_3295_c809_a55c72d7282e
  7ab283ad_6b55_e541_73d2_c5a7b0fe8b3b["start()"]
  7ab283ad_6b55_e541_73d2_c5a7b0fe8b3b -->|calls| 1fb5bb9f_cd65_3295_c809_a55c72d7282e
  743c1806_91a0_c6ef_e229_47229b4099b4["getUsedAsyncFiles()"]
  1fb5bb9f_cd65_3295_c809_a55c72d7282e -->|calls| 743c1806_91a0_c6ef_e229_47229b4099b4
  14d32896_3b88_20ed_c79e_fcd8ae5ab8d8["isCSS()"]
  1fb5bb9f_cd65_3295_c809_a55c72d7282e -->|calls| 14d32896_3b88_20ed_c79e_fcd8ae5ab8d8
  style 1fb5bb9f_cd65_3295_c809_a55c72d7282e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/server-renderer/src/template-renderer/index.ts lines 143–161

  renderStyles(context: Record<string, any>): string {
    const initial = this.preloadFiles || []
    const async = this.getUsedAsyncFiles(context) || []
    const cssFiles = initial.concat(async).filter(({ file }) => isCSS(file))
    return (
      // render links for css files
      (cssFiles.length
        ? cssFiles
            .map(
              ({ file }) =>
                `<link rel="stylesheet" href="${this.publicPath}${file}">`
            )
            .join('')
        : '') +
      // context.styles is a getter exposed by vue-style-loader which contains
      // the inline component styles collected during SSR
      (context.styles || '')
    )
  }