feat: ssr support for <style vars>

packages/server-renderer/__tests__/ssrResolveCssVars.spec.ts

@@ -0,0 +1,27 @@
+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'
+      }
+    })
+  })
+})

packages/server-renderer/src/helpers/ssrResolveCssVars.ts

@@ -0,0 +1,11 @@
+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 }
+}

packages/server-renderer/src/index.ts

@@ -18,6 +18,7 @@ export {
 export { ssrInterpolate } from './helpers/ssrInterpolate'
 export { ssrRenderList } from './helpers/ssrRenderList'
 export { ssrRenderSuspense } from './helpers/ssrRenderSuspense'
+export { ssrResolveCssVars } from './helpers/ssrResolveCssVars'
 
 // v-model helpers
 export {