houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(twenty-front): migrate small modules from Emotion to Linaria (PR 1/10) (#18314)

Browse Source 
## Emotion → Linaria migration — PR 1 of 10

First batch of the `twenty-front` migration from Emotion (runtime
CSS-in-JS) to Linaria (zero-runtime, build-time extraction via
wyw-in-js). Covers **100 files** across 10 small standalone modules —
chosen as the lowest-risk starting point.

### Modules migrated

spreadsheet-import (28) · navigation-menu-item (17) · views (14) ·
billing (10) · blocknote-editor (7) · advanced-text-editor (7) ·
favorites (7) · navigation (4) · information-banner (3) ·
sign-in-background-mock (3)

### Migration pattern

Every file follows the same mechanical transformation:

| Emotion | Linaria |
|---|---|
| `import styled from '@emotion/styled'` | `import { styled } from
'@linaria/react'` |
| `${({ theme }) => theme.font.color.primary}` |
`${themeCssVariables.font.color.primary}` |
| `${({ theme }) => theme.spacing(4)}` |
`${themeCssVariables.spacing[4]}` |
| `const theme = useTheme()` | `const { theme } =
useContext(ThemeContext)` |
| `import { type Theme } from '@emotion/react'` | `import { type
ThemeType } from 'twenty-ui/theme'` |

`themeCssVariables` is a build-time object where every leaf is a
`var(--t-xxx)` CSS custom property reference, evaluated statically by
wyw-in-js. Runtime theme access (icon sizes, colors passed as props)
uses `useContext(ThemeContext)`.

### Gotchas encountered & fixed

- **Interpolation return types** — wyw-in-js requires `string | number`,
never `false`/`undefined`. Replaced `condition && 'css'` with `condition
? 'css' : ''`.
- **`css` tag inside `styled` templates** — Linaria `css` returns a
class name, not CSS text. Replaced with plain template strings.
- **`styled(Component)` needs `className`** — added `className` prop to
`NavigationDrawerSection`, `DropdownMenuItemsContainer`, and `Heading`.
- **`shouldForwardProp` not supported** — Linaria filters invalid DOM
props automatically for HTML elements. For custom components, used
wrapper divs where needed.
- **`FormFieldPlaceholderStyles`** — converted from Emotion `css`
function to a static string using `themeCssVariables`.
This commit is contained in:
Charles Bochet
2026-03-02 16:33:40 +01:00
committed by GitHub
parent 9c4b0f526c
commit c4140f85df
211 changed files with 4754 additions and 1114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerAIChatContent.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { NavigationDrawerAIChatThreadsList } from '@/ai/components/NavigationDrawerAIChatThreadsList';
packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerNavigationContent.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useFavoritesByFolder } from '@/favorites/hooks/useFavoritesByFolder';
import { NavigationMenuItemFolderContentDispatcherEffect } from '@/navigation-menu-item/components/NavigationMenuItemFolderContentDispatcher';
packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerScrollableItems.tsx
+3 -2
View File
@@ -1,9 +1,10 @@
import { NavigationDrawerOpenedSection } from '@/object-metadata/components/NavigationDrawerOpenedSection';
import { RemoteNavigationDrawerSection } from '@/object-metadata/components/RemoteNavigationDrawerSection';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { lazy, Suspense } from 'react';
import { NavigationDrawerOtherSection } from '@/navigation/components/NavigationDrawerOtherSection';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const CurrentWorkspaceMemberNavigationMenuItemFoldersDispatcher = lazy(() =>
import(
@@ -24,7 +25,7 @@ const WorkspaceNavigationMenuItemsDispatcher = lazy(() =>
const StyledScrollableItemsContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(3)};
gap: ${themeCssVariables.spacing[3]};
`;
export const MainNavigationDrawerScrollableItems = () => {
packages/twenty-front/src/modules/navigation/components/MainNavigationDrawerTabsRow.tsx
+44 -40
View File
@@ -1,11 +1,13 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { t } from '@lingui/core/macro';
import { useContext } from 'react';
import {
IconComment,
IconHome,
IconMessageCirclePlus,
} from 'twenty-ui/display';
import { ThemeContext } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { useIsMobile } from 'twenty-ui/utilities';
import { useCreateNewAIChatThread } from '@/ai/hooks/useCreateNewAIChatThread';
@@ -27,31 +29,33 @@ const StyledRow = styled.div<{ isExpanded: boolean }>`
display: flex;
justify-content: ${({ isExpanded }) =>
isExpanded ? 'space-between' : 'center'};
gap: ${({ theme, isExpanded }) => (isExpanded ? theme.spacing(2) : 0)};
gap: ${({ isExpanded }) => (isExpanded ? themeCssVariables.spacing[2] : 0)};
width: 100%;
transition: gap ${({ theme }) => theme.animation.duration.normal}s ease;
transition: gap calc(${themeCssVariables.animation.duration.normal} * 1s) ease;
`;
const StyledTabsPill = styled.div`
align-items: center;
border: 1px solid ${({ theme }) => theme.border.color.medium};
background: ${({ theme }) => theme.background.secondary};
border-radius: ${({ theme }) => theme.border.radius.pill};
border: 1px solid ${themeCssVariables.border.color.medium};
background: ${themeCssVariables.background.secondary};
border-radius: ${themeCssVariables.border.radius.pill};
padding: 3px;
height: ${({ theme }) => theme.spacing(7)};
height: ${themeCssVariables.spacing[7]};
display: flex;
width: ${({ theme }) => theme.spacing(18)};
gap: ${({ theme }) => theme.spacing(0.5)};
width: ${themeCssVariables.spacing[18]};
gap: ${themeCssVariables.spacing[0.5]};
box-sizing: border-box;
`;
const StyledTabWrapper = styled.div<{ isActive: boolean }>`
border-radius: ${({ theme }) => theme.border.radius.pill};
border-radius: ${themeCssVariables.border.radius.pill};
align-items: center;
background: ${({ theme, isActive }) =>
isActive ? theme.background.transparent.light : 'transparent'};
color: ${({ theme, isActive }) =>
isActive ? theme.font.color.primary : theme.font.color.tertiary};
background: ${({ isActive }) =>
isActive ? themeCssVariables.background.transparent.light : 'transparent'};
color: ${({ isActive }) =>
isActive
? themeCssVariables.font.color.primary
: themeCssVariables.font.color.tertiary};
cursor: pointer;
display: flex;
justify-content: center;
@@ -59,10 +63,10 @@ const StyledTabWrapper = styled.div<{ isActive: boolean }>`
flex: 1;
&:hover {
background: ${({ theme, isActive }) =>
background: ${({ isActive }) =>
isActive
? theme.background.transparent.light
: theme.background.transparent.lighter};
? themeCssVariables.background.transparent.light
: themeCssVariables.background.transparent.lighter};
}
`;
@@ -70,27 +74,27 @@ const StyledTabIcon = styled.div`
align-items: center;
display: flex;
justify-content: center;
height: ${({ theme }) => theme.spacing(5)};
width: ${({ theme }) => theme.spacing(5)};
height: ${themeCssVariables.spacing[5]};
width: ${themeCssVariables.spacing[5]};
`;
const StyledNewChatButtonWrapper = styled.div<{ isExpanded: boolean }>`
align-items: center;
border: 1px solid ${({ theme }) => theme.border.color.medium};
background: ${({ theme }) => theme.background.secondary};
border-radius: ${({ theme }) => theme.border.radius.pill};
border: 1px solid ${themeCssVariables.border.color.medium};
background: ${themeCssVariables.background.secondary};
border-radius: ${themeCssVariables.border.radius.pill};
box-sizing: border-box;
display: flex;
height: ${({ theme, isExpanded }) =>
isExpanded ? theme.spacing(7) : theme.spacing(6)};
height: ${({ isExpanded }) =>
isExpanded ? themeCssVariables.spacing[7] : themeCssVariables.spacing[6]};
justify-content: center;
padding: ${({ theme, isExpanded }) =>
isExpanded ? '3px' : theme.spacing(0.5)};
width: ${({ theme, isExpanded }) =>
isExpanded ? theme.spacing(25.75) : theme.spacing(6)};
padding: ${({ isExpanded }) =>
isExpanded ? '3px' : themeCssVariables.spacing[0.5]};
width: ${({ isExpanded }) =>
isExpanded ? '103px' : themeCssVariables.spacing[6]};
transition:
height ${({ theme }) => theme.animation.duration.normal}s ease,
padding ${({ theme }) => theme.animation.duration.normal}s ease;
height calc(${themeCssVariables.animation.duration.normal} * 1s) ease,
padding calc(${themeCssVariables.animation.duration.normal} * 1s) ease;
`;
const StyledNewChatButton = styled.div`
@@ -98,25 +102,25 @@ const StyledNewChatButton = styled.div`
justify-content: center;
display: flex;
cursor: pointer;
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
gap: ${({ theme }) => theme.spacing(1)};
font-size: ${themeCssVariables.font.size.sm};
font-weight: ${themeCssVariables.font.weight.medium};
gap: ${themeCssVariables.spacing[1]};
height: 100%;
width: 100%;
border-radius: inherit;
color: ${({ theme }) => theme.font.color.secondary};
color: ${themeCssVariables.font.color.secondary};
transition:
background ${({ theme }) => theme.animation.duration.fast}s ease,
color ${({ theme }) => theme.animation.duration.fast}s ease;
background calc(${themeCssVariables.animation.duration.fast} * 1s) ease,
color calc(${themeCssVariables.animation.duration.fast} * 1s) ease;
&:hover {
background: ${({ theme }) => theme.background.transparent.light};
color: ${({ theme }) => theme.font.color.primary};
background: ${themeCssVariables.background.transparent.light};
color: ${themeCssVariables.font.color.primary};
}
`;
export const MainNavigationDrawerTabsRow = () => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const isMobile = useIsMobile();
const isNavigationDrawerExpanded = useAtomStateValue(
isNavigationDrawerExpandedState,