Skip to content

Commit

Permalink
fix: hash token with steps before all finished (#183)
Browse files Browse the repository at this point in the history 
* test: fix test case

* test: fix test case

* test: fix test case
  • Loading branch information
@zombieJ
zombieJ authored Apr 18, 2024
1 parent 8d35e26 commit 64303f8
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 17 deletions.
12 changes: 9 additions & 3 deletions src/util/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const flattenTokenCache = new WeakMap<any, string>();
/**
* Flatten token to string, this will auto cache the result when token not change
*/
export function flattenToken(token: any) {
export function flattenToken(token: any, hashed: boolean = false) {
let str = flattenTokenCache.get(token) || '';

if (!str) {
Expand All @@ -45,12 +45,18 @@ export function flattenToken(token: any) {
if (value instanceof Theme) {
str += value.id;
} else if (value && typeof value === 'object') {
str += flattenToken(value);
str += flattenToken(value, hashed);
} else {
str += value;
}
});

// https://github.com/ant-design/ant-design/issues/48386
// Should hash the string to avoid style tag name too long
if (hashed) {
str = hash(str);
}

// Put in cache
flattenTokenCache.set(token, str);
}
Expand All @@ -61,7 +67,7 @@ export function flattenToken(token: any) {
* Convert derivative token to key string
*/
export function token2key(token: any, salt: string): string {
return hash(`${salt}_${flattenToken(token)}`);
return hash(`${salt}_${flattenToken(token, true)}`);
}

const randomSelectorKey = `random-${Date.now()}-${Math.random()}`.replace(
Expand Down
2 changes: 1 addition & 1 deletion tests/__snapshots__/css-variables.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`CSS Variables > support ssr 1`] = `"<style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"-999\\" data-token-hash=\\"apple\\" data-css-hash=\\"1iuujbx\\">.apple{--rc-primary-color:#1890ff;--rc-text-color:#333333;--rc-border-radius:2px;--rc-border-color:black;--rc-border-width:1px;--rc-line-height:1.5;--rc-primary-color-disabled:rgba(24, 144, 255, 0.5);}</style><style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"-999\\" data-token-hash=\\"apple\\" data-css-hash=\\"fjuhit\\">.apple.box{--rc-box-box-color:#5c21ff;}</style><style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"0\\" data-token-hash=\\"lt4t7l\\" data-css-hash=\\"1pik734\\">:where(.css-dev-only-do-not-override-tkc50g).box{line-height:var(--rc-line-height);border:var(--rc-border-width) solid var(--rc-border-color);color:var(--rc-box-box-color);background-color:var(--rc-primary-color);content:\\"800\\";}</style><style data-ant-cssinjs-cache-path=\\"data-ant-cssinjs-cache-path\\">.data-ant-cssinjs-cache-path{content:\\"lt4t7l|Box:1pik734\\";}</style>"`;
exports[`CSS Variables > support ssr 1`] = `"<style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"-999\\" data-token-hash=\\"apple\\" data-css-hash=\\"1rqyk15\\">.apple{--rc-primary-color:#1890ff;--rc-text-color:#333333;--rc-border-radius:2px;--rc-border-color:black;--rc-border-width:1px;--rc-line-height:1.5;--rc-primary-color-disabled:rgba(24, 144, 255, 0.5);}</style><style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"-999\\" data-token-hash=\\"apple\\" data-css-hash=\\"1gw9pft\\">.apple.box{--rc-box-box-color:#5c21ff;}</style><style data-rc-order=\\"prependQueue\\" data-rc-priority=\\"0\\" data-token-hash=\\"kbrbpp\\" data-css-hash=\\"1pce21i\\">:where(.css-dev-only-do-not-override-v5gwb5).box{line-height:var(--rc-line-height);border:var(--rc-border-width) solid var(--rc-border-color);color:var(--rc-box-box-color);background-color:var(--rc-primary-color);content:\\"800\\";}</style><style data-ant-cssinjs-cache-path=\\"data-ant-cssinjs-cache-path\\">.data-ant-cssinjs-cache-path{content:\\"kbrbpp|Box:1pce21i\\";}</style>"`;
8 changes: 4 additions & 4 deletions tests/index.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@ describe('csssinjs', () => {
const { container } = render(<TokenShower />);

// src/util.tsx - token2key func
expect(container.textContent).toEqual('rqtnqb');
expect(container.textContent).toEqual('1cpx0di');
});

it('hash', () => {
Expand Down Expand Up @@ -231,13 +231,13 @@ describe('csssinjs', () => {

const style = styles[0];
expect(style.innerHTML).toContain(
':where(.css-dev-only-do-not-override-6dmvpu).a',
':where(.css-dev-only-do-not-override-1ldpa3u).a',
);
expect(style.innerHTML).toContain(
':where(.css-dev-only-do-not-override-6dmvpu).b',
':where(.css-dev-only-do-not-override-1ldpa3u).b',
);
expect(style.innerHTML).toContain(
':where(.css-dev-only-do-not-override-6dmvpu).c .d',
':where(.css-dev-only-do-not-override-1ldpa3u).c .d',
);

unmount();
Expand Down
18 changes: 9 additions & 9 deletions tests/server.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,10 @@ describe('SSR', () => {
'<div id=":R1:" class="id">:R1:</div><div class="box"><div id=":Ra:" class="id">:Ra:</div></div><div id=":R3:" class="id">:R3:</div>',
);
expect(style).toEqual(
'<style data-rc-order="prependQueue" data-rc-priority="0" data-token-hash="u4cay0" data-css-hash="gn1jfq">.box{background-color:#1890ff;}</style><style data-ant-cssinjs-cache-path="data-ant-cssinjs-cache-path">.data-ant-cssinjs-cache-path{content:"u4cay0|.box:gn1jfq";}</style>',
'<style data-rc-order="prependQueue" data-rc-priority="0" data-token-hash="z4ntcy" data-css-hash="7g9s98">.box{background-color:#1890ff;}</style><style data-ant-cssinjs-cache-path="data-ant-cssinjs-cache-path">.data-ant-cssinjs-cache-path{content:"z4ntcy|.box:7g9s98";}</style>',
);
expect(plainStyle).toEqual(
'.box{background-color:#1890ff;}.data-ant-cssinjs-cache-path{content:"u4cay0|.box:gn1jfq";}',
'.box{background-color:#1890ff;}.data-ant-cssinjs-cache-path{content:"z4ntcy|.box:7g9s98";}',
);
expect(document.head.querySelectorAll('style')).toHaveLength(0);

Expand All @@ -134,7 +134,7 @@ describe('SSR', () => {
expect(document.head.querySelectorAll('style')).toHaveLength(3);
reset(
{
'u4cay0|.box': 'gn1jfq',
'z4ntcy|.box': '7g9s98',
},
false,
);
Expand Down Expand Up @@ -165,10 +165,10 @@ describe('SSR', () => {
);

expect(getStyleAndHash).toHaveBeenCalled();
expect(getStyleAndHash).toHaveBeenCalledWith('u4cay0|.box');
expect(getStyleAndHash).toHaveBeenCalledWith('z4ntcy|.box');
expect(getStyleAndHash).toHaveReturnedWith([
'.box{background-color:#1890ff;}',
'gn1jfq',
'7g9s98',
]);

// Not remove other style
Expand Down Expand Up @@ -241,7 +241,7 @@ describe('SSR', () => {

const style = extractStyle(cache);
expect(style).toEqual(
'<style data-rc-order="prependQueue" data-rc-priority="0" data-token-hash="1gt9vg4" data-css-hash="1fyoi4y">.css-dev-only-do-not-override-1cs5t9t.box{background-color:#1890ff;}</style><style data-ant-cssinjs-cache-path="data-ant-cssinjs-cache-path">.data-ant-cssinjs-cache-path{content:"1gt9vg4|.hashPriority:1fyoi4y";}</style>',
'<style data-rc-order="prependQueue" data-rc-priority="0" data-token-hash="zarvcw" data-css-hash="1j3b03q">.css-dev-only-do-not-override-1sesbhq.box{background-color:#1890ff;}</style><style data-ant-cssinjs-cache-path="data-ant-cssinjs-cache-path">.data-ant-cssinjs-cache-path{content:"zarvcw|.hashPriority:1j3b03q";}</style>',
);
});

Expand Down Expand Up @@ -330,7 +330,7 @@ describe('SSR', () => {

expect(html).toEqual('<div class="box"></div>');
expect(style).toEqual(
'<style data-rc-order="prependQueue" data-rc-priority="0" data-token-hash="u4cay0" data-css-hash="gn1jfq">.box{background-color:#1890ff;}</style><style data-ant-cssinjs-cache-path="data-ant-cssinjs-cache-path">.data-ant-cssinjs-cache-path{content:"u4cay0|.box:gn1jfq";}</style>',
'<style data-rc-order="prependQueue" data-rc-priority="0" data-token-hash="z4ntcy" data-css-hash="7g9s98">.box{background-color:#1890ff;}</style><style data-ant-cssinjs-cache-path="data-ant-cssinjs-cache-path">.data-ant-cssinjs-cache-path{content:"z4ntcy|.box:7g9s98";}</style>',
);
});

Expand All @@ -350,7 +350,7 @@ describe('SSR', () => {
);

expect(html).toEqual(
'<style data-token-hash="u4cay0" data-css-hash="gn1jfq">.box{background-color:#1890ff;}</style><div class="box"></div>',
'<style data-token-hash="z4ntcy" data-css-hash="7g9s98">.box{background-color:#1890ff;}</style><div class="box"></div>',
);
});
});
Expand Down Expand Up @@ -437,7 +437,7 @@ describe('SSR', () => {
`.order0{background-color:#1890ff;}`,
`.order1{background-color:#1890ff;}`,
`.order2{background-color:#1890ff;}`,
`.data-ant-cssinjs-cache-path{content:"u4cay0|order1:1qekw6y;u4cay0|order0:1r3sam0;u4cay0|order2:1at78yk";}`,
`.data-ant-cssinjs-cache-path{content:"z4ntcy|order1:wcvshe;z4ntcy|order0:1ec9a;z4ntcy|order2:v5oiw3";}`,
].join(''),
);
});
Expand Down

0 comments on commit 64303f8

Please sign in to comment.