🐛[BUG] cssVar and hashed not working

[conioX]

hi when i use cssVar = true and hashed = false theme not changes, any demo or how can i use cssVar with ant design style?

 'use client';

import { App } from 'antd';
import { ThemeProvider } from 'antd-style';

import { useThemeStore, THEME_MODE } from '@/components/theme/store/useThemeStore';

import { dark } from '@/components/theme/algorithm/dark';
import { light } from '@/components/theme/algorithm/light';
import { scm } from '@/components/theme/algorithm/scm';

export const Theme = ({ children, defaultAppearance }: { children: React.ReactNode; defaultAppearance: THEME_MODE }) => {
  const { theme } = useThemeStore();

  return (
    <ThemeProvider
      themeMode={theme}
      defaultAppearance={defaultAppearance}
      customToken={(customToken) => scm(customToken)}
      theme={(theme) => (theme === THEME_MODE.LIGHT ? light : dark)}
    >
      <App>{children}</App>
    </ThemeProvider>
  );
};

import { theme, ThemeConfig } from 'antd';

export const light: ThemeConfig = {
  algorithm: theme.defaultAlgorithm,
  token: {
    fontFamily: `'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
    colorPrimary: '#1078ca',
    colorInfo: '#1078ca',
  },
  components: {
    Layout: {
      algorithm: true,
      bodyBg: '#ffffff',
      headerBg: 'transparent',
      siderBg: 'transparent',
      headerPadding: '0 24px',
      headerHeight: '56px',
    },
  },
  cssVar: true,
  hashed: false,
};

import { theme, ThemeConfig } from 'antd';

export const dark: ThemeConfig = {
  algorithm: theme.darkAlgorithm,
  token: {
    fontFamily: `'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
    colorPrimary: '#1078ca',
    colorInfo: '#1078ca',
  },
  components: {
    Layout: {
      algorithm: true,
      bodyBg: '#141414',
      headerBg: 'transparent',
      siderBg: 'transparent',
      headerPadding: '0 24px',
      headerHeight: '56px',
    },
  },
  cssVar: true,
  hashed: false,
};

 "next": "14.2.5",
 "antd": "^5.19.4",
 "antd-style": "^3.6.2",

my theme not change i am using zustand, i think theme mode not change or i am doing something wrong? or it because ant design style use extract static style insted of extract style recommend by ant design next registry?

'use client';

import { PropsWithChildren, useRef } from 'react';
import { StyleProvider, extractStaticStyle } from 'antd-style';
import { useServerInsertedHTML } from 'next/navigation';

export const StyleRegistry = ({ children }: PropsWithChildren) => {
  const isInsert = useRef(false);

  useServerInsertedHTML(() => {
    if (isInsert.current) return;

    isInsert.current = true;

    const styles = extractStaticStyle().map((item) => item.style);

    return <>{styles}</>;
  });

  return <StyleProvider cache={extractStaticStyle.cache}>{children}</StyleProvider>;
};

[conioX]

i think i got the problem

we need add :

data-rc-order="prepend"
data-rc-priority="-1000"

in this file

antd-style/src/functions/extractStaticStyle.tsx

return {
      key: cache.key,
      style: (
        <style
          key={cache.key}
          data-emotion={`${cache.key} ${ids.join(' ')}`}
          data-rc-order="prepend"
          data-rc-priority="-1000"
          dangerouslySetInnerHTML={{ __html: css }}
        />
      ),
      css,
      ids,
      tag: `<style data-emotion="${cache.key} ${result.ids.join(' ')}">${result.css}</style>`,
    };

But the problem this is correct?