Charles Bochet
7a2e397ad1
## Summary
Completes the migration of the frontend styling system from **Emotion**
(`@emotion/styled`, `@emotion/react`) to **Linaria** (`@linaria/react`,
`@linaria/core`), a zero-runtime CSS-in-JS library where styles are
extracted at build time.
This is the final step of the migration — all ~494 files across
`twenty-front`, `twenty-ui`, `twenty-website`, and `twenty-sdk` are now
fully converted.
## Changes
### Styling Migration (across ~480 component files)
- Replaced all `@emotion/styled` imports with `@linaria/react`
- Converted runtime theme access patterns (`({ theme }) => theme.x.y`)
to build-time `themeCssVariables` CSS custom properties
- Replaced `useTheme()` hook (from Emotion) with
`useContext(ThemeContext)` where runtime theme values are still needed
(e.g., passing colors to non-CSS props like icon components)
- Removed `@emotion/react` `css` helper usages in favor of Linaria
template literals
### Dependency & Configuration Changes
- **Removed**: `@emotion/react`, `@emotion/styled` from root
`package.json`
- **Added**: `@wyw-in-js/babel-preset`, `next-with-linaria` (for
twenty-website SSR support)
- Updated Nx generator defaults from `@emotion/styled` to
`@linaria/react` in `nx.json`
- Simplified `vite.config.ts` (removed Emotion-specific configuration)
- Updated `twenty-website/next.config.js` to use `next-with-linaria` for
SSR Linaria support
### Storybook & Testing
- Removed `ThemeProvider` from Emotion in Storybook previews
(`twenty-front`, `twenty-sdk`)
- Now relies solely on `ThemeContextProvider` for theme injection
### Documentation
- Removed the temporary `docs/emotion-to-linaria-migration-plan.md`
(migration complete)
- Updated `CLAUDE.md` and `README.md` to reflect Linaria as the styling
stack
- Updated frontend style guide docs across all locales
## How it works
Linaria extracts styles at build time via the `@wyw-in-js/vite` plugin.
All expressions in `styled` template literals must be **statically
evaluable** — no runtime theme objects or closures over component state.
- **Static styles** use `themeCssVariables` which map to CSS custom
properties (`var(--theme-color-x)`)
- **Runtime theme access** (for non-CSS use cases like icon `color`
props) uses `useContext(ThemeContext)` instead of Emotion's `useTheme()`
77 lines
2.3 KiB
TypeScript
77 lines
2.3 KiB
TypeScript
import { styled } from '@linaria/react';
|
|
import { Handle, Position } from '@xyflow/react';
|
|
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
|
|
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
|
|
import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
|
|
import { useContext } from 'react';
|
|
import { useIcons } from 'twenty-ui/display';
|
|
import { ThemeContext } from 'twenty-ui/theme';
|
|
import { themeCssVariables } from 'twenty-ui/theme-constants';
|
|
import { RelationType } from '~/generated-metadata/graphql';
|
|
|
|
type ObjectFieldRowProps = {
|
|
field: FieldMetadataItem;
|
|
};
|
|
|
|
const StyledRow = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
gap: ${themeCssVariables.spacing[2]};
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 0 ${themeCssVariables.spacing[2]};
|
|
`;
|
|
|
|
const StyledFieldName = styled.div`
|
|
color: ${themeCssVariables.font.color.primary};
|
|
`;
|
|
|
|
export const ObjectFieldRow = ({ field }: ObjectFieldRowProps) => {
|
|
const objectMetadataItems = useAtomStateValue(objectMetadataItemsState);
|
|
const { getIcon } = useIcons();
|
|
const { theme } = useContext(ThemeContext);
|
|
|
|
const relatedObjectId = field.relation?.targetObjectMetadata.id;
|
|
|
|
const relatedObject = objectMetadataItems.find(
|
|
(x) => x.id === relatedObjectId,
|
|
);
|
|
|
|
const Icon = getIcon(relatedObject?.icon);
|
|
|
|
return (
|
|
<StyledRow>
|
|
{Icon && <Icon size={theme.icon.size.md} />}
|
|
<StyledFieldName>{relatedObject?.labelPlural ?? ''}</StyledFieldName>
|
|
<Handle
|
|
type={
|
|
field.relation?.type === RelationType.ONE_TO_MANY
|
|
? 'source'
|
|
: 'target'
|
|
}
|
|
position={Position.Right}
|
|
id={`${field.id}-right`}
|
|
className={
|
|
field.relation?.type === RelationType.ONE_TO_MANY
|
|
? 'right-handle source-handle'
|
|
: 'right-handle target-handle'
|
|
}
|
|
/>
|
|
<Handle
|
|
type={
|
|
field.relation?.type === RelationType.ONE_TO_MANY
|
|
? 'source'
|
|
: 'target'
|
|
}
|
|
position={Position.Left}
|
|
id={`${field.id}-left`}
|
|
className={
|
|
field.relation?.type === RelationType.ONE_TO_MANY
|
|
? 'left-handle source-handle'
|
|
: 'left-handle target-handle'
|
|
}
|
|
/>
|
|
</StyledRow>
|
|
);
|
|
};
|