houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[DevXP] Improve Linaria pre-build speed (#18382)

Browse Source 
## Summary

This PR improves Linaria/WYW pre-build speed and continues the migration
of `twenty-ui` components away from runtime `ThemeContext` reads toward
static CSS variables and theme constants.

### Linaria/WYW profiling plugin improvements (`twenty-shared`)

- **Babel JIT warmup**: added a `buildStart` warmup step that triggers
WYW's Babel JIT compilation before the real build starts, so the first
real file doesn't pay the cold-start penalty
- **`configResolved` hook**: detects dev vs prod mode and resolves the
correct warmup file path relative to `config.root`
- **Dev-only per-file logging**: slow file warnings are now gated behind
`isDevMode`, keeping production/CI build output clean
- **`closeBundle` summary**: moved the final top-slow-files report to
`closeBundle` for accurate end-of-build reporting
- **Removed noisy progress interval logging** in favor of the warmup log
+ final summary

### Migration from `ThemeContext` to static CSS variables / constants

Across `twenty-ui`, replaced runtime `useTheme()` reads with:
- `themeCssVariables` CSS custom properties (colors, spacing)
- Hard-coded design-system constants (`ICON.size.md` → `16`,
`ICON.stroke.sm` → `1.6`) so components no longer need a React context
at render time — enabling Linaria static extraction

**Components migrated:**
- `Button`, `AnimatedButton`, `LightButton`, `LightIconButton`,
`AnimatedLightIconButton`, `ButtonIcon`, `ButtonSoon`
- `ProgressBar` (Framer Motion width animation → CSS `transition`)
- `Info`, `HorizontalSeparator`, `LinkChip`
- `MenuPicker`, `MenuItemLeftContent`, `MenuItemIconWithGripSwap`,
`NavigationBarItem`
- `JsonArrow`, `JsonNestedNode`
- `ModalHeader`

### Other
- Added `aria-valuenow` to `ProgressBar` for accessibility
- `VisibilityHidden` component updated to inline accessibility styles
This commit is contained in:
Charles Bochet
2026-03-04 17:04:16 +01:00
committed by GitHub
parent be01a85d67
commit eda905f271
55 changed files with 691 additions and 650 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-ui/src/input/button/components/AnimatedButton.tsx
+19 -12
View File
@@ -2,12 +2,11 @@ import { styled } from '@linaria/react';
import { useIsMobile } from '@ui/utilities';
import { getOsShortcutSeparator } from '@ui/utilities/device/getOsShortcutSeparator';
import { type MotionProps, motion } from 'framer-motion';
import React, { useContext, useMemo } from 'react';
import React, { useMemo } from 'react';
import { Link } from 'react-router-dom';
import { Pill } from '@ui/components/Pill/Pill';
import { ThemeContext } from '@ui/theme';
import { themeCssVariables } from '@ui/theme-constants';
import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants';
import {
type ButtonAccent,
type ButtonPosition,
@@ -368,7 +367,8 @@ const StyledButton = styled.button<
}
`;
const StyledSoonPill = styled(Pill)`
const StyledSoonPillContainer = styled.span`
display: flex;
margin-left: auto;
`;
@@ -413,9 +413,9 @@ const StyledShortcutLabel = styled.div<{
font-weight: ${themeCssVariables.font.weight.medium};
`;
const StyledIconContainer = styled(motion.div)`
display: flex;
const StyledIconContainer = styled.div`
align-items: center;
display: flex;
justify-content: center;
`;
@@ -446,7 +446,6 @@ export const AnimatedButton = ({
dataGloballyPreventClickOutside,
soonLabel = 'Soon',
}: AnimatedButtonProps) => {
const { theme } = useContext(ThemeContext);
const isMobile = useIsMobile();
const isDisabled = soon || disabled;
@@ -491,13 +490,17 @@ export const AnimatedButton = ({
data-globally-prevent-click-outside={dataGloballyPreventClickOutside}
>
{Icon && (
<StyledIconContainer animate={animate} transition={transition}>
<Icon size={theme.icon.size.sm} />
<StyledIconContainer>
<motion.div animate={animate} transition={transition}>
<Icon size={ICON_SIZES.sm} />
</motion.div>
</StyledIconContainer>
)}
{animatedSvg && (
<StyledIconContainer animate={animate} transition={transition}>
{animatedSvg}
<StyledIconContainer>
<motion.div animate={animate} transition={transition}>
{animatedSvg}
</motion.div>
</StyledIconContainer>
)}
{title}
@@ -509,7 +512,11 @@ export const AnimatedButton = ({
</StyledShortcutLabel>
</>
)}
{soon && <StyledSoonPill label={soonLabel} />}
{soon && (
<StyledSoonPillContainer>
<Pill label={soonLabel} />
</StyledSoonPillContainer>
)}
</StyledButton>
);
};
packages/twenty-ui/src/input/button/components/AnimatedLightIconButton.tsx
+3 -8
View File
@@ -4,10 +4,9 @@ import {
type LightIconButtonAccent,
type LightIconButtonSize,
} from '@ui/input/button/components/LightIconButton';
import { ThemeContext } from '@ui/theme';
import { themeCssVariables } from '@ui/theme-constants';
import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants';
import { motion, type MotionProps } from 'framer-motion';
import { type ComponentProps, type MouseEvent, useContext } from 'react';
import { type ComponentProps, type MouseEvent } from 'react';
export type AnimatedLightIconButtonProps = {
className?: string;
@@ -108,8 +107,6 @@ export const AnimatedLightIconButton = ({
onClick,
title,
}: AnimatedLightIconButtonProps) => {
const { theme } = useContext(ThemeContext);
return (
<StyledButton
data-testid={testId}
@@ -125,9 +122,7 @@ export const AnimatedLightIconButton = ({
>
<StyledIconContainer animate={animate} transition={transition}>
{Icon && (
<Icon
size={size === 'medium' ? theme.icon.size.md : theme.icon.size.sm}
/>
<Icon size={size === 'medium' ? ICON_SIZES.md : ICON_SIZES.sm} />
)}
</StyledIconContainer>
</StyledButton>
packages/twenty-ui/src/input/button/components/Button/Button.tsx
+8 -9
View File
@@ -3,7 +3,6 @@ import { type IconComponent } from '@ui/display/icon/types/IconComponent';
import { ButtonHotkeys } from '@ui/input/button/components/Button/internal/ButtonHotKeys';
import { ButtonIcon } from '@ui/input/button/components/Button/internal/ButtonIcon';
import { ButtonSoon } from '@ui/input/button/components/Button/internal/ButtonSoon';
import { GRAY_SCALE_LIGHT } from '@ui/theme';
import { themeCssVariables } from '@ui/theme-constants';
import { useIsMobile } from '@ui/utilities';
import { type ClickOutsideAttributes } from '@ui/utilities/types/ClickOutsideAttributes';
@@ -128,7 +127,7 @@ const computeButtonDynamicStyles = (
}`
: 'none';
result.color = !inverted
? GRAY_SCALE_LIGHT.gray1
? themeCssVariables.grayScale.gray1
: themeCssVariables.color.blue;
if (!disabled) {
result.hoverBackground = !inverted
@@ -191,10 +190,10 @@ const computeButtonDynamicStyles = (
: 'transparent'
: variant === 'secondary'
? focus || disabled
? GRAY_SCALE_LIGHT.gray1
? themeCssVariables.grayScale.gray1
: themeCssVariables.background.transparent.primary
: focus
? GRAY_SCALE_LIGHT.gray1
? themeCssVariables.grayScale.gray1
: 'transparent';
result.borderWidthOverride = '1px 1px 1px 1px';
result.boxShadow =
@@ -232,10 +231,10 @@ const computeButtonDynamicStyles = (
: 'transparent'
: variant === 'secondary'
? focus || disabled
? GRAY_SCALE_LIGHT.gray1
? themeCssVariables.grayScale.gray1
: themeCssVariables.background.transparent.primary
: focus
? GRAY_SCALE_LIGHT.gray1
? themeCssVariables.grayScale.gray1
: 'transparent';
result.borderWidthOverride = '1px 1px 1px 1px';
result.boxShadow =
@@ -273,10 +272,10 @@ const computeButtonDynamicStyles = (
: 'transparent'
: variant === 'secondary'
? focus || disabled
? GRAY_SCALE_LIGHT.gray1
? themeCssVariables.grayScale.gray1
: themeCssVariables.background.transparent.primary
: focus
? GRAY_SCALE_LIGHT.gray1
? themeCssVariables.grayScale.gray1
: 'transparent';
result.borderWidthOverride = '1px 1px 1px 1px';
result.boxShadow =
@@ -416,7 +415,7 @@ const computeButtonWrapperColor = (
: themeCssVariables.font.color.secondary;
case 'blue':
return !inverted
? GRAY_SCALE_LIGHT.gray1
? themeCssVariables.grayScale.gray1
: themeCssVariables.color.blue;
case 'danger':
return !inverted
packages/twenty-ui/src/input/button/components/Button/internal/ButtonIcon.tsx
+15 -20
View File
@@ -2,9 +2,7 @@ import { styled } from '@linaria/react';
import { type IconComponent } from '@ui/display';
import { Loader } from '@ui/feedback';
import { baseTransitionTiming } from '@ui/input/button/components/Button/constant';
import { ThemeContext } from '@ui/theme';
import { themeCssVariables } from '@ui/theme-constants';
import { useContext } from 'react';
import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants';
const StyledIcon = styled.div<{
isLoading: boolean;
@@ -43,20 +41,17 @@ export const ButtonIcon = ({
}: {
Icon?: IconComponent;
isLoading?: boolean;
}) => {
const { theme } = useContext(ThemeContext);
return (
<StyledIconWrapper>
{isLoading && (
<StyledLoader>
<Loader />
</StyledLoader>
)}
{Icon && (
<StyledIcon isLoading={!!isLoading}>
<Icon size={theme.icon.size.sm} />
</StyledIcon>
)}
</StyledIconWrapper>
);
};
}) => (
<StyledIconWrapper>
{isLoading && (
<StyledLoader>
<Loader />
</StyledLoader>
)}
{Icon && (
<StyledIcon isLoading={!!isLoading}>
<Icon size={ICON_SIZES.sm} />
</StyledIcon>
)}
</StyledIconWrapper>
);
packages/twenty-ui/src/input/button/components/Button/internal/ButtonSoon.tsx
+5 -2
View File
@@ -1,7 +1,8 @@
import { styled } from '@linaria/react';
import { Pill } from '@ui/components';
const StyledSoonPill = styled(Pill)`
const StyledSoonPillContainer = styled.span`
display: flex;
margin-left: auto;
`;
@@ -10,5 +11,7 @@ type ButtonSoonProps = {
};
export const ButtonSoon = ({ label = 'Soon' }: ButtonSoonProps) => (
<StyledSoonPill label={label} />
<StyledSoonPillContainer>
<Pill label={label} />
</StyledSoonPillContainer>
);
packages/twenty-ui/src/input/button/components/LightButton.tsx
+3 -6
View File
@@ -1,8 +1,7 @@
import { styled } from '@linaria/react';
import { type IconComponent } from '@ui/display';
import { ThemeContext } from '@ui/theme';
import { themeCssVariables } from '@ui/theme-constants';
import { type MouseEvent, useContext } from 'react';
import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants';
import { type MouseEvent } from 'react';
export type LightButtonAccent = 'secondary' | 'tertiary';
@@ -90,8 +89,6 @@ export const LightButton = ({
type = 'button',
onClick,
}: LightButtonProps) => {
const { theme } = useContext(ThemeContext);
return (
<StyledButton
onClick={onClick}
@@ -102,7 +99,7 @@ export const LightButton = ({
className={className}
active={active}
>
{!!Icon && <Icon size={theme.icon.size.md} />}
{!!Icon && <Icon size={ICON_SIZES.md} />}
{title}
</StyledButton>
);
packages/twenty-ui/src/input/button/components/LightIconButton.tsx
+3 -8
View File
@@ -1,8 +1,7 @@
import { styled } from '@linaria/react';
import { type IconComponent } from '@ui/display';
import { ThemeContext } from '@ui/theme';
import { themeCssVariables } from '@ui/theme-constants';
import { type ComponentProps, type MouseEvent, useContext } from 'react';
import { ICON_SIZES, themeCssVariables } from '@ui/theme-constants';
import { type ComponentProps, type MouseEvent } from 'react';
export type LightIconButtonAccent = 'secondary' | 'tertiary';
export type LightIconButtonSize = 'small' | 'medium';
@@ -106,8 +105,6 @@ export const LightIconButton = ({
onClick,
title,
}: LightIconButtonProps) => {
const { theme } = useContext(ThemeContext);
return (
<StyledButton
data-testid={testId}
@@ -122,9 +119,7 @@ export const LightIconButton = ({
title={title}
>
{Icon && (
<Icon
size={size === 'medium' ? theme.icon.size.md : theme.icon.size.sm}
/>
<Icon size={size === 'medium' ? ICON_SIZES.md : ICON_SIZES.sm} />
)}
</StyledButton>
);