toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-23 00:11:33 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: css hydration error (#1397)

Browse Source
This commit is contained in:
Himself65 2023-03-07 17:08:33 -06:00 committed by GitHub
parent e5e3dceee8
commit b976ac8084
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 38 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web/next.config.mjs
View File

@ -85,7 +85,6 @@ const nextConfig = {
loader: 'raw-loader',
});
config.resolve.alias['yjs'] = require.resolve('yjs');
config.resolve.alias['@mui/styled-engine'] = '@mui/styled-engine-sc';
if (!isServer && !dev) {
config.devtool = 'hidden-nosources-source-map';

2
apps/web/package.json
View File

@ -24,7 +24,6 @@
"@emotion/server": "^11.10.0",
"@emotion/styled": "^11.10.6",
"@mui/material": "^5.11.11",
"@mui/styled-engine-sc": "^5.11.11",
"cmdk": "^0.1.22",
"css-spring": "^4.1.0",
"dayjs": "^1.11.7",
@ -36,7 +35,6 @@
"react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0",
"react-is": "^18.2.0",
"styled-components": "^5.3.8",
"swr": "^2.0.4",
"y-indexeddb": "^9.0.9",
"y-protocols": "^1.0.5",

8
apps/web/src/providers/ThemeProvider.tsx
View File

@ -10,7 +10,7 @@ import { ThemeProvider as NextThemeProvider, useTheme } from 'next-themes';
import type { PropsWithChildren } from 'react';
import React, { memo, useEffect, useMemo, useState } from 'react';
import { useCurrentPageId } from '../hooks/current/use-current-page-id';
import { useCurrentPage } from '../hooks/current/use-current-page-id';
import { useCurrentWorkspace } from '../hooks/current/use-current-workspace';
import { usePageMeta } from '../hooks/use-page-meta';
@ -20,7 +20,7 @@ const ThemeInjector = React.memo<{
return (
<GlobalStyles
styles={{
':root': globalThemeVariables(themeStyle) as any,
'#__next': globalThemeVariables(themeStyle) as any,
}}
/>
);
@ -30,10 +30,10 @@ const ThemeProviderInner = memo<React.PropsWithChildren>(
function ThemeProviderInner({ children }) {
const { theme } = useTheme();
const [currentWorkspace] = useCurrentWorkspace();
const [currentPage] = useCurrentPageId();
const currentPage = useCurrentPage();
const pageMeta = usePageMeta(currentWorkspace?.blockSuiteWorkspace ?? null);
const editorMode =
pageMeta.find(page => page.id === currentPage)?.mode ?? 'page';
pageMeta.find(page => page.id === currentPage?.id)?.mode ?? 'page';
const themeStyle = useMemo(() => getLightTheme(editorMode), [editorMode]);
const darkThemeStyle = useMemo(
() => getDarkTheme(editorMode),

2
apps/web/src/utils/create-emotion-cache.ts
View File

@ -13,5 +13,5 @@ export default function createEmotionCache() {
insertionPoint = emotionInsertionPoint ?? undefined;
}
return createCache({ key: 'affine-style', insertionPoint });
return createCache({ key: 'affine', insertionPoint });
}

3
package.json
View File

@ -67,8 +67,7 @@
"@tauri-apps/api@1.2.0": "patches/@tauri-apps__api@1.2.0.patch"
},
"overrides": {
"@emotion/unitless": "0.8.0",
"react-is": "18.2.0"
"react-is": "^18.2.0"
}
},
"packageManager": "pnpm@7.28.0"

4
packages/component/package.json
View File

@ -23,12 +23,10 @@
"@mui/base": "5.0.0-alpha.119",
"@mui/icons-material": "^5.11.11",
"@mui/material": "^5.11.11",
"@mui/styled-engine-sc": "^5.11.11",
"lit": "^2.6.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-is": "^18.2.0",
"styled-components": "^5.3.8"
"react-is": "^18.2.0"
},
"devDependencies": {
"@storybook/addon-actions": "7.0.0-beta.60",

142
pnpm-lock.yaml
View File

@ -1,8 +1,7 @@
lockfileVersion: 5.4
overrides:
'@emotion/unitless': 0.8.0
react-is: 18.2.0
react-is: ^18.2.0
patchedDependencies:
'@tauri-apps/api@1.2.0':
@ -157,7 +156,6 @@ importers:
'@emotion/server': ^11.10.0
'@emotion/styled': ^11.10.6
'@mui/material': ^5.11.11
'@mui/styled-engine-sc': ^5.11.11
'@perfsee/webpack': ^1.3.0
'@redux-devtools/extension': ^3.2.5
'@swc-jotai/debug-label': ^0.0.6
@ -182,9 +180,8 @@ importers:
react: ^18.2.0
react-dom: ^18.2.0
react-helmet-async: ^1.3.0
react-is: 18.2.0
react-is: ^18.2.0
redux: ^4.2.1
styled-components: ^5.3.8
swr: ^2.0.4
typescript: ^4.9.5
webpack: ^5.75.0
@ -208,7 +205,6 @@ importers:
'@emotion/server': 11.10.0
'@emotion/styled': 11.10.6_oouaibmszuch5k64ms7uxp2aia
'@mui/material': 5.11.11_xqeqsl5kvjjtyxwyi3jhw3yuli
'@mui/styled-engine-sc': 5.11.11_styled-components@5.3.8
cmdk: 0.1.22_zula6vjvt3wdocc4mwcxqa6nzi
css-spring: 4.1.0
dayjs: 1.11.7
@ -220,7 +216,6 @@ importers:
react-dom: 18.2.0_react@18.2.0
react-helmet-async: 1.3.0_biqbaboplfbrettd7655fr4n2y
react-is: 18.2.0
styled-components: 5.3.8_7i5myeigehqah43i5u7wbekgba
swr: 2.0.4_react@18.2.0
y-indexeddb: 9.0.9_yjs@13.5.48
y-protocols: 1.0.5
@ -262,7 +257,6 @@ importers:
'@mui/base': 5.0.0-alpha.119
'@mui/icons-material': ^5.11.11
'@mui/material': ^5.11.11
'@mui/styled-engine-sc': ^5.11.11
'@storybook/addon-actions': 7.0.0-beta.60
'@storybook/addon-essentials': 7.0.0-beta.60
'@storybook/addon-links': 7.0.0-beta.60
@ -275,10 +269,9 @@ importers:
lit: ^2.6.1
react: ^18.2.0
react-dom: ^18.2.0
react-is: 18.2.0
react-is: ^18.2.0
storybook: 7.0.0-beta.60
storybook-dark-mode-v7: 3.0.0-alpha.0
styled-components: ^5.3.8
typescript: ^4.9.5
vite: ^4.1.2
yjs: ^13.5.48
@ -298,12 +291,10 @@ importers:
'@mui/base': 5.0.0-alpha.119_zula6vjvt3wdocc4mwcxqa6nzi
'@mui/icons-material': 5.11.11_h5fh5ntwxtyr677wxvzgewjsma
'@mui/material': 5.11.11_xqeqsl5kvjjtyxwyi3jhw3yuli
'@mui/styled-engine-sc': 5.11.11_styled-components@5.3.8
lit: 2.6.1
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
react-is: 18.2.0
styled-components: 5.3.8_7i5myeigehqah43i5u7wbekgba
devDependencies:
'@storybook/addon-actions': 7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y
'@storybook/addon-essentials': 7.0.0-beta.60_biqbaboplfbrettd7655fr4n2y
@ -471,12 +462,14 @@ packages:
'@jridgewell/gen-mapping': 0.3.2
'@jridgewell/trace-mapping': 0.3.17
jsesc: 2.5.2
dev: true
/@babel/helper-annotate-as-pure/7.18.6:
resolution: {integrity: sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==}
engines: {node: '>=6.9.0'}
dependencies:
'@babel/types': 7.21.2
dev: true
/@babel/helper-builder-binary-assignment-operator-visitor/7.18.9:
resolution: {integrity: sha512-yFQ0YCHoIqarl8BCRwBL8ulYUaZpz3bNsA7oFepAzee+8/+ImtADXNOmO5vJvsPff3qi+hvpkY/NYBTrBQgdNw==}
@ -549,6 +542,7 @@ packages:
/@babel/helper-environment-visitor/7.18.9:
resolution: {integrity: sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==}
engines: {node: '>=6.9.0'}
dev: true
/@babel/helper-explode-assignable-expression/7.18.6:
resolution: {integrity: sha512-eyAYAsQmB80jNfg4baAtLeWAQHfHFiR483rzFK+BhETlGZaQC9bsfrugfXDCbRHLQbIA7U5NxhhOxN7p/dWIcg==}
@ -563,12 +557,14 @@ packages:
dependencies:
'@babel/template': 7.20.7
'@babel/types': 7.21.2
dev: true
/@babel/helper-hoist-variables/7.18.6:
resolution: {integrity: sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==}
engines: {node: '>=6.9.0'}
dependencies:
'@babel/types': 7.21.2
dev: true
/@babel/helper-member-expression-to-functions/7.21.0:
resolution: {integrity: sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==}
@ -659,6 +655,7 @@ packages:
engines: {node: '>=6.9.0'}
dependencies:
'@babel/types': 7.21.2
dev: true
/@babel/helper-string-parser/7.19.4:
resolution: {integrity: sha512-nHtDoQcuqFmwYNYPz3Rah5ph2p8PFeFCsZk9A/48dPc/rGocJ5J3hAAZ7pb76VWX3fZKu+uEr/FhH5jLx7umrw==}
@ -710,6 +707,7 @@ packages:
hasBin: true
dependencies:
'@babel/types': 7.21.2
dev: true
/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.18.6_@babel+core@7.21.0:
resolution: {integrity: sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==}
@ -1662,6 +1660,7 @@ packages:
'@babel/code-frame': 7.18.6
'@babel/parser': 7.21.2
'@babel/types': 7.21.2
dev: true
/@babel/traverse/7.21.2:
resolution: {integrity: sha512-ts5FFU/dSUPS13tv8XiEObDu9K+iagEKME9kAbaP7r0Y9KtZJZ+NGndDvWoRAYNpeWafbpFeki3q9QoMD6gxyw==}
@ -1681,24 +1680,6 @@ packages:
- supports-color
dev: true
/@babel/traverse/7.21.2_supports-color@5.5.0:
resolution: {integrity: sha512-ts5FFU/dSUPS13tv8XiEObDu9K+iagEKME9kAbaP7r0Y9KtZJZ+NGndDvWoRAYNpeWafbpFeki3q9QoMD6gxyw==}
engines: {node: '>=6.9.0'}
dependencies:
'@babel/code-frame': 7.18.6
'@babel/generator': 7.21.1
'@babel/helper-environment-visitor': 7.18.9
'@babel/helper-function-name': 7.21.0
'@babel/helper-hoist-variables': 7.18.6
'@babel/helper-split-export-declaration': 7.18.6
'@babel/parser': 7.21.2
'@babel/types': 7.21.2
debug: 4.3.4_supports-color@5.5.0
globals: 11.12.0
transitivePeerDependencies:
- supports-color
dev: false
/@babel/types/7.21.2:
resolution: {integrity: sha512-3wRZSs7jiFaB8AjxiiD+VqN5DTG2iRvJGQ+qYFrs/654lg6kGTQWIOFjlBo5RaXuAZjBmP3+OQH4dmhqiiyYxw==}
engines: {node: '>=6.9.0'}
@ -1983,10 +1964,6 @@ packages:
react: 18.2.0
dev: false
/@emotion/stylis/0.8.5:
resolution: {integrity: sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==}
dev: false
/@emotion/unitless/0.8.0:
resolution: {integrity: sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==}
dev: false
@ -3024,14 +3001,17 @@ packages:
'@jridgewell/set-array': 1.1.2
'@jridgewell/sourcemap-codec': 1.4.14
'@jridgewell/trace-mapping': 0.3.17
dev: true
/@jridgewell/resolve-uri/3.1.0:
resolution: {integrity: sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==}
engines: {node: '>=6.0.0'}
dev: true
/@jridgewell/set-array/1.1.2:
resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
engines: {node: '>=6.0.0'}
dev: true
/@jridgewell/source-map/0.3.2:
resolution: {integrity: sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==}
@ -3042,12 +3022,14 @@ packages:
/@jridgewell/sourcemap-codec/1.4.14:
resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
dev: true
/@jridgewell/trace-mapping/0.3.17:
resolution: {integrity: sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==}
dependencies:
'@jridgewell/resolve-uri': 3.1.0
'@jridgewell/sourcemap-codec': 1.4.14
dev: true
/@jridgewell/trace-mapping/0.3.9:
resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
@ -3192,21 +3174,6 @@ packages:
react: 18.2.0
dev: false
/@mui/styled-engine-sc/5.11.11_styled-components@5.3.8:
resolution: {integrity: sha512-6+HsfcKHlhjQklDoEup7Itl+Xgn+BCsqEpIdIIhlxED4YlOZ38xghxIKrx78XFZznTorbhAspUgDDKIaB5vDMg==}
engines: {node: '>=12.0.0'}
peerDependencies:
'@types/styled-components': ^5.1.14
styled-components: ^5.3.1
peerDependenciesMeta:
'@types/styled-components':
optional: true
dependencies:
'@babel/runtime': 7.21.0
prop-types: 15.8.1
styled-components: 5.3.8_7i5myeigehqah43i5u7wbekgba
dev: false
/@mui/styled-engine/5.11.11_xqp3pgpqjlfxxa3zxu4zoc4fba:
resolution: {integrity: sha512-wV0UgW4lN5FkDBXefN8eTYeuE9sjyQdg5h94vtwZCUamGQEzmCOtir4AakgmbWMy0x8OLjdEUESn9wnf5J9MOg==}
engines: {node: '>=12.0.0'}
@ -6041,23 +6008,6 @@ packages:
- supports-color
dev: true
/babel-plugin-styled-components/2.0.7_styled-components@5.3.8:
resolution: {integrity: sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==}
peerDependencies:
styled-components: '>= 2'
dependencies:
'@babel/helper-annotate-as-pure': 7.18.6
'@babel/helper-module-imports': 7.18.6
babel-plugin-syntax-jsx: 6.18.0
lodash: 4.17.21
picomatch: 2.3.1
styled-components: 5.3.8_7i5myeigehqah43i5u7wbekgba
dev: false
/babel-plugin-syntax-jsx/6.18.0:
resolution: {integrity: sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==}
dev: false
/balanced-match/1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@ -6304,10 +6254,6 @@ packages:
engines: {node: '>=10'}
dev: true
/camelize/1.0.1:
resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
dev: false
/caniuse-lite/1.0.30001458:
resolution: {integrity: sha512-lQ1VlUUq5q9ro9X+5gOEyH7i3vm+AYVT1WDCVB69XOZ17KZRhnZ9J0Sqz7wTHQaLBJccNCHq8/Ww5LlOIZbB0w==}
@ -6714,25 +6660,12 @@ packages:
engines: {node: '>=8'}
dev: true
/css-color-keywords/1.0.0:
resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==}
engines: {node: '>=4'}
dev: false
/css-spring/4.1.0:
resolution: {integrity: sha512-RdA4NuRNk2xChTSo+52P2jlfr+rUgNY94mV7uHrCeDPvaUtFZgW6LMoCy4xEX3HphZ7LLkCHiUY5PBSegFBE3A==}
dependencies:
lodash: 4.17.21
dev: false
/css-to-react-native/3.2.0:
resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==}
dependencies:
camelize: 1.0.1
css-color-keywords: 1.0.0
postcss-value-parser: 4.2.0
dev: false
/css.escape/1.5.1:
resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
dev: true
@ -6797,19 +6730,6 @@ packages:
dependencies:
ms: 2.1.2
/debug/4.3.4_supports-color@5.5.0:
resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
engines: {node: '>=6.0'}
peerDependencies:
supports-color: '*'
peerDependenciesMeta:
supports-color:
optional: true
dependencies:
ms: 2.1.2
supports-color: 5.5.0
dev: false
/decamelize/1.2.0:
resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
engines: {node: '>=0.10.0'}
@ -8485,6 +8405,7 @@ packages:
/globals/11.12.0:
resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
engines: {node: '>=4'}
dev: true
/globals/13.19.0:
resolution: {integrity: sha512-dkQ957uSRWHw7CFXLUtUHQI3g3aWApYhfNR2O6jn/907riyTYKVBmxYVROkBcY614FSSeSJh7Xm7SrUWCxvJMQ==}
@ -9395,6 +9316,7 @@ packages:
resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==}
engines: {node: '>=4'}
hasBin: true
dev: true
/json-buffer/3.0.1:
resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
@ -10683,6 +10605,7 @@ packages:
/picomatch/2.3.1:
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
engines: {node: '>=8.6'}
dev: true
/pidtree/0.6.0:
resolution: {integrity: sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==}
@ -10742,10 +10665,6 @@ packages:
'@babel/runtime': 7.21.0
dev: true
/postcss-value-parser/4.2.0:
resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
dev: false
/postcss/8.4.14:
resolution: {integrity: sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==}
engines: {node: ^10 || ^12 || >=14}
@ -12029,29 +11948,6 @@ packages:
peek-readable: 4.1.0
dev: true
/styled-components/5.3.8_7i5myeigehqah43i5u7wbekgba:
resolution: {integrity: sha512-6jQrlvaJQ16uWVVO0rBfApaTPItkqaG32l3746enNZzpMDxMvzmHzj8rHUg39bvVtom0Y8o8ZzWuchEXKGjVsg==}
engines: {node: '>=10'}
peerDependencies:
react: '>= 16.8.0'
react-dom: '>= 16.8.0'
react-is: '>= 16.8.0'
dependencies:
'@babel/helper-module-imports': 7.18.6
'@babel/traverse': 7.21.2_supports-color@5.5.0
'@emotion/is-prop-valid': 1.2.0
'@emotion/stylis': 0.8.5
'@emotion/unitless': 0.8.0
babel-plugin-styled-components: 2.0.7_styled-components@5.3.8
css-to-react-native: 3.2.0
hoist-non-react-statics: 3.3.2
react: 18.2.0
react-dom: 18.2.0_react@18.2.0
react-is: 18.2.0
shallowequal: 1.1.0
supports-color: 5.5.0
dev: false
/styled-jsx/5.1.1_react@18.2.0:
resolution: {integrity: sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==}
engines: {node: '>= 12.0.0'}

