From b976ac80849dfbb7099c9ea8c735b748fe958399 Mon Sep 17 00:00:00 2001 From: Himself65 Date: Tue, 7 Mar 2023 17:08:33 -0600 Subject: [PATCH] fix: css hydration error (#1397) --- apps/web/next.config.mjs | 1 - apps/web/package.json | 2 - apps/web/src/providers/ThemeProvider.tsx | 8 +- apps/web/src/utils/create-emotion-cache.ts | 2 +- package.json | 3 +- packages/component/package.json | 4 +- pnpm-lock.yaml | 142 +++------------------ tests/theme.spec.ts | 20 +-- 8 files changed, 38 insertions(+), 144 deletions(-) diff --git a/apps/web/next.config.mjs b/apps/web/next.config.mjs index 8fe899a1dc..953e3510cf 100644 --- a/apps/web/next.config.mjs +++ b/apps/web/next.config.mjs @@ -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'; diff --git a/apps/web/package.json b/apps/web/package.json index bb52758cd9..7d97c23ed9 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -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", diff --git a/apps/web/src/providers/ThemeProvider.tsx b/apps/web/src/providers/ThemeProvider.tsx index fb5dfa10e5..49dbd0da48 100644 --- a/apps/web/src/providers/ThemeProvider.tsx +++ b/apps/web/src/providers/ThemeProvider.tsx @@ -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 ( ); @@ -30,10 +30,10 @@ const ThemeProviderInner = memo( 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), diff --git a/apps/web/src/utils/create-emotion-cache.ts b/apps/web/src/utils/create-emotion-cache.ts index 52302e4947..d35453df26 100644 --- a/apps/web/src/utils/create-emotion-cache.ts +++ b/apps/web/src/utils/create-emotion-cache.ts @@ -13,5 +13,5 @@ export default function createEmotionCache() { insertionPoint = emotionInsertionPoint ?? undefined; } - return createCache({ key: 'affine-style', insertionPoint }); + return createCache({ key: 'affine', insertionPoint }); } diff --git a/package.json b/package.json index e6bb149109..423f05ba8f 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/packages/component/package.json b/packages/component/package.json index 0b6449eb3a..84b4d0ae76 100644 --- a/packages/component/package.json +++ b/packages/component/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 13ac35b437..e436bd6269 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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'} diff --git a/tests/theme.spec.ts b/tests/theme.spec.ts index 154eb0b7aa..67897a0650 100644 --- a/tests/theme.spec.ts +++ b/tests/theme.spec.ts @@ -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'); });