get useCSSVars working in SSR

[m0ksem]

If I have a Button.vue component that uses v-bind feature, I expect css variables to be rendered on <button> the same way if I apply <button :style="--my-bg: red">.

I'm using nuxt with @nuxjs/i18n which somehow forces to nuxt to use cjs build. And the problem here is that before hydration there are no css variables. They're used in CSS code, but they're unset because useCSSVars does nothing in cjs build.

Original problem comes from here develop.vuestic.dev, we have backgroundColorOpacity which is set via v-bind. Before hydration it is unset and backgroundOpacity is 1 by default. This makes button blink - it is blue until hydration is finished.
And we also have this issue: epicmaxco/vuestic-ui#3046

I'm not able to make a proper reproduction with sfc.vuejs.org or stackblitz cuz they work with esm build.

How about applying style not with DOM api, but in render function to the root blocks?

Edited:

Looks like backgroundColorOpacity var simply do not returns from setup function. Added transform function to get css variables work in SSR:

Code

export const transformVueComponent = (code: string) => {
const style = code.match(/<style[^>]*>([\s\S]*)<\/style>/)

const vBinds = style?.[1].match(/v-bind\((.*)\)/g)?.map((line) => line.match(/v-bind\((.*)\)/)?.[1]) ?? []

vBinds.forEach((vBind, index) => {
  code = code.replace(new RegExp(`v-bind\\(${vBind}\\)`, 'gm'), `var(--va-${index}-${vBind})`)
})

const varsObject = `{ ${vBinds.map((vBind, index) => {
  return `'--va-${index}-${vBind}': ${vBind}`
}, '').join(',')} }`

const varsString = vBinds.map((vBind, index) => {
  return `--va-${index}-${vBind}: ${vBind}`
}, '').join(';')

const template = code.match(/<template[^>]*>([\s\S]*)<\/template>/)?.[1]

const rootNode = template?.match(/<[^>]*>/)?.[0]

const existingStyle = rootNode?.match(/style="([^"]*)"/)?.[1]

if (existingStyle) {
  code = code.replace(/style="([^"]*)"/, `style="typeof $1 === 'object' ? { ...$1, ...${varsObject} } : $1 + ';${varsString}'"`)
}

return code
}

So it looks like this (but no backgroundColorOpacity anyway):

[m0ksem]

Managed to fix it by removing lib from optimizeDeps.exclude.