Charles BochetandGitHub
c4140f85df
## 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`.
113 lines
2.7 KiB
TypeScript
113 lines
2.7 KiB
TypeScript
import { ImageBubbleMenu } from '@/advanced-text-editor/components/ImageBubbleMenu';
|
|
import { LinkBubbleMenu } from '@/advanced-text-editor/components/LinkBubbleMenu';
|
|
import { TextBubbleMenu } from '@/advanced-text-editor/components/TextBubbleMenu';
|
|
import { FORM_FIELD_PLACEHOLDER_STYLES } from '@/object-record/record-field/ui/form-types/constants/FormFieldPlaceholderStyles';
|
|
import { styled } from '@linaria/react';
|
|
import { EditorContent, type Editor } from '@tiptap/react';
|
|
import { themeCssVariables } from 'twenty-ui/theme-constants';
|
|
|
|
const StyledEditorContainer = styled.div<{
|
|
readonly?: boolean;
|
|
minHeight: number;
|
|
maxWidth: number;
|
|
}>`
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
|
|
.editor-content {
|
|
flex-grow: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: ${({ minHeight }) => minHeight}px;
|
|
}
|
|
|
|
.tiptap {
|
|
padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
color: ${({ readonly }) =>
|
|
readonly
|
|
? themeCssVariables.font.color.light
|
|
: themeCssVariables.font.color.primary};
|
|
font-family: ${themeCssVariables.font.family};
|
|
font-size: ${themeCssVariables.font.size.sm};
|
|
font-weight: ${themeCssVariables.font.weight.regular};
|
|
border: none !important;
|
|
|
|
p.is-editor-empty:first-of-type::before {
|
|
${FORM_FIELD_PLACEHOLDER_STYLES}
|
|
content: attr(data-placeholder);
|
|
float: left;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
p {
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
.variable-tag {
|
|
background-color: ${themeCssVariables.color.blue3};
|
|
border-radius: ${themeCssVariables.border.radius.sm};
|
|
color: ${themeCssVariables.color.blue};
|
|
padding: ${themeCssVariables.spacing[1]};
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.3em;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: ${themeCssVariables.spacing[2]};
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
|
|
.ProseMirror-focused {
|
|
outline: none;
|
|
}
|
|
|
|
.ProseMirror-hideselection * {
|
|
caret-color: transparent;
|
|
}
|
|
`;
|
|
|
|
type AdvancedTextEditorProps = {
|
|
readonly: boolean | undefined;
|
|
editor: Editor;
|
|
minHeight: number;
|
|
maxWidth: number;
|
|
};
|
|
|
|
export const AdvancedTextEditor = ({
|
|
readonly,
|
|
editor,
|
|
minHeight,
|
|
maxWidth,
|
|
}: AdvancedTextEditorProps) => {
|
|
return (
|
|
<StyledEditorContainer
|
|
readonly={readonly}
|
|
minHeight={minHeight}
|
|
maxWidth={maxWidth}
|
|
>
|
|
<EditorContent className="editor-content" editor={editor} />
|
|
<ImageBubbleMenu editor={editor} />
|
|
<TextBubbleMenu editor={editor} />
|
|
<LinkBubbleMenu editor={editor} />
|
|
</StyledEditorContainer>
|
|
);
|
|
};
|