Charles BochetandGitHub
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()`
150 lines
3.8 KiB
JSON
150 lines
3.8 KiB
JSON
{
|
|
"name": "twenty-sdk",
|
|
"version": "0.6.3",
|
|
"main": "dist/index.cjs",
|
|
"module": "dist/index.mjs",
|
|
"types": "dist/sdk/index.d.ts",
|
|
"bin": {
|
|
"twenty": "dist/cli.cjs"
|
|
},
|
|
"files": [
|
|
"dist",
|
|
"generated",
|
|
"README.md",
|
|
"package.json"
|
|
],
|
|
"scripts": {
|
|
"build": "npx rimraf dist && npx vite build"
|
|
},
|
|
"keywords": [
|
|
"twenty",
|
|
"cli",
|
|
"sdk",
|
|
"crm",
|
|
"application",
|
|
"development"
|
|
],
|
|
"exports": {
|
|
".": {
|
|
"types": "./dist/sdk/index.d.ts",
|
|
"import": "./dist/index.mjs",
|
|
"require": "./dist/index.cjs"
|
|
},
|
|
"./ui": {
|
|
"types": "./dist/ui/index.d.ts",
|
|
"import": "./dist/ui/index.mjs",
|
|
"require": "./dist/ui/index.cjs"
|
|
},
|
|
"./cli": {
|
|
"types": "./dist/cli/public-operations/index.d.ts",
|
|
"import": "./dist/operations.mjs",
|
|
"require": "./dist/operations.cjs"
|
|
},
|
|
"./front-component-renderer": {
|
|
"types": "./dist/front-component-renderer/index.d.ts",
|
|
"import": "./dist/front-component-renderer/index.mjs",
|
|
"require": "./dist/front-component-renderer/index.cjs"
|
|
},
|
|
"./generated": {
|
|
"types": "./generated/index.ts",
|
|
"import": "./generated/index.ts",
|
|
"require": "./generated/index.ts"
|
|
},
|
|
"./generated/core": {
|
|
"types": "./generated/core/index.ts",
|
|
"import": "./generated/core/index.ts",
|
|
"require": "./generated/core/index.ts"
|
|
},
|
|
"./generated/metadata": {
|
|
"types": "./generated/metadata/index.ts",
|
|
"import": "./generated/metadata/index.ts",
|
|
"require": "./generated/metadata/index.ts"
|
|
}
|
|
},
|
|
"license": "AGPL-3.0",
|
|
"dependencies": {
|
|
"@chakra-ui/react": "^3.33.0",
|
|
"@emotion/react": "^11.14.0",
|
|
"@genql/cli": "^3.0.3",
|
|
"@genql/runtime": "^2.10.0",
|
|
"@quilted/threads": "^4.0.1",
|
|
"@remote-dom/core": "^1.10.1",
|
|
"@remote-dom/react": "^1.2.2",
|
|
"@sniptt/guards": "^0.2.0",
|
|
"archiver": "^7.0.1",
|
|
"axios": "^1.13.5",
|
|
"chalk": "^5.3.0",
|
|
"chokidar": "^4.0.0",
|
|
"commander": "^12.0.0",
|
|
"dotenv": "^16.4.0",
|
|
"esbuild": "^0.25.0",
|
|
"fast-glob": "^3.3.0",
|
|
"fs-extra": "^11.2.0",
|
|
"graphql": "^16.8.1",
|
|
"graphql-sse": "^2.5.4",
|
|
"ink": "^5.1.1",
|
|
"inquirer": "^10.0.0",
|
|
"jsonc-parser": "^3.2.0",
|
|
"lodash.camelcase": "^4.3.0",
|
|
"lodash.kebabcase": "^4.1.1",
|
|
"preact": "^10.28.3",
|
|
"react": "^18.2.0",
|
|
"react-dom": "^18.2.0",
|
|
"typescript": "^5.9.2",
|
|
"uuid": "^13.0.0",
|
|
"vite": "^7.0.0",
|
|
"vite-tsconfig-paths": "^4.2.1",
|
|
"zod": "^4.1.11"
|
|
},
|
|
"devDependencies": {
|
|
"@emotion/styled": "^11.14.0",
|
|
"@mui/material": "^7.3.8",
|
|
"@prettier/sync": "^0.5.2",
|
|
"@storybook/addon-vitest": "^10.2.13",
|
|
"@storybook/react-vite": "^10.2.13",
|
|
"@types/archiver": "^6.0.0",
|
|
"@types/fs-extra": "^11.0.0",
|
|
"@types/inquirer": "^9.0.0",
|
|
"@types/lodash.camelcase": "^4.3.7",
|
|
"@types/lodash.kebabcase": "^4.1.9",
|
|
"@types/node": "^24.0.0",
|
|
"@types/react": "18.2.66",
|
|
"@types/react-dom": "18.2.22",
|
|
"@vitest/browser-playwright": "^4.0.18",
|
|
"playwright": "^1.56.1",
|
|
"storybook": "^10.2.13",
|
|
"ts-morph": "^25.0.0",
|
|
"tsx": "^4.7.0",
|
|
"twenty-shared": "workspace:*",
|
|
"twenty-ui": "workspace:*",
|
|
"vite-plugin-dts": "^4.5.4",
|
|
"wait-on": "^7.2.0"
|
|
},
|
|
"engines": {
|
|
"node": "^24.5.0",
|
|
"yarn": "^4.0.2"
|
|
},
|
|
"typesVersions": {
|
|
"*": {
|
|
"cli": [
|
|
"dist/cli/public-operations/index.d.ts"
|
|
],
|
|
"ui": [
|
|
"dist/ui/index.d.ts"
|
|
],
|
|
"front-component-renderer": [
|
|
"dist/front-component-renderer/index.d.ts"
|
|
],
|
|
"generated": [
|
|
"generated/index.ts"
|
|
],
|
|
"generated/core": [
|
|
"generated/core/index.ts"
|
|
],
|
|
"generated/metadata": [
|
|
"generated/metadata/index.ts"
|
|
]
|
|
}
|
|
}
|
|
}
|