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/views/components/SortOrFilterChip.tsx
+27 -25
View File
@@ -1,36 +1,38 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useContext } from 'react';
import { type IconComponent, IconX } from 'twenty-ui/display';
import { ThemeContext } from 'twenty-ui/theme';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledChip = styled.div<{ variant: SortOrFilterChipVariant }>`
align-items: center;
background-color: ${({ theme, variant }) => {
background-color: ${({ variant }) => {
switch (variant) {
case 'danger':
return theme.background.danger;
return themeCssVariables.background.danger;
case 'default':
default:
return theme.accent.quaternary;
return themeCssVariables.accent.quaternary;
}
}};
border: 1px solid
${({ theme, variant }) => {
${({ variant }) => {
switch (variant) {
case 'danger':
return theme.border.color.danger;
return themeCssVariables.border.color.danger;
case 'default':
default:
return theme.accent.tertiary;
return themeCssVariables.accent.tertiary;
}
}};
border-radius: 4px;
color: ${({ theme, variant }) => {
color: ${({ variant }) => {
switch (variant) {
case 'danger':
return theme.color.red;
return themeCssVariables.color.red;
case 'default':
default:
return theme.color.blue;
return themeCssVariables.color.blue;
}
}};
height: 24px;
@@ -39,11 +41,11 @@ const StyledChip = styled.div<{ variant: SortOrFilterChipVariant }>`
display: flex;
flex-direction: row;
flex-shrink: 0;
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
padding: ${({ theme }) => theme.spacing(0.5)};
padding-left: ${({ theme }) => theme.spacing(1)};
column-gap: ${({ theme }) => theme.spacing(1)};
font-size: ${themeCssVariables.font.size.sm};
font-weight: ${themeCssVariables.font.weight.medium};
padding: ${themeCssVariables.spacing[0.5]};
padding-left: ${themeCssVariables.spacing[1]};
column-gap: ${themeCssVariables.spacing[1]};
user-select: none;
white-space: nowrap;
`;
@@ -61,7 +63,7 @@ const StyledDelete = styled.button<{ variant: SortOrFilterChipVariant }>`
justify-content: center;
align-items: center;
cursor: pointer;
font-size: ${({ theme }) => theme.font.size.sm};
font-size: ${themeCssVariables.font.size.sm};
user-select: none;
padding: 0;
margin: 0;
@@ -70,29 +72,29 @@ const StyledDelete = styled.button<{ variant: SortOrFilterChipVariant }>`
color: inherit;
&:hover {
background-color: ${({ theme, variant }) => {
background-color: ${({ variant }) => {
switch (variant) {
case 'danger':
return theme.color.red5;
return themeCssVariables.color.red5;
case 'default':
default:
return theme.accent.secondary;
return themeCssVariables.accent.secondary;
}
}};
border-radius: ${({ theme }) => theme.border.radius.sm};
border-radius: ${themeCssVariables.border.radius.sm};
}
`;
const StyledLabelKey = styled.div`
font-weight: ${({ theme }) => theme.font.weight.medium};
font-weight: ${themeCssVariables.font.weight.medium};
`;
const StyledFilterValue = styled.span`
font-weight: ${({ theme }) => theme.font.weight.regular};
font-weight: ${themeCssVariables.font.weight.regular};
`;
const StyledSortValue = styled.span`
font-weight: ${({ theme }) => theme.font.weight.medium};
font-weight: ${themeCssVariables.font.weight.medium};
`;
const StyledKeyLabelContainer = styled.div`
@@ -124,7 +126,7 @@ export const SortOrFilterChip = ({
onClick,
type,
}: SortOrFilterChipProps) => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
const handleDeleteClick = (e: React.MouseEvent) => {
e.stopPropagation();
packages/twenty-front/src/modules/views/components/UpdateViewButtonGroup.tsx
+4 -3
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { contextStoreCurrentViewIdComponentState } from '@/context-store/states/contextStoreCurrentViewIdComponentState';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
@@ -26,11 +26,12 @@ import { t } from '@lingui/core/macro';
import { IconChevronDown, IconPlus } from 'twenty-ui/display';
import { Button, ButtonGroup, IconButton } from 'twenty-ui/input';
import { MenuItem } from 'twenty-ui/navigation';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
border-radius: ${({ theme }) => theme.border.radius.md};
border-radius: ${themeCssVariables.border.radius.md};
display: inline-flex;
margin-right: ${({ theme }) => theme.spacing(2)};
margin-right: ${themeCssVariables.spacing[2]};
position: relative;
`;
packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
+13 -14
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { type ReactNode, useMemo } from 'react';
import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObjectNameSingularFromPlural';
@@ -36,6 +36,7 @@ import { t } from '@lingui/core/macro';
import { isNonEmptyArray, isNonEmptyString } from '@sniptt/guards';
import { isDefined } from 'twenty-shared/utils';
import { LightButton } from 'twenty-ui/input';
import { themeCssVariables } from 'twenty-ui/theme-constants';
export type ViewBarDetailsProps = {
hasFilterButton?: boolean;
@@ -46,15 +47,13 @@ export type ViewBarDetailsProps = {
const StyledBar = styled.div`
align-items: center;
align-items: center;
border-top: 1px solid ${({ theme }) => theme.border.color.light};
border-top: 1px solid ${({ theme }) => theme.border.color.light};
border-top: 1px solid ${themeCssVariables.border.color.light};
display: flex;
flex-direction: row;
justify-content: space-between;
min-height: 32px;
padding-top: ${({ theme }) => theme.spacing(1)};
padding-bottom: ${({ theme }) => theme.spacing(1)};
padding-top: ${themeCssVariables.spacing[1]};
padding-bottom: ${themeCssVariables.spacing[1]};
z-index: 4;
`;
@@ -62,20 +61,20 @@ const StyledChipContainer = styled.div`
align-items: center;
display: flex;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[2]};
z-index: 1;
`;
const StyledActionButtonContainer = styled.div`
display: flex;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(2)};
gap: ${themeCssVariables.spacing[2]};
`;
const StyledFilterContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
gap: ${themeCssVariables.spacing[1]};
overflow-x: hidden;
`;
@@ -84,15 +83,15 @@ const StyledSeparatorContainer = styled.div`
align-items: flex-start;
align-self: stretch;
display: flex;
padding-bottom: ${({ theme }) => theme.spacing(2)};
padding-left: ${({ theme }) => theme.spacing(1)};
padding-right: ${({ theme }) => theme.spacing(1)};
padding-top: ${({ theme }) => theme.spacing(2)};
padding-bottom: ${themeCssVariables.spacing[2]};
padding-left: ${themeCssVariables.spacing[1]};
padding-right: ${themeCssVariables.spacing[1]};
padding-top: ${themeCssVariables.spacing[2]};
`;
const StyledSeparator = styled.div`
align-self: stretch;
background: ${({ theme }) => theme.background.quaternary};
background: ${themeCssVariables.background.quaternary};
width: 1px;
`;
packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAdvancedFilterButton.tsx
+4 -3
View File
@@ -16,18 +16,19 @@ import { useOpenDropdown } from '@/ui/layout/dropdown/hooks/useOpenDropdown';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds';
import { useGetCurrentViewOnly } from '@/views/hooks/useGetCurrentViewOnly';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { RecordFilterGroupLogicalOperator } from 'twenty-shared/types';
import { isDefined } from 'twenty-shared/utils';
import { Pill } from 'twenty-ui/components';
import { IconFilter } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { v4 } from 'uuid';
const StyledPill = styled(Pill)`
background: ${({ theme }) => theme.color.blue3};
color: ${({ theme }) => theme.color.blue};
background: ${themeCssVariables.color.blue3};
color: ${themeCssVariables.color.blue};
`;
export const ViewBarFilterDropdownAdvancedFilterButton = () => {
packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownAnyFieldSearchButtonMenuItem.tsx
+4 -3
View File
@@ -2,18 +2,19 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
import { isSelectedItemIdComponentFamilyState } from '@/ui/layout/selectable-list/states/isSelectedItemIdComponentFamilyState';
import { useAtomComponentFamilyStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentFamilyStateValue';
import { useAtomComponentStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomComponentStateValue';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { IconSearch } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { VIEW_BAR_FILTER_BOTTOM_MENU_ITEM_IDS } from '@/views/constants/ViewBarFilterBottomMenuItemIds';
import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
const StyledSearchText = styled.span`
color: ${({ theme }) => theme.font.color.light};
margin-left: ${({ theme }) => theme.spacing(1)};
color: ${themeCssVariables.font.color.light};
margin-left: ${themeCssVariables.spacing[1]};
`;
type ViewBarFilterDropdownAnyFieldSearchButtonMenuItemProps = {
packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownBottomMenu.tsx
+3 -2
View File
@@ -1,13 +1,14 @@
import { ViewBarFilterDropdownAdvancedFilterButton } from '@/views/components/ViewBarFilterDropdownAdvancedFilterButton';
import { ViewBarFilterDropdownAnyFieldSearchButton } from '@/views/components/ViewBarFilterDropdownAnyFieldSearchButton';
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: ${({ theme }) => theme.spacing(1)};
padding: ${themeCssVariables.spacing[1]};
`;
export const ViewBarFilterDropdownBottomMenu = () => {
packages/twenty-front/src/modules/views/components/ViewBarFilterDropdownFieldSelectMenu.tsx
+9 -8
View File
@@ -1,4 +1,4 @@
import styled from '@emotion/styled';
import { styled } from '@linaria/react';
import React from 'react';
import { objectFilterDropdownSearchInputComponentState } from '@/object-record/object-filter-dropdown/states/objectFilterDropdownSearchInputComponentState';
@@ -24,22 +24,23 @@ import { VIEW_BAR_FILTER_BOTTOM_MENU_ITEM_IDS } from '@/views/constants/ViewBarF
import { ViewBarFilterDropdownIds } from '@/views/constants/ViewBarFilterDropdownIds';
import { useLingui } from '@lingui/react/macro';
import { IconX } from 'twenty-ui/display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
export const StyledInput = styled.input`
background: transparent;
border: none;
border-top: none;
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-bottom: 1px solid ${themeCssVariables.border.color.light};
border-radius: 0;
border-top-left-radius: ${({ theme }) => theme.border.radius.md};
border-top-right-radius: ${({ theme }) => theme.border.radius.md};
color: ${({ theme }) => theme.font.color.primary};
border-top-left-radius: ${themeCssVariables.border.radius.md};
border-top-right-radius: ${themeCssVariables.border.radius.md};
color: ${themeCssVariables.font.color.primary};
margin: 0;
outline: none;
padding: ${({ theme }) => theme.spacing(2)};
padding: ${themeCssVariables.spacing[2]};
min-height: 19px;
font-family: inherit;
font-size: ${({ theme }) => theme.font.size.sm};
font-size: ${themeCssVariables.font.size.sm};
font-weight: inherit;
max-width: 100%;
@@ -47,7 +48,7 @@ export const StyledInput = styled.input`
text-decoration: none;
&::placeholder {
color: ${({ theme }) => theme.font.color.light};
color: ${themeCssVariables.font.color.light};
}
`;
packages/twenty-front/src/modules/views/components/ViewBarSkeletonLoader.tsx
+3 -2
View File
@@ -1,9 +1,10 @@
import { SKELETON_LOADER_HEIGHT_SIZES } from '@/activities/components/SkeletonLoader';
import { useTheme } from '@emotion/react';
import { useContext } from 'react';
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
import { ThemeContext } from 'twenty-ui/theme';
export const ViewBarSkeletonLoader = () => {
const theme = useTheme();
const { theme } = useContext(ThemeContext);
return (
<SkeletonTheme
baseColor={theme.background.tertiary}