CSS Delay with darktheme token in SSR

[fskarmeta]

Hi i'm opening this issue that has been discussed in other issues just to atomize it.

As we saw in previous issues https://github.com/vueComponent/ant-design-vue-nuxt/issues/6 https://github.com/vueComponent/ant-design-vue-nuxt/issues/25 there is already a fix for the default ant theme css delay using the extractStyle method.

Now in my case I would like to use the dark algorithm, but this one seems to not be working. Maybe I'm doing something wrong.

This is my current setup:

// generateAntStyle.ts
import { extractStyle } from 'ant-design-vue/es/_util/static-style-extract'
import { ConfigProvider, theme } from 'ant-design-vue'
import { h } from 'vue'
import fsExtra from 'fs-extra'

export async function genAntdStyle() {
  const css = extractStyle(node =>
    h(ConfigProvider, {
      theme: { algorithm: theme.darkAlgorithm },
    }, { default: () => node }),
  )
  await fsExtra.outputFile('public/css/antd.css', css, 'utf8')
}

genAntdStyle()

// nuxt.config.ts
...
  app: {
    head: {
      link: [
        {
          rel: 'stylesheet',
          href: '/css/antd.css',
        },
      ],
    },
  },
...

// App.vue
<template>
  <ConfigProvider :locale="esES" :theme="{ algorithm: theme.darkAlgorithm }">
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </ConfigProvider>
</template>

In reality I would like to also add a custom antToken :theme="{ ...antToken, algorithm: theme.darkAlgorithm }", but lets start with the dark theme algorithm problem.

My ant-design-vue is on version 4.0.8 ,nuxt is on 3.9.0 and @ant-design-vue/nuxt is on 1.3.0 .

I would really appreciate any help, since i'm close to deploying to production and this is a topic that if can't be solved might mean we have to see how to customize the default theme to a dark one (if that works) or change component library, which would be a pity. At least knowing that this won't be fixed anytime soon is already helpful :) . Thanks beforehand !

[hostelix]

Hi, have same issue

[novapixels]

Same issue here 🙏🏽🙏🏽

[aibayanyu20]

I tried to reproduce the problem you mentioned, but unfortunately I couldn't reproduce it.

https://antdv-nuxt-starter.vercel.app/

https://github.com/antdv-community/antdv-nuxt-starter

What is worth celebrating is that this problem may be better improved in antdv4.1 version

[fskarmeta]

I tried to reproduce the problem you mentioned, but unfortunately I couldn't reproduce it.

https://antdv-nuxt-starter.vercel.app/

https://github.com/antdv-community/antdv-nuxt-starter

What is worth celebrating is that this problem may be better improved in antdv4.1 version

oh i will try to create a stackblitz later today with the latests deps with a reproduction, thanks @aibayanyu20 !

[fskarmeta]

Holy crap I found the error.

In the extract style server function I was importing ConfigProvider and theme from ant-design-vue instead of 'ant-design-vue/es' . How silly.

Thanks @aibayanyu20 again.