Merge remote-tracking branch 'origin/master' into pr/MaxArtemov/134

.fatherrc.js

@@ -2,4 +2,11 @@ import { defineConfig } from 'father';
 
 export default defineConfig({
   plugins: ['@rc-component/father-plugin'],
-});
+  umd: {
+    name: 'antdCssinjs',
+    externals: {
+      react: 'React',
+      'react-dom': 'ReactDOM',
+    },
+  },
+});

.github/workflows/main.yml

@@ -1,114 +1,6 @@
-name: CI
-
-on:
-  push:
-    branches: [master]
-  pull_request:
-    branches: [master]
-
+name: ✅ test
+on: [push, pull_request]
 jobs:
-  setup:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - uses: actions/setup-node@v1
-        with:
-          node-version: '12'
-
-      - name: cache package-lock.json
-        uses: actions/cache@v2
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: create package-lock.json
-        run: npm i --package-lock-only
-
-      - name: hack for singe file
-        run: |
-          if [ ! -d "package-temp-dir" ]; then
-            mkdir package-temp-dir
-          fi
-          cp package-lock.json package-temp-dir
-
-      - name: cache node_modules
-        id: node_modules_cache_id
-        uses: actions/cache@v2
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: install
-        if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
-        run: npm ci
-
-  lint:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v2
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: lint
-        run: npm run lint
-
-    needs: setup
-
-  compile:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v2
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: compile
-        run: npm run compile
-
-    needs: setup
-
-  coverage:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v2
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: coverage
-        run: npm run coverage && bash <(curl -s https://codecov.io/bash)
-
-    needs: setup
+  test:
+    uses: react-component/rc-test/.github/workflows/test.yml@main
+    secrets: inherit

.gitignore

@@ -26,6 +26,7 @@ assets/**/*.css
 build
 lib
 es
+dist
 yarn.lock
 package-lock.json
 coverage/
@@ -41,3 +42,5 @@ coverage/
 .dumi/tmp
 .dumi/tmp-production
 .dumi/tmp-test
+
+bun.lockb

README.md

@@ -75,6 +75,39 @@ Create theme object. When same algorithm provided, it will return same object.
 
 Since `@ant-design/cssinjs` use strong constraints for cache hit performance, we recommend to view demo `basic.tsx` for usage and `animation.tsx` for animation usage.
 
+### extractStyle
+
+Extracts the styles from the cache and returns them as a string.
+
+#### Parameters
+
+- `cache` (Cache): The cache instance containing the styles.
+- `options` (object | boolean, optional): Options for extracting the styles.
+  - `plain` (boolean, optional): If true, the styles will be returned in plain format. Default is false.
+  - `types` (string | string[], optional): The types of styles to extract. Default is ['style', 'token', 'cssVar'].
+
+#### Returns
+
+- (string): The extracted styles as a string.
+
+#### Example
+
+```typescript
+import { extractStyle, createCache } from '@ant-design/cssinjs';
+
+// 创建并填充缓存
+const cache = createCache();
+// 注意：在实际使用中，缓存通常会在渲染组件时自动填充
+
+// 提取样式
+const styles = extractStyle(cache, { plain: true, types: ['style', 'token'] });
+
+// 使用提取的样式
+const styleElement = document.createElement('style');
+styleElement.innerHTML = styles;
+document.head.appendChild(styleElement);
+```
+
 ## Transform
 
 When you need transform CSSObject before inject style. You can use `transformers` to handle this:

bunfig.toml

@@ -0,0 +1,2 @@
+[install]
+peer = false

docs/demo/css-var.md

@@ -0,0 +1,8 @@
+---
+title: CSS Variables
+nav:
+  title: Demo
+  path: /demo
+---
+
+<code src="../examples/css-var.tsx"></code>

docs/examples/components/Button.tsx

@@ -1,5 +1,5 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
-import { useStyleRegister } from '@ant-design/cssinjs';
+import { unit, useStyleRegister } from '@ant-design/cssinjs';
 import classNames from 'classnames';
 import React from 'react';
 import type { DerivativeToken } from './theme';
@@ -14,6 +14,7 @@ const genSharedButtonStyle = (
     borderColor: token.borderColor,
     borderWidth: token.borderWidth,
     borderRadius: token.borderRadius,
+    lineHeight: token.lineHeight,
 
     cursor: 'pointer',
 
@@ -65,7 +66,7 @@ const genPrimaryButtonStyle = (
 ): CSSInterpolation =>
   genSolidButtonStyle(prefixCls, token, () => ({
     backgroundColor: token.primaryColor,
-    border: `${token.borderWidth}px solid ${token.primaryColor}`,
+    border: `${unit(token.borderWidth)} solid ${token.primaryColor}`,
     color: token.reverseTextColor,
 
     '&:hover': {
@@ -83,7 +84,7 @@ const genGhostButtonStyle = (
     [`.${prefixCls}`]: {
       backgroundColor: 'transparent',
       color: token.primaryColor,
-      border: `${token.borderWidth}px solid ${token.primaryColor}`,
+      border: `${unit(token.borderWidth)} solid ${token.primaryColor}`,
 
       '&:hover': {
         borderColor: token.primaryColor,
@@ -102,7 +103,7 @@ const Button = ({ className, type, ...restProps }: ButtonProps) => {
   const prefixCls = 'ant-btn';
 
   // 【自定义】制造样式
-  const [theme, token, hashId] = useToken();
+  const [theme, token, hashId, cssVarKey] = useToken();
 
   // default 添加默认样式选择器后可以省很多冲突解决问题
   const defaultCls = `${prefixCls}-default`;
@@ -129,7 +130,7 @@ const Button = ({ className, type, ...restProps }: ButtonProps) => {
 
   return wrapSSR(
     <button
-      className={classNames(prefixCls, typeCls, hashId, className)}
+      className={classNames(prefixCls, typeCls, hashId, className, cssVarKey)}
       {...restProps}
     />,
   );

docs/examples/components/Spin.tsx

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

docs/examples/components/theme.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { TinyColor } from '@ctrl/tinycolor';
 import type { CSSObject, Theme } from '@ant-design/cssinjs';
 import { createTheme, useCacheToken } from '@ant-design/cssinjs';
+import { TinyColor } from '@ctrl/tinycolor';
+import React from 'react';
 
 export type GetStyle = (prefixCls: string, token: DerivativeToken) => CSSObject;
 
@@ -15,6 +15,9 @@ export interface DesignToken {
   borderRadius: number;
   borderColor: string;
   borderWidth: number;
+
+  lineHeight: number;
+  lineHeightBase: number;
 }
 
 export interface DerivativeToken extends DesignToken {
@@ -31,6 +34,9 @@ const defaultDesignToken: DesignToken = {
   borderRadius: 2,
   borderColor: 'black',
   borderWidth: 1,
+
+  lineHeight: 1.5,
+  lineHeightBase: 1.5,
 };
 
 // 模拟推导过程
@@ -48,21 +54,39 @@ export const ThemeContext = React.createContext(createTheme(derivative));
 export const DesignTokenContext = React.createContext<{
   token?: Partial<DesignToken>;
   hashed?: string | boolean;
+  cssVar?: {
+    key: string;
+  };
 }>({
   token: defaultDesignToken,
 });
 
-export function useToken(): [Theme<any, any>, DerivativeToken, string] {
-  const { token: rootDesignToken = {}, hashed } =
-    React.useContext(DesignTokenContext);
+export function useToken(): [
+  Theme<any, any>,
+  DerivativeToken,
+  string,
+  string | undefined,
+] {
+  const {
+    token: rootDesignToken = {},
+    hashed,
+    cssVar,
+  } = 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,
+        },
+      },
     },
   );
-  return [theme, token, hashed ? hashId : ''];
+  return [theme, token, hashed ? hashId : '', cssVar?.key];
 }

docs/examples/css-var.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import './basic.less';
+import Button from './components/Button';
+import { DesignTokenContext } from './components/theme';
+
+export default function App() {
+  const [show, setShow] = React.useState(true);
+
+  const [, forceUpdate] = React.useState({});
+  React.useEffect(() => {
+    forceUpdate({});
+  }, []);
+
+  return (
+    <div style={{ background: 'rgba(0,0,0,0.1)', padding: 16 }}>
+      <h3>默认情况下不会自动删除添加的样式</h3>
+
+      <label>
+        <input type="checkbox" checked={show} onChange={() => setShow(!show)} />
+        Show Components
+      </label>
+
+      {show && (
+        <div>
+          <DesignTokenContext.Provider
+            value={{ cssVar: { key: 'default' }, hashed: true }}
+          >
+            <Button>Default</Button>
+            <Button type="primary">Primary</Button>
+            <Button type="ghost">Ghost</Button>
+
+            <Button className="btn-override">Override By ClassName</Button>
+          </DesignTokenContext.Provider>
+          <br />
+          <DesignTokenContext.Provider
+            value={{
+              token: { primaryColor: 'green' },
+              cssVar: { key: 'default2' },
+              hashed: true,
+            }}
+          >
+            <Button>Default</Button>
+            <Button type="primary">Primary</Button>
+            <Button type="ghost">Ghost</Button>
+
+            <Button className="btn-override">Override By ClassName</Button>
+          </DesignTokenContext.Provider>
+        </div>
+      )}
+    </div>
+  );
+}