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
  6465c79a_4c76_b386_0000_61f8658631f6["renderStyles()"]
  d00ee0bd_5dce_cc55_ebbd_75e9b4ae547b["render()"]
  d00ee0bd_5dce_cc55_ebbd_75e9b4ae547b -->|calls| 6465c79a_4c76_b386_0000_61f8658631f6
  145909a6_2a38_1f9e_4f6e_4e56c11a4861["start()"]
  145909a6_2a38_1f9e_4f6e_4e56c11a4861 -->|calls| 6465c79a_4c76_b386_0000_61f8658631f6
  072c2c94_8252_4199_9b74_22be796294bc["getUsedAsyncFiles()"]
  6465c79a_4c76_b386_0000_61f8658631f6 -->|calls| 072c2c94_8252_4199_9b74_22be796294bc
  2407aac8_6920_0837_4f36_2ddc45f26e4a["isCSS()"]
  6465c79a_4c76_b386_0000_61f8658631f6 -->|calls| 2407aac8_6920_0837_4f36_2ddc45f26e4a
  style 6465c79a_4c76_b386_0000_61f8658631f6 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 || '')
    )
  }