20
tests/theme.spec.ts
View File

@ -7,19 +7,23 @@ loadPage();
test.describe('Change Theme', () => {
// default could be anything according to the system
test.skip('default white', async ({ page }) => {
test('default white', async ({ browser }) => {
const context = await browser.newContext({
colorScheme: 'light',
});
const page = await context.newPage();
await page.goto('http://localhost:8080');
// waiting for page loading end
await page.waitForSelector('#__next');
await page.waitForSelector('html');
const root = page.locator('html');
const themeMode = await root.evaluate(element =>
window.getComputedStyle(element).getPropertyValue('--affine-theme-mode')
element.getAttribute('data-theme')
);
expect(themeMode).toBe('light');
const lightButton = page.locator('[data-testid=change-theme-light]');
const buttonPositionTop = await lightButton.evaluate(
element => window.getComputedStyle(element).top
);
expect(buttonPositionTop).toBe('0px');
const lightButton = page.locator('[data-testid=change-theme-dark]');
expect(await lightButton.isVisible()).toBe(false);
});
test('change theme to dark', async ({ page }) => {
@ -40,7 +44,7 @@ test.describe('Change Theme', () => {
await page.mouse.click((box?.x ?? 0) + 5, (box?.y ?? 0) + 5);
const root = page.locator('html');
const themeMode = await root.evaluate(element =>
window.getComputedStyle(element).getPropertyValue('--affine-theme-mode')
element.getAttribute('data-theme')
);
expect(themeMode).toBe('dark');
});