wip: new cssVars SSR integration + fix cssVars SSR injection for suspense

packages/compiler-sfc/src/compileScript.ts

@@ -31,6 +31,7 @@ import {
   injectCssVarsCalls
 } from './cssVars'
 import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
+import { warnOnce } from './warn'
 
 const DEFINE_OPTIONS = 'defineOptions'
 
@@ -65,15 +66,6 @@ export interface SFCScriptCompileOptions {
   templateOptions?: Partial<SFCTemplateCompileOptions>
 }
 
-const hasWarned: Record<string, boolean> = {}
-
-function warnOnce(msg: string) {
-  if (!hasWarned[msg]) {
-    hasWarned[msg] = true
-    console.log(`\x1b[33m[@vue/compiler-sfc] %s\x1b[0m\n`, msg)
-  }
-}
-
 /**
  * Compile `<script setup>`
  * It requires the whole SFC descriptor because we need to handle and merge

packages/compiler-sfc/src/compileTemplate.ts

@@ -22,6 +22,7 @@ import { isObject } from '@vue/shared'
 import * as CompilerDOM from '@vue/compiler-dom'
 import * as CompilerSSR from '@vue/compiler-ssr'
 import consolidate from 'consolidate'
+import { warnOnce } from './warn'
 
 export interface TemplateCompiler {
   compile(template: string, options: CompilerOptions): CodegenResult
@@ -170,6 +171,14 @@ function doCompileTemplate({
     nodeTransforms = [transformAssetUrl, transformSrcset]
   }
 
+  if (ssr && !compilerOptions.ssrCssVars) {
+    warnOnce(
+      `compileTemplate is called with \`ssr: true\` but no ` +
+        `corresponding \`ssrCssVars\` option. The value can be generated by ` +
+        `calling \`generateCssVars(sfcDescriptor, scopeId, isProduction)\`.`
+    )
+  }
+
   let { code, ast, preamble, map } = compiler.compile(source, {
     mode: 'module',
     prefixIdentifiers: true,

packages/compiler-sfc/src/cssVars.ts

@@ -16,7 +16,30 @@ import hash from 'hash-sum'
 export const CSS_VARS_HELPER = `useCssVars`
 export const cssVarRE = /\bv-bind\(\s*(?:'([^']+)'|"([^"]+)"|([^'"][^)]*))\s*\)/g
 
-export function genVarName(id: string, raw: string, isProd: boolean): string {
+/**
+ * Given an SFC descriptor, generate the CSS variables object string that can be
+ * passed to `compileTemplate` as `compilerOptions.ssrCssVars`.
+ * @public
+ */
+export function generateCssVars(
+  sfc: SFCDescriptor,
+  id: string,
+  isProd: boolean
+): string {
+  return genCssVarsFromList(parseCssVars(sfc), id, isProd)
+}
+
+function genCssVarsFromList(
+  vars: string[],
+  id: string,
+  isProd: boolean
+): string {
+  return `{\n  ${vars
+    .map(v => `"${genVarName(id, v, isProd)}": (${v})`)
+    .join(',\n  ')}\n}`
+}
+
+function genVarName(id: string, raw: string, isProd: boolean): string {
   if (isProd) {
     return hash(id + raw)
   } else {
@@ -63,9 +86,7 @@ export function genCssVarsCode(
   id: string,
   isProd: boolean
 ) {
-  const varsExp = `{\n  ${vars
-    .map(v => `"${genVarName(id, v, isProd)}": (${v})`)
-    .join(',\n  ')}\n}`
+  const varsExp = genCssVarsFromList(vars, id, isProd)
   const exp = createSimpleExpression(varsExp, false)
   const context = createTransformContext(createRoot([]), {
     prefixIdentifiers: true,

packages/compiler-sfc/src/index.ts

@@ -5,6 +5,7 @@ export { compileStyle, compileStyleAsync } from './compileStyle'
 export { compileScript } from './compileScript'
 export { rewriteDefault } from './rewriteDefault'
 export { generateCodeFrame } from '@vue/compiler-core'
+export { generateCssVars } from './cssVars'
 
 // Types
 export {

packages/compiler-sfc/src/stylePluginScoped.ts

@@ -1,5 +1,6 @@
 import postcss, { Root } from 'postcss'
 import selectorParser, { Node, Selector } from 'postcss-selector-parser'
+import { warn } from './warn'
 
 const animationNameRE = /^(-\w+-)?animation-name$/
 const animationRE = /^(-\w+-)?animation$/
@@ -35,9 +36,9 @@ export default postcss.plugin('vue-scoped', (id: any) => (root: Root) => {
           ) {
             n.value = ' '
             n.spaces.before = n.spaces.after = ''
-            console.warn(
-              `[@vue/compiler-sfc] the >>> and /deep/ combinators have ` +
-                `been deprecated. Use ::v-deep instead.`
+            warn(
+              `the >>> and /deep/ combinators have been deprecated. ` +
+                `Use :deep() instead.`
             )
             return false
           }
@@ -69,9 +70,9 @@ export default postcss.plugin('vue-scoped', (id: any) => (root: Root) => {
               } else {
                 // DEPRECATED usage
                 // .foo ::v-deep .bar -> .foo[xxxxxxx] .bar
-                console.warn(
-                  `[@vue/compiler-sfc] ::v-deep usage as a combinator has ` +
-                    `been deprecated. Use ::v-deep(<inner-selector>) instead.`
+                warn(
+                  `::v-deep usage as a combinator has ` +
+                    `been deprecated. Use :deep(<inner-selector>) instead.`
                 )
                 const prev = selector.at(selector.index(n) - 1)
                 if (prev && isSpaceCombinator(prev)) {

packages/compiler-sfc/src/warn.ts

@@ -0,0 +1,12 @@
+const hasWarned: Record<string, boolean> = {}
+
+export function warnOnce(msg: string) {
+  if (!hasWarned[msg]) {
+    hasWarned[msg] = true
+    warn(msg)
+  }
+}
+
+export function warn(msg: string) {
+  console.warn(`\x1b[33m[@vue/compiler-sfc] ${msg}\x1b[0m\n`)
+}