ECHOES-1026 Remove usage of emotions "css" function inside component rendering and the "styled" function

src/common/components/Toast.tsx

@@ -257,24 +257,22 @@ function ToastPrefix({ variety }: Pick<ToastProps, 'variety'>) {
 ToastPrefix.displayName = 'ToastPrefix';
 
 export function ToastGlobalStyles() {
-  return (
-    <Global
-      styles={css`
-        [data-sonner-toaster] {
-          z-index: 0;
-        }
-
-        [data-sonner-toast] {
-          border-radius: ${cssVar('border-radius-400')};
-
-          &:focus-visible {
-            outline: ${cssVar('color-focus-default')} solid ${cssVar('focus-border-width-default')};
-            outline-offset: ${cssVar('focus-border-offset-default')};
-            box-shadow: none;
-          }
-        }
-      `}
-    />
-  );
+  return <Global styles={toastGlobalStyles} />;
 }
 ToastGlobalStyles.displayName = 'ToastGlobalStyles';
+
+const toastGlobalStyles = css`
+  [data-sonner-toaster] {
+    z-index: 0;
+  }
+
+  [data-sonner-toast] {
+    border-radius: ${cssVar('border-radius-400')};
+
+    &:focus-visible {
+      outline: ${cssVar('color-focus-default')} solid ${cssVar('focus-border-width-default')};
+      outline-offset: ${cssVar('focus-border-offset-default')};
+      box-shadow: none;
+    }
+  }
+`;

src/components/links/LinkBaseStyled.tsx

@@ -18,27 +18,26 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { LinkBase } from './LinkBase';
 import { LinkHighlight } from './LinkTypes';
 
 import { cssVar } from '~utils/design-tokens';
 
 const LinkBaseStyledHighlight = {
-  [LinkHighlight.Accent]: css`
+  [LinkHighlight.Accent]: `
     --color: ${cssVar('color-text-accent')};
     --hover: ${cssVar('color-text-link-hover')};
   `,
-  [LinkHighlight.Default]: css`
+  [LinkHighlight.Default]: `
     --color: ${cssVar('color-text-default')};
     --hover: ${cssVar('color-text-link-hover')};
   `,
-  [LinkHighlight.Subtle]: css`
+  [LinkHighlight.Subtle]: `
     --color: ${cssVar('color-text-subtle')};
     --hover: ${cssVar('color-text-link-hover')};
   `,
-  [LinkHighlight.CurrentColor]: css`
+  [LinkHighlight.CurrentColor]: `
     --color: 'currentColor';
     --hover: ${cssVar('color-text-link-hover')};
   `,

src/components/links/LinkStandalone.tsx

@@ -18,13 +18,13 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
-import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { forwardRef } from 'react';
 import { LinkBaseStyled } from './LinkBaseStyled';
 import { LinkStandaloneProps } from './LinkTypes';
 
 import { cssVar } from '~utils/design-tokens';
+import { IconCustomWrapper, IconMaterialWrapper } from '../icons/IconWrapper';
 
 const LinkStandaloneBase = forwardRef<HTMLAnchorElement, LinkStandaloneProps>((props, ref) => {
   const { children, iconLeft, isDiscreet, ...linkProps } = props;
@@ -41,11 +41,7 @@ const LinkStandaloneBase = forwardRef<HTMLAnchorElement, LinkStandaloneProps>((p
 LinkStandaloneBase.displayName = 'LinkStandaloneBase';
 
 export const LinkStandalone = styled(LinkStandaloneBase)`
-  ${({ isDiscreet }) =>
-    isDiscreet &&
-    css`
-      font-weight: ${cssVar('font-weight-regular')};
-    `}
+  ${({ isDiscreet }) => isDiscreet && `font-weight: ${cssVar('font-weight-regular')};`}
 
   text-decoration-line: ${cssVar('text-decoration-none')};
 
@@ -62,9 +58,11 @@ export const LinkStandalone = styled(LinkStandaloneBase)`
 
   ${({ iconLeft }) =>
     iconLeft &&
-    css`
+    `
       & > svg,
-      & > img {
+      & > img,
+      & > ${IconMaterialWrapper},
+      & > ${IconCustomWrapper} {
         margin-right: ${cssVar('dimension-space-50')};
       }
     `};

src/components/select/SelectCommons.tsx

@@ -385,71 +385,69 @@ export const SelectStyled = styled(MantineSelect)`
  * Instead, these styles are added as Global emotion styles in the EchoesProvider.
  */
 export function SelectGlobalStyles() {
-  return (
-    <Global
-      styles={css`
-        // Dropdown element - wrapper around the select items
-        .echoes-select-dropdown,
-        .echoes-select-dropdown-auto-width {
-          position: absolute;
+  return <Global styles={selectGlobalStyles} />;
+}
 
-          overflow: hidden;
+const selectGlobalStyles = css`
+  // Dropdown element - wrapper around the select items
+  .echoes-select-dropdown,
+  .echoes-select-dropdown-auto-width {
+    position: absolute;
 
-          background-color: ${cssVar('color-surface-default')};
-          border: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
-          border-radius: ${cssVar('border-radius-400')};
+    overflow: hidden;
 
-          box-shadow: ${cssVar('box-shadow-medium')};
+    background-color: ${cssVar('color-surface-default')};
+    border: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
+    border-radius: ${cssVar('border-radius-400')};
 
-          & .echoes-select-options-wrapper {
-            max-height: 250px;
-            overflow-y: auto;
+    box-shadow: ${cssVar('box-shadow-medium')};
 
-            padding: ${cssVar('dimension-space-100')} ${cssVar('dimension-space-0')};
-          }
-        }
+    & .echoes-select-options-wrapper {
+      max-height: 250px;
+      overflow-y: auto;
 
-        .echoes-select-dropdown-auto-width {
-          width: auto !important; // We need to override the element width set by Mantine
-        }
+      padding: ${cssVar('dimension-space-100')} ${cssVar('dimension-space-0')};
+    }
+  }
 
-        // Inside the dropdown - Group wrapper, contains a group label and all the items of a group
-        .echoes-select-group {
-          display: flex;
-          flex-direction: column;
-          padding: ${cssVar('dimension-space-0')};
-        }
+  .echoes-select-dropdown-auto-width {
+    width: auto !important; // We need to override the element width set by Mantine
+  }
+
+  // Inside the dropdown - Group wrapper, contains a group label and all the items of a group
+  .echoes-select-group {
+    display: flex;
+    flex-direction: column;
+    padding: ${cssVar('dimension-space-0')};
+  }
 
-        // Inside the dropdown - Group header label
-        .echoes-select-group-label {
-          padding: ${cssVar('dimension-space-50')} ${cssVar('dimension-space-200')}
-            ${cssVar('dimension-space-100')};
+  // Inside the dropdown - Group header label
+  .echoes-select-group-label {
+    padding: ${`${cssVar('dimension-space-50')} ${cssVar('dimension-space-200')}
+      ${cssVar('dimension-space-100')}`};
 
-          font: ${cssVar('typography-text-small-semi-bold')};
-          color: ${cssVar('color-text-default')};
-        }
+    font: ${cssVar('typography-text-small-semi-bold')};
+    color: ${cssVar('color-text-default')};
+  }
 
-        // Inside the dropdown - Adds a divider between two groups
-        .echoes-select-group + .echoes-select-group::before {
-          content: '';
+  // Inside the dropdown - Adds a divider between two groups
+  .echoes-select-group + .echoes-select-group::before {
+    content: '';
 
-          flex: 1;
-          padding: ${cssVar('dimension-space-25')} ${cssVar('dimension-space-0')};
+    flex: 1;
+    padding: ${cssVar('dimension-space-25')} ${cssVar('dimension-space-0')};
 
-          border-top: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
-        }
+    border-top: ${cssVar('border-width-default')} solid ${cssVar('color-border-weak')};
+  }
 
-        .echoes-select-empty {
-          font: ${cssVar('typography-text-small-medium')};
-          color: ${cssVar('color-text-subtle')};
-          text-align: center;
+  .echoes-select-empty {
+    font: ${cssVar('typography-text-small-medium')};
+    color: ${cssVar('color-text-subtle')};
+    text-align: center;
 
-          padding: ${cssVar('dimension-space-50')} ${cssVar('dimension-space-0')};
-        }
-      `}
-    />
-  );
-}
+    padding: ${cssVar('dimension-space-50')} ${cssVar('dimension-space-0')};
+  }
+`;
 
 interface SelectRightSectionProps extends Pick<SelectBaseProps, 'isLoading'> {
   hasValue: boolean;

src/components/typography/TypographyGlobalStyles.tsx

@@ -23,23 +23,21 @@ import { css, Global } from '@emotion/react';
 import { cssVar } from '~utils/design-tokens';
 
 export function TypographyGlobalStyles() {
-  return (
-    <Global
-      styles={css`
-        body {
-          font: ${cssVar('typography-text-default-regular')};
-          color: ${cssVar('color-text-default')};
-        }
-
-        pre,
-        code,
-        kbd,
-        samp,
-        tt {
-          font: ${cssVar('typography-code-default')};
-        }
-      `}
-    />
-  );
+  return <Global styles={typographyGlobalStyles} />;
 }
 TypographyGlobalStyles.displayName = 'TypographyGlobalStyles';
+
+const typographyGlobalStyles = css`
+  body {
+    font: ${cssVar('typography-text-default-regular')};
+    color: ${cssVar('color-text-default')};
+  }
+
+  pre,
+  code,
+  kbd,
+  samp,
+  tt {
+    font: ${cssVar('typography-code-default')};
+  }
+`;

stories/link/LinkStandalone-stories.tsx

@@ -80,11 +80,7 @@ export const LinkStandaloneWithIcon: Story = {
     ...defaultArgs,
     children: 'Standalone Link With Icon',
     highlight: LinkHighlight.Default,
-    iconLeft: (
-      <span style={{ marginRight: '8px' }}>
-        <IconLink />
-      </span>
-    ),
+    iconLeft: <IconLink />,
   },
 };