mirror of
https://github.com/twentyhq/twenty
synced 2026-04-21 13:37:22 +00:00
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()`
311 lines
8.4 KiB
JSON
311 lines
8.4 KiB
JSON
{
|
|
"workspaceLayout": {
|
|
"appsDir": "packages",
|
|
"libsDir": "packages"
|
|
},
|
|
"namedInputs": {
|
|
"default": ["{projectRoot}/**/*"],
|
|
"excludeStories": [
|
|
"default",
|
|
"!{projectRoot}/.storybook/*",
|
|
"!{projectRoot}/**/tsconfig.storybook.json",
|
|
"!{projectRoot}/**/*.stories.(ts|tsx)",
|
|
"!{projectRoot}/**/__stories__/*"
|
|
],
|
|
"excludeTests": [
|
|
"default",
|
|
"!{projectRoot}/**/jest.config.(js|ts)",
|
|
"!{projectRoot}/**/tsconfig.spec.json",
|
|
"!{projectRoot}/**/*.test.(ts|tsx)",
|
|
"!{projectRoot}/**/*.spec.(ts|tsx)",
|
|
"!{projectRoot}/**/*.integration-spec.ts",
|
|
"!{projectRoot}/**/__tests__/*"
|
|
],
|
|
"production": [
|
|
"default",
|
|
"excludeStories",
|
|
"excludeTests",
|
|
"!{projectRoot}/**/__mocks__/*",
|
|
"!{projectRoot}/**/testing/*"
|
|
]
|
|
},
|
|
"targetDefaults": {
|
|
"build": {
|
|
"cache": true,
|
|
"inputs": ["^production", "production"],
|
|
"dependsOn": ["^build"]
|
|
},
|
|
"start": {
|
|
"cache": false,
|
|
"dependsOn": ["^build"]
|
|
},
|
|
"lint": {
|
|
"executor": "@nx/eslint:lint",
|
|
"cache": true,
|
|
"outputs": ["{options.outputFile}"],
|
|
"options": {
|
|
"eslintConfig": "{projectRoot}/eslint.config.mjs",
|
|
"cache": true,
|
|
"cacheLocation": "{workspaceRoot}/.cache/eslint"
|
|
},
|
|
"configurations": {
|
|
"ci": {
|
|
"cacheStrategy": "content"
|
|
},
|
|
"fix": {
|
|
"fix": true
|
|
}
|
|
},
|
|
"dependsOn": ["^build"]
|
|
},
|
|
"lint:diff-with-main": {
|
|
"executor": "nx:run-commands",
|
|
"cache": false,
|
|
"options": {
|
|
"command": "git diff --name-only --diff-filter=d main | grep -E '{args.pattern}' | grep '^{projectRoot}/' | xargs sh -c 'if [ $# -gt 0 ]; then npx eslint --config {projectRoot}/eslint.config.mjs \"$@\"; fi' _",
|
|
"pattern": "\\.(ts|tsx|js|jsx)$"
|
|
},
|
|
"configurations": {
|
|
"fix": {
|
|
"command": "git diff --name-only --diff-filter=d main | grep -E '{args.pattern}' | grep '^{projectRoot}/' | xargs sh -c 'if [ $# -gt 0 ]; then npx eslint --config {projectRoot}/eslint.config.mjs --fix \"$@\"; fi' _"
|
|
}
|
|
}
|
|
},
|
|
"fmt": {
|
|
"executor": "nx:run-commands",
|
|
"cache": true,
|
|
"options": {
|
|
"cwd": "{projectRoot}",
|
|
"command": "prettier {args.files} --check --cache {args.cache} --cache-location {args.cacheLocation} --write {args.write} --cache-strategy {args.cacheStrategy}",
|
|
"cache": true,
|
|
"cacheLocation": "../../.cache/prettier/{projectRoot}",
|
|
"cacheStrategy": "metadata",
|
|
"write": false
|
|
},
|
|
"configurations": {
|
|
"ci": {
|
|
"cacheStrategy": "content"
|
|
},
|
|
"fix": {
|
|
"write": true
|
|
}
|
|
},
|
|
"dependsOn": ["^build"]
|
|
},
|
|
"typecheck": {
|
|
"executor": "nx:run-commands",
|
|
"cache": true,
|
|
"options": {
|
|
"cwd": "{projectRoot}",
|
|
"command": "tsgo -p tsconfig.json"
|
|
},
|
|
"configurations": {
|
|
"watch": {
|
|
"command": "tsgo -p tsconfig.json --watch"
|
|
}
|
|
},
|
|
"dependsOn": ["^build"]
|
|
},
|
|
"test": {
|
|
"executor": "@nx/jest:jest",
|
|
"cache": true,
|
|
"dependsOn": ["^build"],
|
|
"inputs": [
|
|
"^default",
|
|
"excludeStories",
|
|
"{workspaceRoot}/jest.preset.js"
|
|
],
|
|
"outputs": ["{projectRoot}/coverage"],
|
|
"options": {
|
|
"jestConfig": "{projectRoot}/jest.config.mjs",
|
|
"silent": true,
|
|
"coverage": true,
|
|
"coverageReporters": ["text-summary"],
|
|
"cacheDirectory": "../../.cache/jest/{projectRoot}"
|
|
},
|
|
"configurations": {
|
|
"ci": {
|
|
"ci": true,
|
|
"maxWorkers": 1
|
|
},
|
|
"coverage": {
|
|
"coverageReporters": ["lcov", "text"]
|
|
},
|
|
"watch": {
|
|
"watch": true
|
|
}
|
|
}
|
|
},
|
|
"test:e2e": {
|
|
"cache": true,
|
|
"dependsOn": ["^build"]
|
|
},
|
|
"storybook:build": {
|
|
"executor": "nx:run-commands",
|
|
"cache": true,
|
|
"inputs": ["^default", "excludeTests"],
|
|
"outputs": ["{projectRoot}/{options.output-dir}"],
|
|
"options": {
|
|
"cwd": "{projectRoot}",
|
|
"command": "NODE_OPTIONS='--max-old-space-size=10240' VITE_DISABLE_TYPESCRIPT_CHECKER=true storybook build --test",
|
|
"output-dir": "storybook-static",
|
|
"config-dir": ".storybook"
|
|
},
|
|
"dependsOn": ["^build"]
|
|
},
|
|
"storybook:serve:dev": {
|
|
"executor": "nx:run-commands",
|
|
"cache": true,
|
|
"dependsOn": ["^build"],
|
|
"options": {
|
|
"cwd": "{projectRoot}",
|
|
"command": "storybook dev",
|
|
"config-dir": ".storybook"
|
|
}
|
|
},
|
|
"storybook:serve:static": {
|
|
"executor": "nx:run-commands",
|
|
"dependsOn": ["storybook:build"],
|
|
"options": {
|
|
"cwd": "{projectRoot}",
|
|
"command": "npx http-server {args.staticDir} -a={args.host} --port={args.port} --silent={args.silent}",
|
|
"staticDir": "storybook-static",
|
|
"host": "localhost",
|
|
"port": 6006,
|
|
"silent": true
|
|
}
|
|
},
|
|
"storybook:test": {
|
|
"executor": "nx:run-commands",
|
|
"cache": true,
|
|
"inputs": ["^default", "excludeTests"],
|
|
"outputs": ["{projectRoot}/coverage/storybook"],
|
|
"options": {
|
|
"cwd": "{projectRoot}",
|
|
"command": "vitest run --coverage --shard={args.shard}",
|
|
"shard": "1/1"
|
|
}
|
|
},
|
|
"storybook:test:no-coverage": {
|
|
"executor": "nx:run-commands",
|
|
"inputs": ["^default", "excludeTests"],
|
|
"options": {
|
|
"cwd": "{projectRoot}",
|
|
"command": "vitest run --shard={args.shard}",
|
|
"shard": "1/1"
|
|
}
|
|
},
|
|
"storybook:coverage": {
|
|
"executor": "nx:run-commands",
|
|
"cache": true,
|
|
"inputs": [
|
|
"^default",
|
|
"excludeTests",
|
|
"{projectRoot}/coverage/storybook/coverage-storybook.json"
|
|
],
|
|
"outputs": [
|
|
"{projectRoot}/coverage/storybook",
|
|
"!{projectRoot}/coverage/storybook/coverage-storybook.json"
|
|
],
|
|
"options": {
|
|
"command": "npx nyc report --reporter={args.reporter} --reporter=text-summary -t {args.coverageDir} --report-dir {args.coverageDir} --check-coverage={args.checkCoverage} --cwd={projectRoot}",
|
|
"coverageDir": "coverage/storybook",
|
|
"reporter": "lcov",
|
|
"checkCoverage": true
|
|
},
|
|
"configurations": {
|
|
"text": {
|
|
"reporter": "text"
|
|
}
|
|
}
|
|
},
|
|
"chromatic": {
|
|
"executor": "nx:run-commands",
|
|
"options": {
|
|
"cwd": "{projectRoot}",
|
|
"commands": [
|
|
{
|
|
"command": "nx storybook:build {projectName}",
|
|
"forwardAllArgs": false
|
|
},
|
|
"chromatic --storybook-build-dir=storybook-static {args.ci}"
|
|
],
|
|
"parallel": false
|
|
},
|
|
"configurations": {
|
|
"ci": {
|
|
"ci": "--exit-zero-on-changes"
|
|
}
|
|
}
|
|
},
|
|
"@nx/jest:jest": {
|
|
"cache": true,
|
|
"inputs": [
|
|
"^default",
|
|
"excludeStories",
|
|
"{workspaceRoot}/jest.preset.js"
|
|
],
|
|
"options": {
|
|
"passWithNoTests": true
|
|
},
|
|
"configurations": {
|
|
"ci": {
|
|
"ci": true,
|
|
"codeCoverage": true
|
|
}
|
|
}
|
|
},
|
|
"@nx/eslint:lint": {
|
|
"cache": true,
|
|
"inputs": [
|
|
"default",
|
|
"{workspaceRoot}/eslint.config.mjs",
|
|
"{workspaceRoot}/packages/twenty-eslint-rules/**/*"
|
|
]
|
|
},
|
|
"@nx/vite:build": {
|
|
"cache": true,
|
|
"dependsOn": ["^build"],
|
|
"inputs": ["default", "^default"]
|
|
},
|
|
"@nx/vitest:test": {
|
|
"cache": true,
|
|
"inputs": ["default", "^default"]
|
|
}
|
|
},
|
|
"generators": {
|
|
"@nx/react": {
|
|
"application": {
|
|
"style": "@linaria/react",
|
|
"linter": "eslint",
|
|
"bundler": "vite",
|
|
"compiler": "swc",
|
|
"unitTestRunner": "jest",
|
|
"projectNameAndRootFormat": "derived"
|
|
},
|
|
"library": {
|
|
"style": "@linaria/react",
|
|
"linter": "eslint",
|
|
"bundler": "vite",
|
|
"compiler": "swc",
|
|
"unitTestRunner": "jest",
|
|
"projectNameAndRootFormat": "derived"
|
|
},
|
|
"component": {
|
|
"style": "@linaria/react"
|
|
}
|
|
}
|
|
},
|
|
"tasksRunnerOptions": {
|
|
"default": {
|
|
"options": {
|
|
"cacheableOperations": ["storybook:build"]
|
|
}
|
|
}
|
|
},
|
|
"useInferencePlugins": false,
|
|
"defaultBase": "main",
|
|
"tui": {
|
|
"enabled": false
|
|
}
|
|
}
|