Charles Bochet
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`.
367 lines
13 KiB
TypeScript
367 lines
13 KiB
TypeScript
/* eslint-disable no-console */
|
|
import { lingui } from '@lingui/vite-plugin';
|
|
import { isNonEmptyString } from '@sniptt/guards';
|
|
import react from '@vitejs/plugin-react-swc';
|
|
import wyw from '@wyw-in-js/vite';
|
|
import fs from 'fs';
|
|
import path from 'path';
|
|
import { visualizer } from 'rollup-plugin-visualizer';
|
|
import {
|
|
defineConfig,
|
|
loadEnv,
|
|
type PluginOption,
|
|
searchForWorkspaceRoot,
|
|
} from 'vite';
|
|
import checker from 'vite-plugin-checker';
|
|
import svgr from 'vite-plugin-svgr';
|
|
import tsconfigPaths from 'vite-tsconfig-paths';
|
|
type Checkers = Parameters<typeof checker>[0];
|
|
|
|
export default defineConfig(({ command, mode }) => {
|
|
const env = loadEnv(mode, __dirname, '');
|
|
|
|
const {
|
|
REACT_APP_SERVER_BASE_URL,
|
|
VITE_BUILD_SOURCEMAP,
|
|
VITE_DISABLE_TYPESCRIPT_CHECKER,
|
|
VITE_HOST,
|
|
SSL_CERT_PATH,
|
|
SSL_KEY_PATH,
|
|
REACT_APP_PORT,
|
|
IS_DEBUG_MODE,
|
|
} = env;
|
|
|
|
const port = isNonEmptyString(REACT_APP_PORT)
|
|
? parseInt(REACT_APP_PORT)
|
|
: 3001;
|
|
|
|
const isBuildCommand = command === 'build';
|
|
|
|
const tsConfigPath = isBuildCommand
|
|
? path.resolve(__dirname, './tsconfig.build.json')
|
|
: path.resolve(__dirname, './tsconfig.json');
|
|
|
|
const CHUNK_SIZE_WARNING_LIMIT = 1024 * 1024; // 1MB
|
|
// Please don't increase this limit for main index chunk
|
|
// If it gets too big then find modules in the code base
|
|
// that can be loaded lazily, there are more!
|
|
const MAIN_CHUNK_SIZE_LIMIT = 6.8 * 1024 * 1024; // 6.8MB for main index chunk
|
|
const OTHER_CHUNK_SIZE_LIMIT = 5 * 1024 * 1024; // 5MB for other chunks
|
|
|
|
const checkers: Checkers = {
|
|
overlay: false,
|
|
};
|
|
|
|
if (VITE_DISABLE_TYPESCRIPT_CHECKER === 'true') {
|
|
console.log(
|
|
`VITE_DISABLE_TYPESCRIPT_CHECKER: ${VITE_DISABLE_TYPESCRIPT_CHECKER}`,
|
|
);
|
|
}
|
|
|
|
if (VITE_BUILD_SOURCEMAP === 'true') {
|
|
console.log(`VITE_BUILD_SOURCEMAP: ${VITE_BUILD_SOURCEMAP}`);
|
|
}
|
|
|
|
if (VITE_DISABLE_TYPESCRIPT_CHECKER !== 'true') {
|
|
checkers['typescript'] = {
|
|
tsconfigPath: tsConfigPath,
|
|
};
|
|
}
|
|
|
|
return {
|
|
root: __dirname,
|
|
cacheDir: '../../node_modules/.vite/packages/twenty-front',
|
|
|
|
server: {
|
|
port: port,
|
|
...(VITE_HOST ? { host: VITE_HOST } : {}),
|
|
...(SSL_KEY_PATH && SSL_CERT_PATH
|
|
? {
|
|
protocol: 'https',
|
|
https: {
|
|
key: fs.readFileSync(env.SSL_KEY_PATH),
|
|
cert: fs.readFileSync(env.SSL_CERT_PATH),
|
|
},
|
|
}
|
|
: {
|
|
protocol: 'http',
|
|
}),
|
|
fs: {
|
|
allow: [
|
|
searchForWorkspaceRoot(process.cwd()),
|
|
'**/@blocknote/core/src/fonts/**',
|
|
],
|
|
},
|
|
},
|
|
|
|
plugins: [
|
|
react({
|
|
jsxImportSource: '@emotion/react',
|
|
plugins: [['@lingui/swc-plugin', {}]],
|
|
}),
|
|
tsconfigPaths({
|
|
root: __dirname,
|
|
projects: ['tsconfig.json'],
|
|
}),
|
|
svgr(),
|
|
lingui({
|
|
configPath: path.resolve(__dirname, './lingui.config.ts'),
|
|
}),
|
|
checker(checkers),
|
|
{
|
|
...wyw({
|
|
include: [
|
|
'**/twenty-ui/src/**/*.{ts,tsx}',
|
|
'**/AdvancedTextEditor.tsx',
|
|
'**/BubbleMenuIconButton.tsx',
|
|
'**/TextBubbleMenu.tsx',
|
|
'**/TurnIntoBlockDropdown.tsx',
|
|
'**/WorkflowAttachmentChip.tsx',
|
|
'**/WorkflowSendEmailAttachments.tsx',
|
|
'**/ResizableImageView.tsx',
|
|
'**/SettingsBillingSubscriptionInfo.tsx',
|
|
'**/SubscriptionBenefit.tsx',
|
|
'**/SubscriptionInfoContainer.tsx',
|
|
'**/SubscriptionPrice.tsx',
|
|
'**/TrialCard.tsx',
|
|
'**/MeteredPriceSelector.tsx',
|
|
'**/PlansTags.tsx',
|
|
'**/SettingsBillingLabelValueItem.tsx',
|
|
'**/SubscriptionInfoRowContainer.tsx',
|
|
'**/FileBlock.tsx',
|
|
'**/MentionInlineContent.tsx',
|
|
'**/BlockEditor.tsx',
|
|
'**/CustomMentionMenu.tsx',
|
|
'**/CustomSideMenu.tsx',
|
|
'**/CustomSideMenuOptions.tsx',
|
|
'**/CustomSlashMenu.tsx',
|
|
'**/CurrentWorkspaceMemberOrphanFavorites.tsx',
|
|
'**/FavoritesBackButton.tsx',
|
|
'**/FavoritesDroppable.tsx',
|
|
'**/FavoritesSkeletonLoader.tsx',
|
|
'**/FavoriteFolderPickerList.tsx',
|
|
'**/InformationBanner.tsx',
|
|
'**/InformationBannerWrapper.tsx',
|
|
'**/InformationBannerDeletedRecord.tsx',
|
|
'**/AddToNavigationDragHandle.tsx',
|
|
'**/CurrentWorkspaceMemberOrphanNavigationMenuItems.tsx',
|
|
'**/NavigationItemDropTarget.tsx',
|
|
'**/NavigationMenuEditModeBar.tsx',
|
|
'**/NavigationMenuItemBackButton.tsx',
|
|
'**/NavigationMenuItemDroppable.tsx',
|
|
'**/NavigationMenuItemIconContainer.tsx',
|
|
'**/NavigationMenuItemSkeletonLoader.tsx',
|
|
'**/ObjectIconWithViewOverlay.tsx',
|
|
'**/WorkspaceNavigationMenuItems.tsx',
|
|
'**/WorkspaceNavigationMenuItemsFolder.tsx',
|
|
'**/MainNavigationDrawerAIChatContent.tsx',
|
|
'**/MainNavigationDrawerNavigationContent.tsx',
|
|
'**/MainNavigationDrawerScrollableItems.tsx',
|
|
'**/MainNavigationDrawerTabsRow.tsx',
|
|
'**/RecordTableCellBaseContainer.tsx',
|
|
'**/RecordTableCellDisplayContainer.tsx',
|
|
'**/RecordTableCellFirstRowFirstColumn.tsx',
|
|
'**/RecordTableCellLoading.tsx',
|
|
'**/RecordTableCellStyleWrapper.tsx',
|
|
'**/RecordTableDragAndDropPlaceholderCell.tsx',
|
|
'**/RecordTableAggregateFooterCell.tsx',
|
|
'**/RecordTableHeaderAddColumnButton.tsx',
|
|
'**/RecordTableHeaderCell.tsx',
|
|
'**/RecordTableHeaderCheckboxColumn.tsx',
|
|
'**/RecordTableHeaderDragDropColumn.tsx',
|
|
'**/RecordTableHeaderFirstCell.tsx',
|
|
'**/RecordTableHeaderFirstScrollableCell.tsx',
|
|
'**/RecordTableHeaderLastEmptyColumn.tsx',
|
|
'**/RecordTableAddButtonPlaceholderCell.tsx',
|
|
'**/RecordTableGroupSectionLastDynamicFillingCell.tsx',
|
|
'**/RecordTableLastDynamicFillingCell.tsx',
|
|
'**/RecordTableRowVirtualizedContainer.tsx',
|
|
'**/RecordTableVirtualizedBodyPlaceholder.tsx',
|
|
'**/SignInAppNavigationDrawerMock.tsx',
|
|
'**/SignInBackgroundMockContainer.tsx',
|
|
'**/SignInBackgroundMockPage.tsx',
|
|
'**/Heading.tsx',
|
|
'**/MatchColumnSelectFieldSelectDropdownContent.tsx',
|
|
'**/MatchColumnToFieldSelect.tsx',
|
|
'**/SpreadSheetImportModalCloseButton.tsx',
|
|
'**/SpreadSheetImportModalWrapper.tsx',
|
|
'**/SpreadsheetImportTable.tsx',
|
|
'**/StepNavigationButton.tsx',
|
|
'**/ImportDataStep.tsx',
|
|
'**/MatchColumnsStep.tsx',
|
|
'**/ColumnGrid.tsx',
|
|
'**/SubMatchingSelectControlContainer.tsx',
|
|
'**/SubMatchingSelectDropdownButton.tsx',
|
|
'**/SubMatchingSelectRow.tsx',
|
|
'**/SubMatchingSelectRowLeftSelect.tsx',
|
|
'**/SubMatchingSelectRowRightDropdown.tsx',
|
|
'**/TemplateColumn.tsx',
|
|
'**/UnmatchColumn.tsx',
|
|
'**/UnmatchColumnBanner.tsx',
|
|
'**/UserTableColumn.tsx',
|
|
'**/SelectHeaderStep.tsx',
|
|
'**/SelectSheetStep.tsx',
|
|
'**/SpreadsheetImportStepper.tsx',
|
|
'**/SpreadsheetImportStepperContainer.tsx',
|
|
'**/UploadStep.tsx',
|
|
'**/DropZone.tsx',
|
|
'**/ValidationStep.tsx',
|
|
'**/columns.tsx',
|
|
'**/BooleanDisplay.tsx',
|
|
'**/EllipsisDisplay.tsx',
|
|
'**/EmailsDisplay.tsx',
|
|
'**/MultiSelectDisplay.tsx',
|
|
'**/PhonesDisplay.tsx',
|
|
'**/TextDisplay.tsx',
|
|
'**/RatingInput.tsx',
|
|
'**/SortOrFilterChip.tsx',
|
|
'**/UpdateViewButtonGroup.tsx',
|
|
'**/ViewBarDetails.tsx',
|
|
'**/ViewBarFilterDropdownAdvancedFilterButton.tsx',
|
|
'**/ViewBarFilterDropdownAnyFieldSearchButtonMenuItem.tsx',
|
|
'**/ViewBarFilterDropdownBottomMenu.tsx',
|
|
'**/ViewBarFilterDropdownFieldSelectMenu.tsx',
|
|
'**/ViewPickerContentCreateMode.tsx',
|
|
'**/ViewPickerDropdown.tsx',
|
|
'**/ViewPickerIconAndNameContainer.tsx',
|
|
'**/ViewPickerListContent.tsx',
|
|
'**/ViewPickerSaveButtonContainer.tsx',
|
|
'**/ViewPickerSelectContainer.tsx',
|
|
],
|
|
babelOptions: {
|
|
presets: ['@babel/preset-typescript', '@babel/preset-react'],
|
|
},
|
|
}),
|
|
enforce: 'pre',
|
|
},
|
|
visualizer({
|
|
open: true,
|
|
gzipSize: true,
|
|
brotliSize: true,
|
|
filename: 'dist/stats.html',
|
|
}) as PluginOption, // https://github.com/btd/rollup-plugin-visualizer/issues/162#issuecomment-1538265997,
|
|
],
|
|
|
|
optimizeDeps: {
|
|
exclude: [
|
|
'../../node_modules/.vite',
|
|
'../../node_modules/.cache',
|
|
'../../node_modules/twenty-ui',
|
|
],
|
|
},
|
|
|
|
build: {
|
|
minify: 'esbuild',
|
|
outDir: 'build',
|
|
sourcemap: VITE_BUILD_SOURCEMAP === 'true',
|
|
rollupOptions: {
|
|
// Don't use manual chunks as it causes many issue
|
|
// including this one we wasted a lot of time on:
|
|
// https://github.com/rollup/rollup/issues/2793
|
|
output: {
|
|
// Set chunk size warning limit (in bytes) - warns at 1MB
|
|
chunkSizeWarningLimit: CHUNK_SIZE_WARNING_LIMIT,
|
|
// Custom plugin to fail build if chunks exceed max size
|
|
plugins: [
|
|
{
|
|
name: 'chunk-size-limit',
|
|
generateBundle(_options, bundle) {
|
|
const oversizedChunks: string[] = [];
|
|
|
|
Object.entries(bundle).forEach(([fileName, chunk]) => {
|
|
if (chunk.type === 'chunk' && chunk.code !== undefined) {
|
|
const size = Buffer.byteLength(chunk.code, 'utf8');
|
|
const isMainChunk =
|
|
fileName.includes('index') && chunk.isEntry;
|
|
const sizeLimit = isMainChunk
|
|
? MAIN_CHUNK_SIZE_LIMIT
|
|
: OTHER_CHUNK_SIZE_LIMIT;
|
|
const limitType = isMainChunk ? 'main' : 'other';
|
|
|
|
if (size > sizeLimit) {
|
|
oversizedChunks.push(
|
|
`${fileName} (${limitType}): ${(size / 1024 / 1024).toFixed(2)}MB (limit: ${(sizeLimit / 1024 / 1024).toFixed(2)}MB)`,
|
|
);
|
|
}
|
|
}
|
|
});
|
|
|
|
if (oversizedChunks.length > 0) {
|
|
const errorMessage = `Build failed: The following chunks exceed their size limits:\n${oversizedChunks.map((chunk) => ` - ${chunk}`).join('\n')}`;
|
|
this.error(errorMessage);
|
|
}
|
|
},
|
|
},
|
|
// TODO; later - think about prefetching modules such
|
|
// as date time picker, phone input etc...
|
|
/*
|
|
{
|
|
name: 'add-prefetched-modules',
|
|
transformIndexHtml(html: string,
|
|
ctx: {
|
|
path: string;
|
|
filename: string;
|
|
server?: ViteDevServer;
|
|
bundle?: import('rollup').OutputBundle;
|
|
chunk?: import('rollup').OutputChunk;
|
|
}) {
|
|
|
|
const bundles = Object.keys(ctx.bundle ?? {});
|
|
|
|
let modernBundles = bundles.filter(
|
|
(bundle) => bundle.endsWith('.map') === false
|
|
);
|
|
|
|
|
|
// Remove existing files and concatenate them into link tags
|
|
const prefechBundlesString = modernBundles
|
|
.filter((bundle) => html.includes(bundle) === false)
|
|
.map((bundle) => `<link rel="prefetch" href="${ctx.server?.config.base}${bundle}">`)
|
|
.join('');
|
|
|
|
// Use regular expression to get the content within <head> </head>
|
|
const headContent = html.match(/<head>([\s\S]*)<\/head>/)?.[1] ?? '';
|
|
// Insert the content of prefetch into the head
|
|
const newHeadContent = `${headContent}${prefechBundlesString}`;
|
|
// Replace the original head
|
|
html = html.replace(
|
|
/<head>([\s\S]*)<\/head>/,
|
|
`<head>${newHeadContent}</head>`
|
|
);
|
|
|
|
return html;
|
|
|
|
|
|
},
|
|
}*/
|
|
],
|
|
},
|
|
},
|
|
},
|
|
|
|
envPrefix: 'REACT_APP_',
|
|
|
|
define: {
|
|
_env_: {
|
|
REACT_APP_SERVER_BASE_URL,
|
|
},
|
|
'process.env': {
|
|
REACT_APP_SERVER_BASE_URL,
|
|
IS_DEBUG_MODE,
|
|
IS_DEV_ENV: mode === 'development' ? 'true' : 'false',
|
|
},
|
|
},
|
|
css: {
|
|
modules: {
|
|
localsConvention: 'camelCaseOnly',
|
|
},
|
|
},
|
|
resolve: {
|
|
alias: {
|
|
path: 'rollup-plugin-node-polyfills/polyfills/path',
|
|
'@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs',
|
|
},
|
|
},
|
|
};
|
|
});
|