chore: master merge next

docs/demo/first-render.md

@@ -0,0 +1,8 @@
+---
+title: First Render
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/first-render.tsx"></code>

docs/examples/autoPrefix.tsx

@@ -0,0 +1,51 @@
+import {
+  autoPrefixTransformer,
+  createTheme,
+  StyleProvider,
+  useStyleRegister,
+} from '@ant-design/cssinjs';
+import React from 'react';
+
+const Demo = () => {
+  useStyleRegister(
+    { theme: createTheme(() => ({})), token: {}, path: ['.auto-prefix-box'] },
+    () => ({
+      '.auto-prefix-box': {
+        width: '200px',
+        height: '200px',
+        backgroundColor: '#f0f0f0',
+        border: '1px solid #d9d9d9',
+        borderRadius: '8px',
+        // Properties that will get vendor prefixes
+        transform: 'translateX(50px) scale(1.1)',
+        transition: 'all 0.3s ease',
+        userSelect: 'none',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backdropFilter: 'blur(10px)',
+        '&:hover': {
+          transform: 'translateX(50px) scale(1.2)',
+          backgroundColor: '#e6f7ff',
+        },
+      },
+    }),
+  );
+
+  return (
+    <div className="auto-prefix-box">
+      <h3>Auto Prefix Demo</h3>
+      <p>Hover to see effect</p>
+      <p style={{ fontSize: '12px', color: '#666' }}>
+        Check DevTools to see vendor prefixes in CSS
+      </p>
+    </div>
+  );
+};
+
+export default () => (
+  <StyleProvider transformers={[autoPrefixTransformer]}>
+    <Demo />
+  </StyleProvider>
+);

docs/examples/components/Button.tsx

@@ -1,20 +1,32 @@
-import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
-import { unit, useStyleRegister } from '@ant-design/cssinjs';
+import type {
+  CSSInterpolation,
+  CSSObject} from '@ant-design/cssinjs';
+import {
+  unit,
+  useCSSVarRegister,
+  useStyleRegister,
+} from '@ant-design/cssinjs';
 import classNames from 'classnames';
 import React from 'react';
 import type { DerivativeToken } from './theme';
 import { useToken } from './theme';
 
