chore: cssinjs hashed as default (#34272)

* checkbox hashId support

* chore: tree hashed

* chore: fix lint

* fix: compile

components/_util/theme/default.tsx

@@ -19,6 +19,7 @@ const defaultDesignToken: DesignToken = {
   fontSize: 14,
   textColor: new TinyColor('#000').setAlpha(0.85).toRgbString(),
   textColorDisabled: new TinyColor('#000').setAlpha(0.25).toRgbString(),
+  textColorInverse: '#fff',
 
   itemHoverBackground: '#f5f5f5',
 

components/_util/theme/index.tsx

@@ -21,6 +21,7 @@ export interface DesignToken {
   fontSize: number;
   textColor: string;
   textColorDisabled: string;
+  textColorInverse: string;
 
   itemHoverBackground: string;
 
@@ -104,18 +105,24 @@ export const DesignTokenContext = React.createContext<{
 });
 
 // ================================== Hook ==================================
-export function useToken() {
+export function useToken(): [Theme<DesignToken, DerivativeToken>, DerivativeToken, string] {
   const { token: rootDesignToken, hashed } = React.useContext(DesignTokenContext);
   const theme = React.useContext(ThemeContext);
 
   const salt = `${version}-${hashed || ''}`;
 
-  const [token, hashId] = useCacheToken(theme, [defaultDesignToken, rootDesignToken], {
+  const [token, hashId] = useCacheToken<DerivativeToken, DesignToken>(
+    theme,
+    [defaultDesignToken, rootDesignToken],
+    {
       salt,
-  });
+    },
+  );
   return [theme, token, hashed ? hashId : ''];
 }
 
+export type UseComponentStyleResult = [(node: React.ReactNode) => React.ReactElement, string];
+
 // ================================== Util ==================================
 export function withPrefix(
   style: CSSObject,

components/button/button.tsx

@@ -159,7 +159,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   const prefixCls = getPrefixCls('btn', customizePrefixCls);
 
   // Style
-  const wrapSSR = useStyle(prefixCls, iconPrefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
 
   const size = React.useContext(SizeContext);
   const [innerLoading, setLoading] = React.useState<Loading>(!!loading);
@@ -244,6 +244,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
 
   const classes = classNames(
     prefixCls,
+    hashId,
     {
       [`${prefixCls}-${shape}`]: shape !== 'default' && shape, // Note: Shape also has `default`
       [`${prefixCls}-${type}`]: type,

components/button/style/index.tsx

@@ -1,7 +1,13 @@
 // deps-lint-skip-all
 import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
-import { DerivativeToken, useStyleRegister, useToken, withPrefix } from '../../_util/theme';
+import {
+  DerivativeToken,
+  UseComponentStyleResult,
+  useStyleRegister,
+  useToken,
+  withPrefix,
+} from '../../_util/theme';
 
 // ============================== Shared ==============================
 const genSharedButtonStyle = (
@@ -373,10 +379,14 @@ const genSizeLargeButtonStyle = (
 };
 
 // ============================== Export ==============================
-export default function useStyle(prefixCls: string, iconPrefixCls: string) {
+export default function useStyle(
+  prefixCls: string,
+  iconPrefixCls: string,
+): UseComponentStyleResult {
   const [theme, token, hashId] = useToken();
 
-  return useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
+  return [
+    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
       // Shared
       withPrefix(genSharedButtonStyle(prefixCls, iconPrefixCls, token), prefixCls),
 
@@ -387,5 +397,7 @@ export default function useStyle(prefixCls: string, iconPrefixCls: string) {
 
       // Group (type, ghost, danger, disabled, loading)
       genTypeButtonStyle(prefixCls, token),
-  ]);
+    ]),
+    hashId,
+  ];
 }

components/checkbox/Checkbox.tsx

@@ -85,7 +85,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
   }, [restProps.value]);
 
   const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
-  const wrapSSR = useStyle(prefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const checkboxProps: CheckboxProps = { ...restProps };
   if (checkboxGroup && !skipGroup) {
@@ -109,10 +109,14 @@ const InternalCheckbox: React.ForwardRefRenderFunction<HTMLInputElement, Checkbo
       [`${prefixCls}-wrapper-disabled`]: checkboxProps.disabled,
     },
     className,
+    hashId,
   );
-  const checkboxClass = classNames({
+  const checkboxClass = classNames(
+    {
       [`${prefixCls}-indeterminate`]: indeterminate,
-  });
+    },
+    hashId,
+  );
   return wrapSSR(
     // eslint-disable-next-line jsx-a11y/label-has-associated-control
     <label

components/checkbox/Group.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 import Checkbox, { CheckboxChangeEvent } from './Checkbox';
 import { ConfigContext } from '../config-provider';
+import useStyle from './style';
 
 export type CheckboxValueType = string | number | boolean;
 
@@ -112,6 +113,8 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
   const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
   const groupPrefixCls = `${prefixCls}-group`;
 
+  const [wrapSSR, hashId] = useStyle(prefixCls);
+
   const domProps = omit(restProps, ['value', 'disabled']);
 
   if (options && options.length > 0) {
@@ -147,11 +150,12 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
       [`${groupPrefixCls}-rtl`]: direction === 'rtl',
     },
     className,
+    hashId,
   );
-  return (
+  return wrapSSR(
     <div className={classString} style={style} {...domProps} ref={ref}>
       <GroupContext.Provider value={context}>{children}</GroupContext.Provider>
-    </div>
+    </div>,
   );
 };
 

components/checkbox/style/index.tsx

@@ -1,6 +1,12 @@
 // deps-lint-skip-all
-import { CSSObject, Keyframes } from '@ant-design/cssinjs';
+import { CSSInterpolation, Keyframes } from '@ant-design/cssinjs';
-import { DerivativeToken, useStyleRegister, useToken, resetComponent } from '../../_util/theme';
+import {
+  DerivativeToken,
+  useStyleRegister,
+  useToken,
+  resetComponent,
+  UseComponentStyleResult,
+} from '../../_util/theme';
 
 // ============================== Motion ==============================
 const antCheckboxEffect = new Keyframes('antCheckboxEffect', {
@@ -20,11 +26,13 @@ export const genCheckboxStyle = (
   prefixCls: string,
   token: DerivativeToken,
   hashId: string,
-): CSSObject => {
+): CSSInterpolation => {
   const checkboxCls = `.${prefixCls}`;
   const wrapperCls = `${checkboxCls}-wrapper`;
 
-  return {
+  return [
+    // ===================== Basic =====================
+    {
       // Group
       [`${checkboxCls}-group`]: {
         ...resetComponent(token),
@@ -66,7 +74,7 @@ export const genCheckboxStyle = (
         cursor: 'pointer',
 
         // Wrapper > Checkbox > input
-      '&-input': {
+        [`${checkboxCls}-input`]: {
           position: 'absolute',
           inset: 0,
           zIndex: 1,
@@ -77,7 +85,7 @@ export const genCheckboxStyle = (
         },
 
         // Wrapper > Checkbox > inner
-      '&-inner': {
+        [`${checkboxCls}-inner`]: {
           position: 'relative',
           top: 0,
           left: 0,
@@ -114,9 +122,12 @@ export const genCheckboxStyle = (
           paddingRight: token.paddingXS,
         },
       },
+    },
 
     // ================= Indeterminate =================
-    [`${checkboxCls}-indeterminate`]: {
+    {
+      [checkboxCls]: {
+        '&-indeterminate': {
           // Wrapper > Checkbox > inner
           [`${checkboxCls}-inner`]: {
             '&:after': {
@@ -132,8 +143,11 @@ export const genCheckboxStyle = (
             },
           },
         },
+      },
+    },
 
     // ===================== Hover =====================
+    {
       // Wrapper
       [`${wrapperCls}:hover ${checkboxCls}:after`]: {
         visibility: 'visible',
@@ -149,9 +163,10 @@ export const genCheckboxStyle = (
           borderColor: token.primaryColor,
         },
       },
+    },
 
     // ==================== Checked ====================
-
+    {
       // Wrapper > Checkbox
       [`${checkboxCls}-checked`]: {
         [`${checkboxCls}-inner`]: {
@@ -180,8 +195,10 @@ export const genCheckboxStyle = (
           content: '""',
         },
       },
+    },
 
     // ==================== Disable ====================
+    {
       // Wrapper
       [`${wrapperCls}-disabled`]: {
         cursor: 'not-allowed',
@@ -212,7 +229,8 @@ export const genCheckboxStyle = (
           color: token.textColorDisabled,
         },
       },
-  };
+    },
+  ];
 };
 
 // ============================== Export ==============================
@@ -220,10 +238,13 @@ export function getStyle(prefixCls: string, token: DerivativeToken, hashId: stri
   return [genCheckboxStyle(prefixCls, token, hashId), antCheckboxEffect];
 }
 
-export default function useStyle(prefixCls: string) {
+export default function useStyle(prefixCls: string): UseComponentStyleResult {
   const [theme, token, hashId] = useToken();
 
-  return useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () =>
+  return [
+    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () =>
       getStyle(prefixCls, token, hashId),
-  );
+    ),
+    hashId,
+  ];
 }

components/config-provider/index.tsx

@@ -85,6 +85,7 @@ export interface ConfigProviderProps {
   dropdownMatchSelectWidth?: boolean;
   theme?: {
     token?: Partial<DesignToken>;
+    hashed?: boolean;
   };
 }
 
@@ -262,10 +263,12 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = props => {
         ...defaultThemeToken,
         ...theme?.token,
       },
+      hashed: theme?.hashed,
     }),
-    [theme?.token],
+    [theme?.token, theme?.hashed],
   );
-  if (theme?.token) {
+
+  if (theme?.token || theme?.hashed) {
     childNode = (
       <DesignTokenContext.Provider value={memoTheme}>{childNode}</DesignTokenContext.Provider>
     );

components/tree/Tree.tsx

@@ -173,7 +173,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
     dropIndicatorRender,
   };
 
-  const wrapSSR = useStyle(prefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const draggableConfig = React.useMemo(() => {
     if (!draggable) {
@@ -216,6 +216,7 @@ const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
           [`${prefixCls}-rtl`]: direction === 'rtl',
         },
         className,
+        hashId,
       )}
       direction={direction}
       checkable={checkable ? <span className={`${prefixCls}-checkbox-inner`} /> : checkable}

components/tree/style/index.tsx

@@ -3,7 +3,13 @@
 
 // deps-lint-skip-all
 import { CSSObject, CSSInterpolation, Keyframes } from '@ant-design/cssinjs';
-import { DerivativeToken, useStyleRegister, useToken, resetComponent } from '../../_util/theme';
+import {
+  DerivativeToken,
+  useStyleRegister,
+  useToken,
+  resetComponent,
+  UseComponentStyleResult,
+} from '../../_util/theme';
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 
 // ============================ Keyframes =============================
@@ -80,7 +86,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
       },
 
       // =================== Virtual List ===================
-      '&-list-holder-inner': {
+      [`${treeCls}-list-holder-inner`]: {
         alignItems: 'flex-start',
       },
 
@@ -91,8 +97,6 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
           // >>> Title
           [`${treeCls}-node-content-wrapper`]: {
             flex: 'auto',
-            display: 'flex',
-            flexWrap: 'nowrap',
           },
 
           // >>> Drag
@@ -147,7 +151,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
       },
 
       // >>> Indent
-      '&-indent': {
+      [`${treeCls}-indent`]: {
         alignSelf: 'stretch',
         whiteSpace: 'nowrap',
         userSelect: 'none',
@@ -158,7 +162,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
       },
 
       // >>> Drag Handler
-      '&-draggable-icon': {
+      [`${treeCls}-draggable-icon`]: {
         width: treeTitleHeight,
         lineHeight: `${treeTitleHeight}px`,
         textAlign: 'center',
@@ -171,7 +175,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
       },
 
       // >>> Switcher
-      '&-switcher': {
+      [`${treeCls}-switcher`]: {
         ...getSwitchStyle(prefixCls, token),
         position: 'relative',
         flex: 'none',
@@ -228,14 +232,16 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
       },
 
       // >>> Checkbox
-      '&-checkbox': {
+      [`${treeCls}-checkbox`]: {
         top: 'initial',
         marginInlineEnd: treeCheckBoxMarginHorizontal,
         marginBlockStart: treeCheckBoxMarginVertical,
       },
 
       // >>> Title
-      '& &-node-content-wrapper': {
+      [`& ${treeCls}-node-content-wrapper`]: {
+        display: 'flex',
+        flexWrap: 'nowrap',
         position: 'relative',
         zIndex: 'auto',
         minHeight: treeTitleHeight,
@@ -272,12 +278,12 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string
       },
 
       // https://github.com/ant-design/ant-design/issues/28217
-      '&-unselectable &-node-content-wrapper:hover': {
+      [`${treeCls}-unselectable ${treeCls}-node-content-wrapper:hover`]: {
         backgroundColor: 'transparent',
       },
 
       // ==================== Draggable =====================
-      '&-node-content-wrapper': {
+      [`${treeCls}-node-content-wrapper`]: {
         lineHeight: `${treeTitleHeight}px`,
         userSelect: 'none',
 
@@ -366,7 +372,7 @@ export const genRTLStyle = (token: TreeToken): CSSObject => {
       },
 
       // >>> Switcher
-      '&-switcher': {
+      [`${treeCls}-switcher`]: {
         '&_close': {
           [`${treeCls}-switcher-icon`]: {
             svg: {
@@ -398,6 +404,84 @@ export const genRTLStyle = (token: TreeToken): CSSObject => {
   };
 };
 
+// ============================ Directory =============================
+export const genDirectoryStyle = (token: TreeToken): CSSObject => {
+  const { treeCls, treeNodeCls, treeNodePadding } = token;
+
+  return {
+    [`${treeCls}${treeCls}-directory`]: {
+      // ================== TreeNode ==================
+      [treeNodeCls]: {
+        position: 'relative',
+
+        // Hover color
+        '&:before': {
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          bottom: treeNodePadding,
+          left: 0,
+          transition: `background-color ${token.duration}`,
+          content: '""',
+          pointerEvents: 'none',
+        },
+
+        '&:hover': {
+          '&:before': {
+            background: token.itemHoverBackground,
+          },
+        },
+
+        // Elements
+        '> *': {
+          zIndex: 1,
+        },
+
+        // >>> Switcher
+        [`${treeCls}-switcher`]: {
+          transition: `color ${token.duration}`,
+        },
+
+        // >>> Title
+        [`${treeCls}-node-content-wrapper`]: {
+          borderRadius: 0,
+          userSelect: 'none',
+
+          '&:hover': {
+            background: 'transparent',
+          },
+
+          [`&.${treeCls}-node-selected`]: {
+            color: token.textColorInverse,
+            background: 'transparent',
+          },
+        },
+
+        // ============= Selected =============
+        '&-selected': {
+          [`
+            &:hover::before,
+            &::before
+          `]: {
+            background: token.primaryColor,
+          },
+
+          // >>> Switcher
+          [`${treeCls}-switcher`]: {
+            color: token.textColorInverse,
+          },
+
+          // >>> Title
+          [`${treeCls}-node-content-wrapper`]: {
+            color: token.textColorInverse,
+            background: 'transparent',
+          },
+        },
+      },
+    },
+  };
+};
+
 // ============================== Merged ==============================
 export const genTreeStyle = (
   prefixCls: string,
@@ -423,16 +507,21 @@ export const genTreeStyle = (
     genBaseStyle(prefixCls, treeToken, hashId),
     // RTL
     genRTLStyle(treeToken),
+    // Directory
+    genDirectoryStyle(treeToken),
   ];
 };
 
 // ============================== Export ==============================
-export default function useStyle(prefixCls: string) {
+export default function useStyle(prefixCls: string): UseComponentStyleResult {
   const [theme, token, hashId] = useToken();
 
-  return useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
+  return [
+    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
       getCheckboxStyle(`${prefixCls}-checkbox`, token, hashId),
       genTreeStyle(prefixCls, token, hashId),
       treeNodeFX,
-  ]);
+    ]),
+    hashId,
+  ];
 }

package.json

@@ -113,7 +113,7 @@
   ],
   "dependencies": {
     "@ant-design/colors": "^6.0.0",
-    "@ant-design/cssinjs": "~0.0.0-alpha.10",
+    "@ant-design/cssinjs": "~0.0.0-alpha.12",
     "@ant-design/icons": "^4.7.0",
     "@ant-design/react-slick": "~0.28.1",
     "@babel/runtime": "^7.12.5",

site/theme/template/Layout/DynamicTheme.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TinyColor } from '@ctrl/tinycolor';
-import { Drawer, Form, Input, Button, InputNumber } from 'antd';
+import { Drawer, Form, Input, Button, InputNumber, Checkbox } from 'antd';
 import { useIntl } from 'react-intl';
 import { BugOutlined } from '@ant-design/icons';
 import { DesignToken } from '../../../../components/_util/theme';
@@ -95,6 +95,10 @@ export default ({ onChangeTheme, defaultToken }: ThemeConfigProps) => {
               </Form.Item>
             );
           })}
+
+          <Form.Item name="hashed" valuePropName="checked">
+            <Checkbox>Bind Style on hash className</Checkbox>
+          </Form.Item>
         </Form>
       </Drawer>
     </>

site/theme/template/Layout/index.jsx

@@ -82,6 +82,7 @@ export default class Layout extends React.Component {
       direction: 'ltr',
       setIframeTheme: this.setIframeTheme,
       designToken: defaultDesignToken,
+      hashedStyle: true,
     };
   }
 
@@ -210,8 +211,16 @@ export default class Layout extends React.Component {
 
   render() {
     const { children, helmetContext = {}, ...restProps } = this.props;
-    const { appLocale, direction, isMobile, theme, setTheme, setIframeTheme, designToken } =
+    const {
-      this.state;
+      appLocale,
+      direction,
+      isMobile,
+      theme,
+      setTheme,
+      setIframeTheme,
+      designToken,
+      hashedStyle,
+    } = this.state;
     const title =
       appLocale.locale === 'zh-CN'
         ? 'Ant Design - 一套企业级 UI 设计语言和 React 组件库'
@@ -255,17 +264,23 @@ export default class Layout extends React.Component {
               direction={direction}
               theme={{
                 token: designToken,
+                hashed: hashedStyle,
               }}
             >
               <Header {...restProps} changeDirection={this.changeDirection} />
               {children}
 
               <DynamicTheme
-                defaultToken={designToken}
+                defaultToken={{
+                  ...designToken,
+                  hashed: hashedStyle,
+                }}
                 onChangeTheme={newToken => {
                   console.log('Change Theme:', newToken);
+                  const { hashed, ...restToken } = newToken;
                   this.setState({
-                    designToken: newToken,
+                    designToken: restToken,
+                    hashedStyle: hashed,
                   });
                 }}
               />