scopeId?: string | null
/**
* SFC `<style vars>` injection string
+ * Should already be an object expression, e.g. `{ 'xxxx-color': color }`
* needed to render inline CSS variables on component root
*/
ssrCssVars?: string
const builtIn = isCoreComponent(tag) || context.isBuiltInComponent(tag)
if (builtIn) {
// built-ins are simply fallthroughs / have special handling during ssr
- // no we don't need to import their runtime equivalents
+ // so we don't need to import their runtime equivalents
if (!ssr) context.helper(builtIn)
return builtIn
}
injectCssVarsCalls
} from './cssVars'
import { compileTemplate, SFCTemplateCompileOptions } from './compileTemplate'
+import { warnOnce } from './warn'
const DEFINE_OPTIONS = 'defineOptions'
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
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
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,
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 {
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,
export { compileScript } from './compileScript'
export { rewriteDefault } from './rewriteDefault'
export { generateCodeFrame } from '@vue/compiler-core'
+export { generateCssVars } from './cssVars'
// Types
export {
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$/
) {
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
}
} 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)) {
--- /dev/null
+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`)
+}
}).code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
- const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
+ const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
- const _cssVars = _ssrResolveCssVars({ color: _ctx.color })
+ const _cssVars = { style: { color: _ctx.color }}
_push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
}"
`)
ssrCssVars: `{ color }`
}).code
).toMatchInlineSnapshot(`
- "const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
+ "const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
- const _cssVars = _ssrResolveCssVars({ color: _ctx.color })
+ const _cssVars = { style: { color: _ctx.color }}
_push(\`<!--[--><div\${
_ssrRenderAttrs(_cssVars)
}></div><div\${
}).code
).toMatchInlineSnapshot(`
"const { resolveComponent: _resolveComponent } = require(\\"vue\\")
- const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
+ const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderComponent: _ssrRenderComponent } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
const _component_foo = _resolveComponent(\\"foo\\")
- const _cssVars = _ssrResolveCssVars({ color: _ctx.color })
+ const _cssVars = { style: { color: _ctx.color }}
_push(\`<!--[--><div\${_ssrRenderAttrs(_cssVars)}></div>\`)
_push(_ssrRenderComponent(_component_foo, _cssVars, null, _parent))
_push(\`<!--]-->\`)
}).code
).toMatchInlineSnapshot(`
"const { mergeProps: _mergeProps } = require(\\"vue\\")
- const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
+ const { ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
- const _cssVars = _ssrResolveCssVars({ color: _ctx.color })
+ const _cssVars = { style: { color: _ctx.color }}
if (_ctx.ok) {
_push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))}></div>\`)
} else {
`)
})
- test('w/ scopeId', () => {
+ test('w/ suspense', () => {
expect(
- compile(`<div/>`, {
- ssrCssVars: `{ color }`,
- scopeId: 'data-v-foo'
- }).code
+ compile(
+ `<Suspense>
+ <div>ok</div>
+ <template #fallback>
+ <div>fallback</div>
+ </template>
+ </Suspense>`,
+ {
+ ssrCssVars: `{ color }`
+ }
+ ).code
).toMatchInlineSnapshot(`
- "const { mergeProps: _mergeProps } = require(\\"vue\\")
- const { ssrResolveCssVars: _ssrResolveCssVars, ssrRenderAttrs: _ssrRenderAttrs } = require(\\"@vue/server-renderer\\")
+ "const { withCtx: _withCtx } = require(\\"vue\\")
+ const { ssrRenderAttrs: _ssrRenderAttrs, ssrRenderSuspense: _ssrRenderSuspense } = require(\\"@vue/server-renderer\\")
return function ssrRender(_ctx, _push, _parent, _attrs) {
- const _cssVars = _ssrResolveCssVars({ color: _ctx.color }, \\"data-v-foo\\")
- _push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, _cssVars))} data-v-foo></div>\`)
+ const _cssVars = { style: { color: _ctx.color }}
+ _ssrRenderSuspense(_push, {
+ fallback: () => {
+ _push(\`<div\${_ssrRenderAttrs(_cssVars)}>fallback</div>\`)
+ },
+ default: () => {
+ _push(\`<div\${_ssrRenderAttrs(_cssVars)}>ok</div>\`)
+ },
+ _: 1
+ })
}"
`)
})
export const SSR_GET_DYNAMIC_MODEL_PROPS = Symbol(`ssrGetDynamicModelProps`)
export const SSR_RENDER_TELEPORT = Symbol(`ssrRenderTeleport`)
export const SSR_RENDER_SUSPENSE = Symbol(`ssrRenderSuspense`)
-export const SSR_RESOLVE_CSS_VARS = Symbol(`ssrResolveCssVars`)
export const ssrHelpers = {
[SSR_INTERPOLATE]: `ssrInterpolate`,
[SSR_RENDER_DYNAMIC_MODEL]: `ssrRenderDynamicModel`,
[SSR_GET_DYNAMIC_MODEL_PROPS]: `ssrGetDynamicModelProps`,
[SSR_RENDER_TELEPORT]: `ssrRenderTeleport`,
- [SSR_RENDER_SUSPENSE]: `ssrRenderSuspense`,
- [SSR_RESOLVE_CSS_VARS]: `ssrResolveCssVars`
+ [SSR_RENDER_SUSPENSE]: `ssrRenderSuspense`
}
// Note: these are helpers imported from @vue/server-renderer
createRoot
} from '@vue/compiler-dom'
import { isString, escapeHtml } from '@vue/shared'
-import {
- SSR_INTERPOLATE,
- ssrHelpers,
- SSR_RESOLVE_CSS_VARS
-} from './runtimeHelpers'
+import { SSR_INTERPOLATE, ssrHelpers } from './runtimeHelpers'
import { ssrProcessIf } from './transforms/ssrVIf'
import { ssrProcessFor } from './transforms/ssrVFor'
import { ssrProcessSlotOutlet } from './transforms/ssrTransformSlotOutlet'
export function ssrCodegenTransform(ast: RootNode, options: CompilerOptions) {
const context = createSSRTransformContext(ast, options)
- // inject <style vars> resolution
+ // inject SFC <style> CSS variables
// we do this instead of inlining the expression to ensure the vars are
// only resolved once per render
if (options.ssrCssVars) {
createTransformContext(createRoot([]), options)
)
context.body.push(
- createCompoundExpression([
- `const _cssVars = _${ssrHelpers[SSR_RESOLVE_CSS_VARS]}(`,
- varsExp,
- options.scopeId ? `, ${JSON.stringify(options.scopeId)}` : ``,
- `)`
- ])
+ createCompoundExpression([`const _cssVars = { style: `, varsExp, `}`])
)
}
createSimpleExpression,
RootNode,
TemplateChildNode,
- findDir
+ findDir,
+ isBuiltInType
} from '@vue/compiler-dom'
-import { SSR_RESOLVE_CSS_VARS } from '../runtimeHelpers'
export const ssrInjectCssVars: NodeTransform = (node, context) => {
if (!context.ssrCssVars) {
return
}
- context.helper(SSR_RESOLVE_CSS_VARS)
-
if (node.type === NodeTypes.IF_BRANCH) {
for (const child of node.children) {
injectCssVars(child)
node.tagType === ElementTypes.COMPONENT) &&
!findDir(node, 'for')
) {
- node.props.push({
- type: NodeTypes.DIRECTIVE,
- name: 'bind',
- arg: undefined,
- exp: createSimpleExpression(`_cssVars`, false),
- modifiers: [],
- loc: locStub
- })
+ if (isBuiltInType(node.tag, 'Suspense')) {
+ for (const child of node.children) {
+ if (
+ child.type === NodeTypes.ELEMENT &&
+ child.tagType === ElementTypes.TEMPLATE
+ ) {
+ // suspense slot
+ child.children.forEach(injectCssVars)
+ } else {
+ injectCssVars(child)
+ }
+ }
+ } else {
+ node.props.push({
+ type: NodeTypes.DIRECTIVE,
+ name: 'bind',
+ arg: undefined,
+ exp: createSimpleExpression(`_cssVars`, false),
+ modifiers: [],
+ loc: locStub
+ })
+ }
}
}
+++ /dev/null
-import { ssrResolveCssVars } from '../src'
-
-describe('ssr: resolveCssVars', () => {
- test('should work', () => {
- expect(ssrResolveCssVars({ color: 'red' })).toMatchObject({
- style: {
- '--color': 'red'
- }
- })
- })
-
- test('should work with scopeId', () => {
- expect(ssrResolveCssVars({ color: 'red' }, 'scoped')).toMatchObject({
- style: {
- '--scoped-color': 'red'
- }
- })
- })
-
- test('should strip data-v prefix', () => {
- expect(ssrResolveCssVars({ color: 'red' }, 'data-v-123456')).toMatchObject({
- style: {
- '--123456-color': 'red'
- }
- })
- })
-})
+++ /dev/null
-export function ssrResolveCssVars(
- source: Record<string, string>,
- scopeId?: string
-) {
- const style: Record<string, string> = {}
- const prefix = scopeId ? `${scopeId.replace(/^data-v-/, '')}-` : ``
- for (const key in source) {
- style[`--${prefix}${key}`] = source[key]
- }
- return { style }
-}
export { ssrInterpolate } from './helpers/ssrInterpolate'
export { ssrRenderList } from './helpers/ssrRenderList'
export { ssrRenderSuspense } from './helpers/ssrRenderSuspense'
-export { ssrResolveCssVars } from './helpers/ssrResolveCssVars'
// v-model helpers
export {
projects / thirdparty / vuejs / core.git / commitdiff