+interface ButtonToken extends DerivativeToken {
+  buttonPadding: string;
+  buttonBorderBottomWidth: string;
+}
+
 // 通用框架
 const genSharedButtonStyle = (
   prefixCls: string,
-  token: DerivativeToken,
+  token: ButtonToken,
 ): CSSInterpolation => ({
   [`.${prefixCls}`]: {
     borderColor: token.borderColor,
     borderWidth: token.borderWidth,
     borderRadius: token.borderRadius,
     lineHeight: token.lineHeight,
+    padding: token.buttonPadding,
 
     cursor: 'pointer',
 
@@ -33,7 +45,7 @@ const genSharedButtonStyle = (
 // 实心底色样式
 const genSolidButtonStyle = (
   prefixCls: string,
-  token: DerivativeToken,
+  token: ButtonToken,
   postFn: () => CSSObject,
 ): CSSInterpolation => [
   genSharedButtonStyle(prefixCls, token),
@@ -47,11 +59,12 @@ const genSolidButtonStyle = (
 // 默认样式
 const genDefaultButtonStyle = (
   prefixCls: string,
-  token: DerivativeToken,
+  token: ButtonToken,
 ): CSSInterpolation =>
   genSolidButtonStyle(prefixCls, token, () => ({
     backgroundColor: token.componentBackgroundColor,
     color: token.textColor,
+    borderWidth: token.buttonBorderBottomWidth,
 
     '&:hover': {
       borderColor: token.primaryColor,
@@ -62,7 +75,7 @@ const genDefaultButtonStyle = (
 // 主色样式
 const genPrimaryButtonStyle = (
   prefixCls: string,
-  token: DerivativeToken,
+  token: ButtonToken,
 ): CSSInterpolation =>
   genSolidButtonStyle(prefixCls, token, () => ({
     backgroundColor: token.primaryColor,
@@ -77,7 +90,7 @@ const genPrimaryButtonStyle = (
 // 透明按钮
 const genGhostButtonStyle = (
   prefixCls: string,
-  token: DerivativeToken,
+  token: ButtonToken,
 ): CSSInterpolation => [
   genSharedButtonStyle(prefixCls, token),
   {
@@ -103,23 +116,46 @@ const Button = ({ className, type, ...restProps }: ButtonProps) => {
   const prefixCls = 'ant-btn';
 
   // 【自定义】制造样式
-  const [theme, token, hashId, cssVarKey] = useToken();
+  const [theme, token, hashId, cssVarKey, realToken] = useToken();
 
   // default 添加默认样式选择器后可以省很多冲突解决问题
   const defaultCls = `${prefixCls}-default`;
   const primaryCls = `${prefixCls}-primary`;
   const ghostCls = `${prefixCls}-ghost`;
 
-  // 全局注册，内部会做缓存优化
-  const wrapSSR = useStyleRegister(
-    { theme, token, hashId, path: [prefixCls] },
-    () => [
-      genDefaultButtonStyle(defaultCls, token),
-      genPrimaryButtonStyle(primaryCls, token),
-      genGhostButtonStyle(ghostCls, token),
-    ],
+  const [cssVarToken] = useCSSVarRegister(
+    {
+      path: [prefixCls],
+      key: cssVarKey,
+      token: realToken,
+      prefix: prefixCls,
+      unitless: {
+        lineHeight: true,
+      },
+      ignore: {
+        lineHeightBase: true,
+      },
+      scope: prefixCls,
+      hashId,
+    },
+    () => ({
+      buttonPadding: '4px 8px',
+      buttonBorderBottomWidth: `calc(${token.borderWidth} * 2)`,
+    }),
   );
 
+  const mergedToken: any = {
+    ...token,
+    ...cssVarToken,
+  };
+
+  // 全局注册，内部会做缓存优化
+  useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
+    genDefaultButtonStyle(defaultCls, mergedToken),
+    genPrimaryButtonStyle(primaryCls, mergedToken),
+    genGhostButtonStyle(ghostCls, mergedToken),
+  ]);
+
   const typeCls =
     (
       {
@@ -128,11 +164,11 @@ const Button = ({ className, type, ...restProps }: ButtonProps) => {
       } as any
     )[type as any] || defaultCls;
 
-  return wrapSSR(
+  return (
     <button
       className={classNames(prefixCls, typeCls, hashId, className, cssVarKey)}
       {...restProps}
-    />,
+    />
   );
 };
 

docs/examples/components/Spin.tsx

@@ -41,13 +41,13 @@ const Spin = ({ className, ...restProps }: SpinProps) => {
   const [theme, token, hashId] = useToken();
 
   // 全局注册，内部会做缓存优化
-  const wrapSSR = useStyleRegister(
+  useStyleRegister(
     { theme, token, hashId, path: [prefixCls] },
     () => [genSpinStyle(prefixCls, token)],
   );
 
-  return wrapSSR(
-    <div className={classNames(prefixCls, hashId, className)} {...restProps} />,
+  return (
+    <div className={classNames(prefixCls, hashId, className)} {...restProps} />
   );
 };
 

docs/examples/components/theme.tsx

@@ -1,7 +1,7 @@
 import type { CSSObject, Theme } from '@ant-design/cssinjs';
 import { createTheme, useCacheToken } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 
 export type GetStyle = (prefixCls: string, token: DerivativeToken) => CSSObject;
 
@@ -61,32 +61,68 @@ export const DesignTokenContext = React.createContext<{
   token: defaultDesignToken,
 });
 
+export const DesignTokenProvider: React.FC<
+  PropsWithChildren<{
+    value?: {
+      token?: Partial<DesignToken>;
+      hashed?: string | boolean;
+      cssVar?: {
+        key?: string;
+        prefix?: string;
+      };
+    };
+  }>
+> = ({ children, value }) => {
+  const { token, hashed, cssVar } = value || {};
+  const themeKey = React.useId();
+  const cssVarKey = `css-var-${themeKey.replace(/:/g, '')}`;
+  return (
+    <DesignTokenContext.Provider
+      value={{
+        token,
+        hashed,
+        cssVar: {
+          ...cssVar,
+          key: cssVar?.key || cssVarKey,
+        },
+      }}
+    >
+      {children}
+    </DesignTokenContext.Provider>
+  );
+};
+
 export function useToken(): [
   Theme<any, any>,
   DerivativeToken,
   string,
-  string | undefined,
+  string,
+  DerivativeToken,
 ] {
   const {
     token: rootDesignToken = {},
     hashed,
-    cssVar,
+    cssVar: ctxCssVar,
   } = React.useContext(DesignTokenContext);
   const theme = React.useContext(ThemeContext);
 
-  const [token, hashId] = useCacheToken<DerivativeToken, DesignToken>(
-    theme,
-    [defaultDesignToken, rootDesignToken],
-    {
-      salt: typeof hashed === 'string' ? hashed : '',
-      cssVar: cssVar && {
-        prefix: 'rc',
-        key: cssVar.key,
-        unitless: {
-          lineHeight: true,
-        },
+  const cssVar = {
+    key: ctxCssVar?.key || 'css-var-root',
+  };
+
+  const [token, hashId, actualToken] = useCacheToken<
+    DerivativeToken,
+    DesignToken
+  >(theme, [defaultDesignToken, rootDesignToken], {
+    salt: typeof hashed === 'string' ? hashed : '',
+    cssVar: {
+      prefix: 'rc',
+      key: cssVar?.key || 'css-var-root',
+      unitless: {
+        lineHeight: true,
       },
+      hashed: !!hashed,
     },
-  );
-  return [theme, token, hashed ? hashId : '', cssVar?.key];
+  });
+  return [theme, token, hashed ? hashId : '', cssVar.key, actualToken];
 }