generated from react-component/footer
-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: css var * chore: code clean * feat: update regexp * feat: more feature * test: add basic test case * test: could mix * feat: generate css var string when transform * test: cssVarRegister * test: add dynamic test * chore: code clean * test: auto clear test * chore: code clean
- Loading branch information
Showing
14 changed files
with
711 additions
and
32 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| --- | ||
| title: CSS Variables | ||
| nav: | ||
| title: Demo | ||
| path: /demo | ||
| --- | ||
|
|
||
| <code src="../examples/css-var.tsx"></code> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import hash from '@emotion/hash'; | ||
| import { removeCSS, updateCSS } from 'rc-util/lib/Dom/dynamicCSS'; | ||
| import { useContext } from 'react'; | ||
| import StyleContext, { | ||
| ATTR_MARK, | ||
| ATTR_TOKEN, | ||
| CSS_IN_JS_INSTANCE, | ||
| } from '../StyleContext'; | ||
| import { isClientSide } from '../util'; | ||
| import type { TokenWithCSSVar } from '../util/css-variables'; | ||
| import { transformToken } from '../util/css-variables'; | ||
| import useGlobalCache from './useGlobalCache'; | ||
|
|
||
| const useCSSVarRegister = <V, T extends Record<string, V>>( | ||
| config: { | ||
| path: string[]; | ||
| key: string; | ||
| prefix?: string; | ||
| unitless?: Record<string, boolean>; | ||
| token: any; | ||
| }, | ||
| fn: () => T, | ||
| ) => { | ||
| const { key, prefix, unitless, token } = config; | ||
| const { | ||
| cache: { instanceId }, | ||
| container, | ||
| autoClear, | ||
| } = useContext(StyleContext); | ||
| const { _tokenKey: tokenKey } = token; | ||
|
|
||
| const cache = useGlobalCache<[TokenWithCSSVar<T>, string, T, string]>( | ||
| 'variables', | ||
| [...config.path, key, tokenKey], | ||
| () => { | ||
| const styleId = hash([...config.path, key].join('%')); | ||
| const originToken = fn(); | ||
| const [mergedToken, cssVarsStr] = transformToken(originToken, key, { | ||
| prefix, | ||
| unitless, | ||
| }); | ||
| return [mergedToken, cssVarsStr, originToken, styleId]; | ||
| }, | ||
| ([, , , styleId], fromHMR) => { | ||
| if ((fromHMR || autoClear) && isClientSide) { | ||
| removeCSS(styleId, { mark: ATTR_MARK }); | ||
| } | ||
| }, | ||
| ([, cssVarsStr, , styleId]) => { | ||
| if (!cssVarsStr) { | ||
| return; | ||
| } | ||
| const style = updateCSS(cssVarsStr, styleId, { | ||
| mark: ATTR_MARK, | ||
| prepend: 'queue', | ||
| attachTo: container, | ||
| priority: -999, | ||
| }); | ||
|
|
||
| (style as any)[CSS_IN_JS_INSTANCE] = instanceId; | ||
|
|
||
| // Used for `useCacheToken` to remove on batch when token removed | ||
| style.setAttribute(ATTR_TOKEN, key); | ||
| }, | ||
| ); | ||
|
|
||
| return cache; | ||
| }; | ||
|
|
||
| export default useCSSVarRegister; |
Oops, something went wrong.