Skip to content

Commit

Permalink
feat: support custom hashPriority (#7)
Browse files Browse the repository at this point in the history
* feat: support custom hashPriority

* feat: code optimize

* feat: code optimize

* feat: code optimize
  • Loading branch information
kiner-tang authored Apr 18, 2023
1 parent 610aae0 commit 77b9f34
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 11 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
"typescript": "^4.0.0"
},
"dependencies": {
"@ant-design/cssinjs": "^1.6.1",
"@ant-design/cssinjs": "^1.8.1",
"@babel/runtime": "^7.18.3",
"@rc-component/portal": "^1.1.0",
"antd": "^5.3.0",
Expand Down
11 changes: 4 additions & 7 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
} from '@ant-design/cssinjs';
import * as antd from 'antd';
import { renderToString } from 'react-dom/server';
import type { ExtractStyleParams } from './interface';
import type { CustomRender } from './interface';
const blackList: string[] = [
'ConfigProvider',
'Drawer',
Expand All @@ -18,8 +18,6 @@ const blackList: string[] = [
'Tour',
];

const styleTagReg = /<style[^>]*>([\s\S]*?)<\/style>/g;

const defaultNode = () => (
<>
{Object.keys(antd)
Expand All @@ -44,7 +42,7 @@ const defaultNode = () => (
</>
);

export function extractStyle(customTheme?: ExtractStyleParams): string {
export function extractStyle(customTheme?: CustomRender): string {
const cache = createCache();
renderToString(
<StyleProvider cache={cache}>
Expand All @@ -53,8 +51,7 @@ export function extractStyle(customTheme?: ExtractStyleParams): string {
);

// Grab style from cache
const styleText = extStyle(cache);

const styleText = extStyle(cache, true);

return styleText.replace(styleTagReg, '$1');
return styleText;
}
2 changes: 1 addition & 1 deletion src/interface.ts
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export type ExtractStyleParams = (node: JSX.Element) => JSX.Element;
export type CustomRender = (node: JSX.Element) => JSX.Element;
6 changes: 4 additions & 2 deletions tests/__snapshots__/index.test.tsx.snap

Large diffs are not rendered by default.

34 changes: 34 additions & 0 deletions tests/index.test.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { StyleProvider } from '@ant-design/cssinjs';
import { extractStyle } from '../src/index';
import { ConfigProvider } from 'antd';

Expand All @@ -23,4 +24,37 @@ describe('Static-Style-Extract', () => {
expect(cssText).toContain(testGreenColor);
expect(cssText).toMatchSnapshot();
});
it('with custom hashPriority', () => {
const cssText = extractStyle(
(node) => (
<StyleProvider hashPriority='high'>
<ConfigProvider
theme={{
token: {
colorPrimary: testGreenColor,
},
}}
>
{node}
</ConfigProvider>
</StyleProvider>
)
);
expect(cssText).toContain(testGreenColor);
expect(cssText).not.toContain(':where');
expect(cssText).toMatchSnapshot();

const cssText2 = extractStyle((node) => (
<ConfigProvider
theme={{
token: {
colorPrimary: testGreenColor,
},
}}
>
{node}
</ConfigProvider>
));
expect(cssText2).toContain(':where');
});
});

0 comments on commit 77b9f34

Please sign in to comment.