From cf12c0207ae1663bebd22f268e06e275addb6e19 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 25 Oct 2023 17:09:14 +0800 Subject: [PATCH] test: cssVarRegister --- src/hooks/useCSSVarRegister.ts | 8 +-- src/hooks/useStyleRegister/index.tsx | 2 +- src/util/css-variables.ts | 2 +- tests/css-variables.spec.tsx | 87 +++++++++++++++++++--------- 4 files changed, 66 insertions(+), 33 deletions(-) diff --git a/src/hooks/useCSSVarRegister.ts b/src/hooks/useCSSVarRegister.ts index 6e8cd94..e6c4fdb 100644 --- a/src/hooks/useCSSVarRegister.ts +++ b/src/hooks/useCSSVarRegister.ts @@ -11,7 +11,7 @@ import type { TokenWithCSSVar } from '../util/css-variables'; import { transformToken } from '../util/css-variables'; import useGlobalCache from './useGlobalCache'; -const useCSSVarRegister = ( +const useCSSVarRegister = >( config: { path: string[]; key: string; @@ -19,7 +19,7 @@ const useCSSVarRegister = ( unitless?: Record; token: any; }, - fn: () => Record, + fn: () => T, ) => { const { key, prefix, unitless, token } = config; const { @@ -31,9 +31,7 @@ const useCSSVarRegister = ( const fullPath = [...config.path, key, tokenKey]; - const cache = useGlobalCache< - [TokenWithCSSVar, string, Record, string] - >( + const cache = useGlobalCache<[TokenWithCSSVar, string, T, string]>( 'variables', fullPath, () => { diff --git a/src/hooks/useStyleRegister/index.tsx b/src/hooks/useStyleRegister/index.tsx index f2059e2..3cf2843 100644 --- a/src/hooks/useStyleRegister/index.tsx +++ b/src/hooks/useStyleRegister/index.tsx @@ -520,7 +520,7 @@ export default function useStyleRegister( // == SSR == // ============================================================================ export function extractStyle(cache: Cache, plain = false) { - const matchPrefixRegexp = /^(style|variables|token)%/; + const matchPrefixRegexp = /^style%/; // prefix with `style` is used for `useStyleRegister` to cache style context const styleKeys = Array.from(cache.cache.keys()).filter((key) => diff --git a/src/util/css-variables.ts b/src/util/css-variables.ts index 3527993..5d1948d 100644 --- a/src/util/css-variables.ts +++ b/src/util/css-variables.ts @@ -19,7 +19,7 @@ export const serializeCSSVar = >( }; export type TokenWithCSSVar = { - [key in keyof T]?: string | TokenWithCSSVar; + [key in keyof T]?: string; }; export const transformToken = < diff --git a/tests/css-variables.spec.tsx b/tests/css-variables.spec.tsx index 251f069..c3934d5 100644 --- a/tests/css-variables.spec.tsx +++ b/tests/css-variables.spec.tsx @@ -3,7 +3,13 @@ import { render } from '@testing-library/react'; import classNames from 'classnames'; import type { PropsWithChildren } from 'react'; import React from 'react'; -import { createTheme, unit, useCacheToken, useStyleRegister } from '../src'; +import { + createTheme, + unit, + useCacheToken, + useCSSVarRegister, + useStyleRegister, +} from '../src'; export interface DesignToken { primaryColor: string; @@ -81,35 +87,49 @@ const DesignTokenProvider: React.FC< ); }; -function useToken(): [DerivativeToken, string, string | undefined] { +function useToken(): [DerivativeToken, string, string, DerivativeToken] { const { token: rootDesignToken = {}, hashed, cssVar, } = React.useContext(DesignTokenContext); - const [token, hashId] = useCacheToken( - theme, - [defaultDesignToken, rootDesignToken], - { - salt: typeof hashed === 'string' ? hashed : '', - cssVar: cssVar && { - prefix: 'rc', - key: cssVar.key, - unitless: { - lineHeight: true, - }, - ignore: { - lineHeightBase: true, - }, + const [token, hashId, realToken] = useCacheToken< + DerivativeToken, + DesignToken + >(theme, [defaultDesignToken, rootDesignToken], { + salt: typeof hashed === 'string' ? hashed : '', + cssVar: cssVar && { + prefix: 'rc', + key: cssVar.key, + unitless: { + lineHeight: true, + }, + ignore: { + lineHeightBase: true, }, }, - ); - return [token, hashed ? hashId : '', cssVar?.key]; + }); + return [token, hashed ? hashId : '', cssVar?.key || '', realToken]; } const useStyle = () => { - const [token, hashId, cssVarKey] = useToken(); + const [token, hashId, cssVarKey, realToken] = useToken(); + + const getComponentToken = () => ({ boxColor: '#5c21ff' }); + + const [cssVarToken] = useCSSVarRegister( + { + path: ['Box'], + key: cssVarKey, + token: realToken, + prefix: 'rc-box', + unitless: { + lineHeight: true, + }, + }, + cssVarKey ? getComponentToken : () => ({}), + ); useStyleRegister( { @@ -119,12 +139,20 @@ const useStyle = () => { path: ['Box'], }, () => { + // @ts-ignore + const mergedToken: DerivativeToken & { boxColor: string } = { + ...token, + ...(cssVarKey ? cssVarToken : getComponentToken()), + }; + return { '.box': { - lineHeight: token.lineHeight, - border: `${unit(token.borderWidth)} solid ${token.borderColor}`, - color: '#fff', - backgroundColor: token.primaryColor, + lineHeight: mergedToken.lineHeight, + border: `${unit(mergedToken.borderWidth)} solid ${ + mergedToken.borderColor + }`, + color: mergedToken.boxColor, + backgroundColor: mergedToken.primaryColor, }, }; }, @@ -163,10 +191,11 @@ describe('CSS Variables', () => { const styles = Array.from(document.head.querySelectorAll('style')); const box = container.querySelector('.target')!; - expect(styles.length).toBe(2); + expect(styles.length).toBe(3); expect(styles[0].textContent).toContain('.apple{'); expect(styles[0].textContent).toContain('--rc-line-height:1.5;'); - expect(styles[1].textContent).toContain( + expect(styles[1].textContent).toContain('--rc-box-box-color:#5c21ff'); + expect(styles[2].textContent).toContain( 'line-height:var(--rc-line-height);', ); expect(box).toHaveClass('apple'); @@ -217,13 +246,14 @@ describe('CSS Variables', () => { ); const styles = Array.from(document.head.querySelectorAll('style')); - expect(styles).toHaveLength(5); + expect(styles).toHaveLength(7); const nonCssVarBox = container.querySelector('.non-css-var')!; expect(nonCssVarBox).toHaveStyle({ lineHeight: '1.5', border: '1px solid black', backgroundColor: '#1890ff', + color: '#5c21ff', }); const cssVarBox = container.querySelector('.css-var')!; @@ -232,9 +262,11 @@ describe('CSS Variables', () => { '--rc-border-width': '1px', '--rc-border-color': 'black', '--rc-primary-color': '#1677ff', + '--rc-box-box-color': '#5c21ff', lineHeight: 'var(--rc-line-height)', border: 'var(--rc-border-width) solid var(--rc-border-color)', backgroundColor: 'var(--rc-primary-color)', + color: 'var(--rc-box-box-color)', }); const cssVarBox2 = container.querySelector('.css-var-2')!; @@ -245,9 +277,11 @@ describe('CSS Variables', () => { '--rc-border-width': '2px', '--rc-border-color': 'black', '--rc-primary-color': '#1677ff', + '--rc-box-box-color': '#5c21ff', lineHeight: 'var(--rc-line-height)', border: 'var(--rc-border-width) solid var(--rc-border-color)', backgroundColor: 'var(--rc-primary-color)', + color: 'var(--rc-box-box-color)', }); const nonCssVarBox2 = container.querySelector('.non-css-var-2')!; @@ -257,6 +291,7 @@ describe('CSS Variables', () => { lineHeight: '1.5', border: '3px solid black', backgroundColor: '#1677ff', + color: '#5c21ff', }); }); });