From d8655c10bf1056957420e2ac9e85ea24b82e4e7e Mon Sep 17 00:00:00 2001 From: Pete Watters <2938440+pete-watters@users.noreply.github.com> Date: Mon, 4 Sep 2023 09:23:03 +0100 Subject: [PATCH] chore: remove emotion, configure panda to load css globally, ditch stacks-ui base, #4164 --- package.json | 7 - panda.config.ts | 2 + src/app/app.tsx | 6 +- src/app/components/drawer/base-drawer.tsx | 14 +- .../global-styles/full-page-styles.tsx | 18 --- .../global-styles/global-styles.tsx | 47 ------ .../global-styles/hide-scrollbar.tsx | 7 - .../global-styles/popup-center-styles.tsx | 11 -- .../components/global-styles/popup-styles.tsx | 27 ---- .../components/global-styles/radix-styles.tsx | 105 ------------- .../components/global-styles/tippy-styles.tsx | 77 --------- src/app/components/text/capitalize.tsx | 10 +- test-app/src/components/app.tsx | 34 ++-- test-app/src/components/global-styles.tsx | 24 --- theme/global/full-page-styles.ts | 14 ++ theme/global/global.ts | 33 ++++ theme/global/popup-center-styles.ts | 8 + theme/global/popup-styles.ts | 24 +++ theme/global/radix-styles.ts | 101 ++++++++++++ theme/global/tippy-styles.ts | 75 +++++++++ webpack/webpack.config.base.js | 3 +- yarn.lock | 147 +----------------- 22 files changed, 290 insertions(+), 504 deletions(-) delete mode 100644 src/app/components/global-styles/full-page-styles.tsx delete mode 100644 src/app/components/global-styles/global-styles.tsx delete mode 100644 src/app/components/global-styles/hide-scrollbar.tsx delete mode 100644 src/app/components/global-styles/popup-center-styles.tsx delete mode 100644 src/app/components/global-styles/popup-styles.tsx delete mode 100644 src/app/components/global-styles/radix-styles.tsx delete mode 100644 src/app/components/global-styles/tippy-styles.tsx delete mode 100644 test-app/src/components/global-styles.tsx create mode 100644 theme/global/full-page-styles.ts create mode 100644 theme/global/global.ts create mode 100644 theme/global/popup-center-styles.ts create mode 100644 theme/global/popup-styles.ts create mode 100644 theme/global/radix-styles.ts create mode 100644 theme/global/tippy-styles.ts diff --git a/package.json b/package.json index 53dd93daa88..f31e2023f6c 100644 --- a/package.json +++ b/package.json @@ -127,10 +127,6 @@ "dependencies": { "@bitcoinerlab/secp256k1": "1.0.2", "@coinbase/cbpay-js": "1.0.2", - "@emotion/core": "11.0.0", - "@emotion/css": "11.11.2", - "@emotion/react": "11.11.1", - "@emotion/styled": "11.11.0", "@fungible-systems/zone-file": "2.0.0", "@hirosystems/token-metadata-api-client": "1.1.0", "@ledgerhq/hw-transport-webusb": "6.27.16", @@ -246,9 +242,6 @@ "@babel/preset-react": "7.22.5", "@babel/preset-typescript": "7.22.11", "@btckit/types": "0.0.19", - "@emotion/babel-plugin": "11.11.0", - "@emotion/babel-preset-css-prop": "11.11.0", - "@emotion/cache": "11.11.0", "@ls-lint/ls-lint": "2.0.1", "@pandacss/dev": "0.12.0", "@playwright/test": "1.37.1", diff --git a/panda.config.ts b/panda.config.ts index 0bd672e3ca8..c04aba3f239 100644 --- a/panda.config.ts +++ b/panda.config.ts @@ -1,6 +1,7 @@ import { defineConfig } from '@pandacss/dev'; import { breakpoints } from './theme/breakpoints'; +import { globalCss } from './theme/global/global'; import { keyframes } from './theme/keyframes'; import { buttonRecipe } from './theme/recipes/button'; import { semanticTokens } from './theme/semantic-tokens'; @@ -37,4 +38,5 @@ export default defineConfig({ outdir: 'leather-styles', outExtension: 'js', minify: true, + globalCss, }); diff --git a/src/app/app.tsx b/src/app/app.tsx index 8258735e54c..1cdabdd4ede 100644 --- a/src/app/app.tsx +++ b/src/app/app.tsx @@ -1,13 +1,13 @@ import { Suspense } from 'react'; import { Provider as ReduxProvider } from 'react-redux'; +import { radixBaseCSS } from '@radix-ui/themes/styles.css'; import { ThemeProvider } from '@stacks/ui'; import { QueryClientProvider } from '@tanstack/react-query'; import { PersistGate } from 'redux-persist/integration/react'; import { queryClient } from '@app/common/persistence'; import { theme } from '@app/common/theme'; -import { GlobalStyles } from '@app/components/global-styles/global-styles'; import { FullPageLoadingSpinner } from '@app/components/loading-spinner'; import { Devtools } from '@app/features/devtool/devtools'; import { AppErrorBoundary } from '@app/features/errors/app-error-boundary'; @@ -25,9 +25,9 @@ export function App() { } persistor={persistor}> - + {/* TODO - this works but investigate importing radixBaseCSS in panda layer config */} + - }> diff --git a/src/app/components/drawer/base-drawer.tsx b/src/app/components/drawer/base-drawer.tsx index 39d003ab588..3c95ee55dfb 100644 --- a/src/app/components/drawer/base-drawer.tsx +++ b/src/app/components/drawer/base-drawer.tsx @@ -10,7 +10,6 @@ import { noop } from '@shared/utils'; import { useOnClickOutside } from '@app/common/hooks/use-onclickoutside'; import { useThemeSwitcher } from '@app/common/theme-provider'; -import { hideScrollbarClassName } from '../global-styles/hide-scrollbar'; import { DrawerHeader } from './components/drawer-header'; function useDrawer(isShowing: boolean, onClose: () => void, pause?: boolean) { @@ -104,12 +103,13 @@ export const BaseDrawer = memo((props: BaseDrawerProps) => { maxHeight={['calc(100vh - 24px)', 'calc(100vh - 96px)']} > { - // use important here to override stacks ui styles - const styles = css` - html, - body { - background-color: ${token('colors.brown.1')}!important; - } - @media (min-width: 600px) { - html, - body { - background-color: ${token('colors.brown.2')}!important; - } - } - body { - &.no-scroll, - &.no-scroll .main-content { - overflow: hidden; - } - } - ${fullPageStyles}; - ${popupStyles}; - ${popupCenterStyles}; - ${tippyStyles} - ${radixBaseCSS} - ${radixStyles} - `; - - return ( - <> - {CSSReset} - - - ); -}); diff --git a/src/app/components/global-styles/hide-scrollbar.tsx b/src/app/components/global-styles/hide-scrollbar.tsx deleted file mode 100644 index 833d3f80bfb..00000000000 --- a/src/app/components/global-styles/hide-scrollbar.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import { css } from 'leather-styles/css'; - -export const hideScrollbarClassName = css({ - '&::-webkit-scrollbar': { - display: 'none', - }, -}); diff --git a/src/app/components/global-styles/popup-center-styles.tsx b/src/app/components/global-styles/popup-center-styles.tsx deleted file mode 100644 index 0eff846a6df..00000000000 --- a/src/app/components/global-styles/popup-center-styles.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { css } from '@emotion/react'; - -export const popupCenterStyles = css` - .mode__popup-center { - &, - body { - height: 100%; - width: 100%; - } - } -`; diff --git a/src/app/components/global-styles/popup-styles.tsx b/src/app/components/global-styles/popup-styles.tsx deleted file mode 100644 index e545440ece8..00000000000 --- a/src/app/components/global-styles/popup-styles.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { css } from '@emotion/react'; - -const maxWidth = '392px'; -const maxHeight = '600px'; - -export const popupStyles = css` - .mode__popup { - html, - body { - min-width: ${maxWidth}; - max-width: ${maxWidth}; - min-height: ${maxHeight}; - max-height: ${maxHeight}; - scrollbar-width: none; - - // Only add overflow scroll on non-firefox browsers - @supports not (-moz-appearance: none) { - overflow-y: scroll; - } - - ::-webkit-scrollbar { - display: 'none'; - width: 0; - } - } - } -`; diff --git a/src/app/components/global-styles/radix-styles.tsx b/src/app/components/global-styles/radix-styles.tsx deleted file mode 100644 index bbe7f4d0d5b..00000000000 --- a/src/app/components/global-styles/radix-styles.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { css } from '@emotion/react'; -import { token } from 'leather-styles/tokens'; - -export const radixStyles = css` - .radix-themes { - --font-size-7: 32px; - --font-size-8: 44px; - --font-size-9: 53px; - - --default-font-family: 'Diatype', 'Helvetica Neue', sans-serif; - --heading-font-family: 'Marche', 'Helvetica Neue', sans-serif; - - --letter-spacing-1: 0; - --letter-spacing-2: 0; - --letter-spacing-3: 0; - --letter-spacing-4: 0; - --letter-spacing-5: 0; - --letter-spacing-6: 0; - --letter-spacing-7: 0; - --letter-spacing-8: 0; - --letter-spacing-9: 0; - - // Configured to Diatype - --font-weight-light: 400; - --font-weight-regular: 400; - --font-weight-medium: 500; - --font-weight-bold: 500; - - --color-overlay: rgba(0, 0, 0, 0.3); - } - - :root, - .light, - .light-theme { - --brown-1: ${token('colors.brown.1')}; - --brown-2: ${token('colors.brown.2')}; - --brown-3: ${token('colors.brown.3')}; - --brown-4: ${token('colors.brown.4')}; - --brown-5: ${token('colors.brown.5')}; - --brown-6: ${token('colors.brown.6')}; - --brown-7: ${token('colors.brown.7')}; - --brown-8: ${token('colors.brown.8')}; - --brown-9: ${token('colors.brown.9')}; - --brown-10: ${token('colors.brown.10')}; - --brown-11: ${token('colors.brown.11')}; - --brown-12: ${token('colors.brown.12')}; - - --gray-1: ${token('colors.ink.1')}; - --gray-2: ${token('colors.ink.2')}; - --gray-3: ${token('colors.ink.3')}; - --gray-4: ${token('colors.ink.4')}; - --gray-5: ${token('colors.ink.5')}; - --gray-6: ${token('colors.ink.6')}; - --gray-7: ${token('colors.ink.7')}; - --gray-8: ${token('colors.ink.8')}; - --gray-9: ${token('colors.ink.9')}; - --gray-10: ${token('colors.ink.10')}; - --gray-11: ${token('colors.ink.11')}; - --gray-12: ${token('colors.ink.12')}; - } - - .dark, - .dark-theme { - --brown-1: ${token('colors.brown.1')}; - --brown-2: ${token('colors.brown.2')}; - --brown-3: ${token('colors.brown.3')}; - --brown-4: ${token('colors.brown.4')}; - --brown-5: ${token('colors.brown.5')}; - --brown-6: ${token('colors.brown.6')}; - --brown-7: ${token('colors.brown.7')}; - --brown-8: ${token('colors.brown.8')}; - --brown-9: ${token('colors.brown.9')}; - --brown-10: ${token('colors.brown.10')}; - --brown-11: ${token('colors.brown.11')}; - --brown-12: ${token('colors.brown.12')}; - - --gray-1: ${token('colors.ink.1')}; - --gray-2: ${token('colors.ink.2')}; - --gray-3: ${token('colors.ink.3')}; - --gray-4: ${token('colors.ink.4')}; - --gray-5: ${token('colors.ink.5')}; - --gray-6: ${token('colors.ink.6')}; - --gray-7: ${token('colors.ink.7')}; - --gray-8: ${token('colors.ink.8')}; - --gray-9: ${token('colors.ink.9')}; - --gray-10: ${token('colors.ink.10')}; - --gray-11: ${token('colors.ink.11')}; - --gray-12: ${token('colors.ink.12')}; - } - - .rt-TabsList.rt-r-size-2 { - height: auto; - --tabs-trigger-inner-padding-y: ${token('spacing.space.04')}; - } - .rt-TabsTrigger { - flex: 1; - } - .rt-TabsTriggerInner { - width: 100%; - } - // override the radix tabs color - .rt-TabsTrigger[data-state='active']::before { - background-color: ${token('colors.brown.12')}; - } -`; diff --git a/src/app/components/global-styles/tippy-styles.tsx b/src/app/components/global-styles/tippy-styles.tsx deleted file mode 100644 index e0221eae5df..00000000000 --- a/src/app/components/global-styles/tippy-styles.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { css } from '@emotion/react'; - -export const tippyStyles = css` - .tippy-box[data-animation='fade'][data-state='hidden'] { - opacity: 0; - } - [data-tippy-root] { - max-width: calc(100vw - 10px); - } - .tippy-box { - position: relative; - background-color: #333; - color: #fff; - border-radius: 4px; - font-size: 14px; - line-height: 1.4; - outline: 0; - transition-property: transform, visibility, opacity; - } - .tippy-box[data-placement^='top'] > .tippy-arrow { - bottom: 0; - } - .tippy-box[data-placement^='top'] > .tippy-arrow:before { - bottom: -7px; - left: 0; - border-width: 8px 8px 0; - border-top-color: initial; - transform-origin: center top; - } - .tippy-box[data-placement^='bottom'] > .tippy-arrow { - top: 0; - } - .tippy-box[data-placement^='bottom'] > .tippy-arrow:before { - top: -7px; - left: 0; - border-width: 0 8px 8px; - border-bottom-color: initial; - transform-origin: center bottom; - } - .tippy-box[data-placement^='left'] > .tippy-arrow { - right: 0; - } - .tippy-box[data-placement^='left'] > .tippy-arrow:before { - border-width: 8px 0 8px 8px; - border-left-color: initial; - right: -7px; - transform-origin: center left; - } - .tippy-box[data-placement^='right'] > .tippy-arrow { - left: 0; - } - .tippy-box[data-placement^='right'] > .tippy-arrow:before { - left: -7px; - border-width: 8px 8px 8px 0; - border-right-color: initial; - transform-origin: center right; - } - .tippy-box[data-inertia][data-state='visible'] { - transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); - } - .tippy-arrow { - width: 16px; - height: 16px; - color: #333; - } - .tippy-arrow:before { - content: ''; - position: absolute; - border-color: transparent; - border-style: solid; - } - .tippy-content { - position: relative; - padding: 5px 9px; - z-index: 1; - } -`; diff --git a/src/app/components/text/capitalize.tsx b/src/app/components/text/capitalize.tsx index 65fcc034b7e..90122eac89b 100644 --- a/src/app/components/text/capitalize.tsx +++ b/src/app/components/text/capitalize.tsx @@ -1,5 +1,7 @@ -import styled from '@emotion/styled'; +import { ReactNode } from 'react'; -export const Capitalize = styled.span` - text-transform: capitalize; -`; +import { styled } from 'leather-styles/jsx'; + +export function Capitalize({ children }: { children: ReactNode }) { + return {children}; +} diff --git a/test-app/src/components/app.tsx b/test-app/src/components/app.tsx index 0f9c44d360e..93bf0ce9269 100755 --- a/test-app/src/components/app.tsx +++ b/test-app/src/components/app.tsx @@ -1,32 +1,28 @@ import React from 'react'; -import { ThemeProvider, theme, Flex, ColorModeProvider } from '@stacks/ui'; -import { Connect } from '@stacks/connect-react'; + import { AppContext } from '@common/context'; +import { useAuth } from '@common/use-auth'; import { Header } from '@components/header'; import { Home } from '@components/home'; - -import { useAuth } from '@common/use-auth'; -import { GlobalStyles } from '@components/global-styles'; +import { Connect } from '@stacks/connect-react'; +import { Flex, ThemeProvider, theme } from '@stacks/ui'; export const App: React.FC = () => { const { authOptions, state, authResponse, appPrivateKey, handleSignOut } = useAuth(); return ( - - - - - - {/*These are for tests*/} - {authResponse && } - {appPrivateKey && } -
- - - - - + + + + {/*These are for tests*/} + {authResponse && } + {appPrivateKey && } +
+ + + + ); }; diff --git a/test-app/src/components/global-styles.tsx b/test-app/src/components/global-styles.tsx deleted file mode 100644 index c505932fcb7..00000000000 --- a/test-app/src/components/global-styles.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React, { memo } from 'react'; -import { CSSReset } from '@stacks/ui'; -import { Global, css } from '@emotion/react'; - -const SizeStyles = css` - body { - display: flex; - width: 100%; - } - #app-root { - flex-grow: 1; - display: flex; - min-height: 100vh; - } -`; - -export const GlobalStyles = memo(() => { - return ( - <> - {CSSReset} - - - ); -}); diff --git a/theme/global/full-page-styles.ts b/theme/global/full-page-styles.ts new file mode 100644 index 00000000000..7a5ebf42273 --- /dev/null +++ b/theme/global/full-page-styles.ts @@ -0,0 +1,14 @@ +export const fullPageStyles = { + '.mode__full-page': { + '&, body, #app, main,.radix-themes': { + height: '100%', + maxHeight: 'unset', + width: '100%', + }, + '.main-content': { + flexGrow: 1, + justifyContent: 'center', + margin: '0 auto', + }, + }, +}; diff --git a/theme/global/global.ts b/theme/global/global.ts new file mode 100644 index 00000000000..55423a2a497 --- /dev/null +++ b/theme/global/global.ts @@ -0,0 +1,33 @@ +import { defineGlobalStyles } from '@pandacss/dev'; + +import { fullPageStyles } from './full-page-styles'; +import { popupCenterStyles } from './popup-center-styles'; +import { popupStyles } from './popup-styles'; +import { radixStyles, radixTabStyles } from './radix-styles'; +import { tippyStyles } from './tippy-styles'; + +// ts-unused-exports:disable-next-line +export const globalCss = defineGlobalStyles({ + 'html, body': { + backgroundColor: 'accent.background-secondary', + }, + button: { + cursor: 'pointer', + }, + '@media (min-width: 600px)': { + 'html, body': { + backgroundColor: 'accent.background-secondary', + }, + }, + body: { + '&.no-scroll, &.no-scroll .main-content': { + overflow: 'hidden', + }, + }, + ...fullPageStyles, + ...popupStyles, + ...popupCenterStyles, + ...tippyStyles, + ...radixStyles, + ...radixTabStyles, +}); diff --git a/theme/global/popup-center-styles.ts b/theme/global/popup-center-styles.ts new file mode 100644 index 00000000000..d16d386c739 --- /dev/null +++ b/theme/global/popup-center-styles.ts @@ -0,0 +1,8 @@ +export const popupCenterStyles = { + '.mode__popup-center': { + '&, body': { + height: '100%', + width: '100%', + }, + }, +}; diff --git a/theme/global/popup-styles.ts b/theme/global/popup-styles.ts new file mode 100644 index 00000000000..26897cd7dd3 --- /dev/null +++ b/theme/global/popup-styles.ts @@ -0,0 +1,24 @@ +const maxWidth = '392px'; +const maxHeight = '600px'; + +export const popupStyles = { + '.mode__popup': { + 'html,body': { + minWidth: maxWidth, + maxWidth: maxWidth, + minHeight: maxHeight, + maxHeight: maxHeight, + scrollbarWidth: 'none', + + // Only add overflow scroll on non-firefox browsers + '@supports not (-moz-appearance: none)': { + overflowY: 'scroll', + }, + + '::-webkit-scrollbar': { + display: 'none', + width: 0, + }, + }, + }, +}; diff --git a/theme/global/radix-styles.ts b/theme/global/radix-styles.ts new file mode 100644 index 00000000000..f203f6bec0b --- /dev/null +++ b/theme/global/radix-styles.ts @@ -0,0 +1,101 @@ +export const radixStyles = { + '.radix-themes': { + '--font-size-7': '32px', + '--font-size-8': '44px', + '--font-size-9': '53px', + + '--default-font-family': '"Diatype", "Helvetica Neue", sans-serif', + '--heading-font-family': '"Marche", "Helvetica Neue", sans-serif', + + '--letter-spacing-1': 0, + '--letter-spacing-2': 0, + '--letter-spacing-3': 0, + '--letter-spacing-4': 0, + '--letter-spacing-5': 0, + '--letter-spacing-6': 0, + '--letter-spacing-7': 0, + '--letter-spacing-8': 0, + '--letter-spacing-9': 0, + + // Configured to Diatype + '--font-weight-light': 400, + '--font-weight-regular': 400, + '--font-weight-medium': 500, + '--font-weight-bold': 500, + + '--color-overlay': 'rgba(0, 0, 0, 0.3)', //check this + }, + + // TODO check if these are being set properly + ':root, .light, .light-theme': { + '--brown-1': 'brown.1', + '--brown-2': 'brown.2', + '--brown-3': 'brown.3', + '--brown-4': 'brown.4', + '--brown-5': 'brown.5', + '--brown-6': 'brown.6', + '--brown-7': 'brown.7', + '--brown-8': 'brown.8', + '--brown-9': 'brown.9', + '--brown-10': 'brown.10', + '--brown-11': 'brown.11', + '--brown-12': 'brown.12', + + '--gray-1': 'ink.1', + '--gray-2': 'ink.2', + '--gray-3': 'ink.3', + '--gray-4': 'ink.4', + '--gray-5': 'ink.5', + '--gray-6': 'ink.6', + '--gray-7': 'ink.7', + '--gray-8': 'ink.8', + '--gray-9': 'ink.9', + '--gray-10': 'ink.10', + '--gray-11': 'ink.11', + '--gray-12': 'ink.12', + }, + '.dark, .dark-theme': { + '--brown-1': 'brown.1', + '--brown-2': 'brown.2', + '--brown-3': 'brown.3', + '--brown-4': 'brown.4', + '--brown-5': 'brown.5', + '--brown-6': 'brown.6', + '--brown-7': 'brown.7', + '--brown-8': 'brown.8', + '--brown-9': 'brown.9', + '--brown-10': 'brown.10', + '--brown-11': 'brown.11', + '--brown-12': 'brown.12', + + '--gray-1': 'ink.1', + '--gray-2': 'ink.2', + '--gray-3': 'ink.3', + '--gray-4': 'ink.4', + '--gray-5': 'ink.5', + '--gray-6': 'ink.6', + '--gray-7': 'ink.7', + '--gray-8': 'ink.8', + '--gray-9': 'ink.9', + '--gray-10': 'ink.10', + '--gray-11': 'ink.11', + '--gray-12': 'ink.12', + }, +}; + +// override the radix tabs color +export const radixTabStyles = { + '.rt-TabsList.rt-r-size-2': { + height: 'auto', + '--tabs-trigger-inner-padding-y': 'spacing.space.04', + }, + '.rt-TabsTrigger': { + flex: 1, + }, + '.rt-TabsTriggerInner': { + width: '100%', + }, + '.rt-TabsTrigger[data-state="active"]::before': { + backgroundColor: 'accent.text-primary', + }, +}; diff --git a/theme/global/tippy-styles.ts b/theme/global/tippy-styles.ts new file mode 100644 index 00000000000..774596783ea --- /dev/null +++ b/theme/global/tippy-styles.ts @@ -0,0 +1,75 @@ +export const tippyStyles = { + '.tippy-box[data-animation="fade"][data-state="hidden"]': { + opacity: 0, + }, + '[data-tippy-root]': { + maxWidth: 'calc(100vw - 10px)', + }, + '.tippy-box': { + position: 'relative', + backgroundColor: ' #333', + color: '#fff', + borderRadius: '4px', + fontSize: '14px', + lineHeight: 1.4, + outline: 0, + transitionProperty: 'transform, visibility, opacity', + }, + '.tippy-box[data-placement^="top"] > .tippy-arrow': { + bottom: 0, + }, + '.tippy-box[data-placement^="top"] > .tippy-arrow:before': { + bottom: '-7px', + left: 0, + borderWidth: '8px 8px 0', + borderTopColor: 'initial', + transformOrigin: 'center top', + }, + '.tippy-box[data-placement^="bottom"] > .tippy-arrow': { + top: 0, + }, + '.tippy-box[data-placement^="bottom"] > .tippy-arrow:before': { + top: '-7px', + left: 0, + borderWidth: '0 8px 8px', + borderBottomColor: 'initial', + transformOrigin: 'center bottom', + }, + '.tippy-box[data-placement^="left"] > .tippy-arrow': { + right: 0, + }, + '.tippy-box[data-placement^="left"] > .tippy-arrow:before': { + borderWidth: '8px 0 8px 8px', + borderLeftColor: 'initial', + right: '-7px', + transformOrigin: 'center left', + }, + '.tippy-box[data-placement^="right"] > .tippy-arrow': { + left: 0, + }, + '.tippy-box[data-placement^="right"] > .tippy-arrow:before': { + left: '-7px', + borderWidth: '8px 8px 8px 0', + borderRightColor: 'initial', + transformOrigin: 'center right', + }, + '.tippy-box[data-inertia][data-state="visible"]': { + transitionTimingFunction: 'cubic-bezier(0.54, 1.5, 0.38, 1.11)', + }, + '.tippy-arrow': { + width: '16px', + height: '16px', + color: '#333', + }, + '.tippy-arrow:before': { + content: '', + position: 'absolute', + borderColor: 'transparent', + borderStyle: 'solid', + }, + '.tippy-content': { + position: 'relative', + padding: '5px 9px', + zIndex: 1, + }, +}; diff --git a/webpack/webpack.config.base.js b/webpack/webpack.config.base.js index 3fd91aeda90..c2554fe3bf9 100755 --- a/webpack/webpack.config.base.js +++ b/webpack/webpack.config.base.js @@ -135,6 +135,7 @@ const config = { { test: /\.(ts|tsx)$/, exclude: /node_modules/, + // #4164 TODO investigate removing babel use: { loader: 'babel-loader', options: { @@ -144,11 +145,9 @@ const config = { '@babel/preset-react', { runtime: 'automatic', - importSource: '@emotion/react', }, ], ], - plugins: ['@emotion', IS_DEV && require.resolve('react-refresh/babel')].filter(Boolean), }, }, }, diff --git a/yarn.lock b/yarn.lock index 31562d18e83..f85ac4a60f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -816,7 +816,7 @@ dependencies: "@babel/helper-plugin-utils" "^7.8.0" -"@babel/plugin-syntax-jsx@^7.17.12", "@babel/plugin-syntax-jsx@^7.21.4", "@babel/plugin-syntax-jsx@^7.7.2": +"@babel/plugin-syntax-jsx@^7.21.4", "@babel/plugin-syntax-jsx@^7.7.2": version "7.21.4" resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.21.4.tgz#f264ed7bf40ffc9ec239edabc17a50c4f5b6fea2" integrity sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ== @@ -1567,30 +1567,6 @@ resolved "https://registry.yarnpkg.com/@emmetio/scanner/-/scanner-1.0.4.tgz#e9cdc67194fd91f8b7eb141014be4f2d086c15f1" integrity sha512-IqRuJtQff7YHHBk4G8YZ45uB9BaAGcwQeVzgj/zj8/UdOhtQpEIupUhSk8dys6spFIWVZVeK20CzGEnqR5SbqA== -"@emotion/babel-plugin-jsx-pragmatic@^0.2.1": - version "0.2.1" - resolved "https://registry.yarnpkg.com/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.2.1.tgz#01d3306fde73b60d683f78f3bd9f6b2c919b63b6" - integrity sha512-xy1SlgEJygAAIvIuC2idkGKJYa6v5iwoyILkvNKgk347bV+IImXrUat5Z86EmLGyWhEoTplVT9EHqTnHZG4HFw== - dependencies: - "@babel/plugin-syntax-jsx" "^7.17.12" - -"@emotion/babel-plugin@11.11.0", "@emotion/babel-plugin@^11.11.0": - version "11.11.0" - resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c" - integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ== - dependencies: - "@babel/helper-module-imports" "^7.16.7" - "@babel/runtime" "^7.18.3" - "@emotion/hash" "^0.9.1" - "@emotion/memoize" "^0.8.1" - "@emotion/serialize" "^1.1.2" - babel-plugin-macros "^3.1.0" - convert-source-map "^1.5.0" - escape-string-regexp "^4.0.0" - find-root "^1.1.0" - source-map "^0.5.7" - stylis "4.2.0" - "@emotion/babel-plugin@^11.10.8": version "11.10.8" resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.8.tgz#bae325c902937665d00684038fd5294223ef9e1d" @@ -1608,27 +1584,6 @@ source-map "^0.5.7" stylis "4.1.4" -"@emotion/babel-preset-css-prop@11.11.0": - version "11.11.0" - resolved "https://registry.yarnpkg.com/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-11.11.0.tgz#6a86d3df74f7804af1ae0b37cd8893a9863ddbb7" - integrity sha512-+1Cba68IyBeltWzvbBSXcBWqP2eKQuQcSUpIu3ma4pOUeRol4EvwWrYS2Rv51aIVqg066fLB+Z9O/8NKR7uUlQ== - dependencies: - "@babel/plugin-transform-react-jsx" "^7.17.12" - "@babel/runtime" "^7.18.3" - "@emotion/babel-plugin" "^11.11.0" - "@emotion/babel-plugin-jsx-pragmatic" "^0.2.1" - -"@emotion/cache@11.11.0", "@emotion/cache@^11.11.0": - version "11.11.0" - resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff" - integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ== - dependencies: - "@emotion/memoize" "^0.8.1" - "@emotion/sheet" "^1.2.2" - "@emotion/utils" "^1.2.1" - "@emotion/weak-memoize" "^0.3.1" - stylis "4.2.0" - "@emotion/cache@^11.10.8", "@emotion/cache@^11.4.0": version "11.10.8" resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.8.tgz#3b39b4761bea0ae2f4f07f0a425eec8b6977c03e" @@ -1640,32 +1595,11 @@ "@emotion/weak-memoize" "^0.3.0" stylis "4.1.4" -"@emotion/core@11.0.0": - version "11.0.0" - resolved "https://registry.yarnpkg.com/@emotion/core/-/core-11.0.0.tgz#d075867e07864119de7cfd5268c15012bd2d6290" - integrity sha512-w4sE3AmHmyG6RDKf6mIbtHpgJUSJ2uGvPQb8VXFL7hFjMPibE8IiehG8cMX3Ztm4svfCQV6KqusQbeIOkurBcA== - -"@emotion/css@11.11.2": - version "11.11.2" - resolved "https://registry.yarnpkg.com/@emotion/css/-/css-11.11.2.tgz#e5fa081d0c6e335352e1bc2b05953b61832dca5a" - integrity sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew== - dependencies: - "@emotion/babel-plugin" "^11.11.0" - "@emotion/cache" "^11.11.0" - "@emotion/serialize" "^1.1.2" - "@emotion/sheet" "^1.2.2" - "@emotion/utils" "^1.2.1" - "@emotion/hash@^0.9.0": version "0.9.0" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7" integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ== -"@emotion/hash@^0.9.1": - version "0.9.1" - resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43" - integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== - "@emotion/is-prop-valid@^0.8.1": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" @@ -1680,13 +1614,6 @@ dependencies: "@emotion/memoize" "^0.8.0" -"@emotion/is-prop-valid@^1.2.1": - version "1.2.1" - resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc" - integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw== - dependencies: - "@emotion/memoize" "^0.8.1" - "@emotion/memoize@0.7.4": version "0.7.4" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" @@ -1702,25 +1629,6 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== -"@emotion/memoize@^0.8.1": - version "0.8.1" - resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17" - integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== - -"@emotion/react@11.11.1": - version "11.11.1" - resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.1.tgz#b2c36afac95b184f73b08da8c214fdf861fa4157" - integrity sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA== - dependencies: - "@babel/runtime" "^7.18.3" - "@emotion/babel-plugin" "^11.11.0" - "@emotion/cache" "^11.11.0" - "@emotion/serialize" "^1.1.2" - "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1" - "@emotion/utils" "^1.2.1" - "@emotion/weak-memoize" "^0.3.1" - hoist-non-react-statics "^3.3.1" - "@emotion/react@^11.8.1": version "11.10.8" resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.8.tgz#02e274ecb45e03ab9d7a8eb9f0f0c064613eaf7b" @@ -1746,39 +1654,11 @@ "@emotion/utils" "^1.2.0" csstype "^3.0.2" -"@emotion/serialize@^1.1.2": - version "1.1.2" - resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.2.tgz#017a6e4c9b8a803bd576ff3d52a0ea6fa5a62b51" - integrity sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA== - dependencies: - "@emotion/hash" "^0.9.1" - "@emotion/memoize" "^0.8.1" - "@emotion/unitless" "^0.8.1" - "@emotion/utils" "^1.2.1" - csstype "^3.0.2" - "@emotion/sheet@^1.2.1": version "1.2.1" resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c" integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA== -"@emotion/sheet@^1.2.2": - version "1.2.2" - resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec" - integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA== - -"@emotion/styled@11.11.0": - version "11.11.0" - resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.11.0.tgz#26b75e1b5a1b7a629d7c0a8b708fbf5a9cdce346" - integrity sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng== - dependencies: - "@babel/runtime" "^7.18.3" - "@emotion/babel-plugin" "^11.11.0" - "@emotion/is-prop-valid" "^1.2.1" - "@emotion/serialize" "^1.1.2" - "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1" - "@emotion/utils" "^1.2.1" - "@emotion/stylis@^0.8.4": version "0.8.5" resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" @@ -1794,41 +1674,21 @@ resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db" integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw== -"@emotion/unitless@^0.8.1": - version "0.8.1" - resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3" - integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ== - "@emotion/use-insertion-effect-with-fallbacks@^1.0.0": version "1.0.0" resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.0.tgz#ffadaec35dbb7885bd54de3fa267ab2f860294df" integrity sha512-1eEgUGmkaljiBnRMTdksDV1W4kUnmwgp7X9G8B++9GYwl1lUdqSndSriIrTJ0N7LQaoauY9JJ2yhiOYK5+NI4A== -"@emotion/use-insertion-effect-with-fallbacks@^1.0.1": - version "1.0.1" - resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963" - integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw== - "@emotion/utils@^1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561" integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw== -"@emotion/utils@^1.2.1": - version "1.2.1" - resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4" - integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg== - "@emotion/weak-memoize@^0.3.0": version "0.3.0" resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb" integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg== -"@emotion/weak-memoize@^0.3.1": - version "0.3.1" - resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6" - integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww== - "@esbuild/android-arm64@0.17.19": version "0.17.19" resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz#bafb75234a5d3d1b690e7c2956a599345e84a2fd" @@ -21290,11 +21150,6 @@ stylis@4.1.4: resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.4.tgz#9cb60e7153d8ac6d02d773552bf51c7a0344535b" integrity sha512-USf5pszRYwuE6hg9by0OkKChkQYEXfkeTtm0xKw+jqQhwyjCVLdYyMBK7R+n7dhzsblAWJnGxju4vxq5eH20GQ== -stylis@4.2.0: - version "4.2.0" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51" - integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw== - suf-log@^2.5.3: version "2.5.3" resolved "https://registry.yarnpkg.com/suf-log/-/suf-log-2.5.3.tgz#0919a7fceea532a99b578c97814c4e335b2d64d1"