Enlève swc styled-component plugin qui ajoute un import qui ne fonctionne pas en esm

Par conséquent, plus de css=. On remplace par le good'ol style=.
2023-09-12 17:47:37 +02:00 · 2023-09-12 17:47:37 +02:00 · fefe90a1b5
parent 4eac3be829
commit fefe90a1b5
78 changed files with 594 additions and 614 deletions
--- a/site/build/prerender-worker.js
+++ b/site/build/prerender-worker.js
@ -36,5 +36,8 @@ export default async ({ site, url, lang }) => {
 	await fs.mkdir(dir, { recursive: true })
 	await fs.writeFile(path.join(dir, 'index.html'), page)

-	return path.relative(path.join(dirname, '../dist'), path.join(dir, 'index.html'))
+	return path.relative(
+		path.join(dirname, '../dist'),
+		path.join(dir, 'index.html')
+	)
 }
--- a/site/package.json
+++ b/site/package.json
@ -22,9 +22,7 @@
 		"start:axe-debugging": "VITE_AXE_CORE_ENABLED=true vite dev",
 		"start:netlify": "sed 's|:SITE_EN|/infrance|g' netlify.base.toml | sed 's|:SITE_FR|/mon-entreprise|g' | sed 's|:API_URL|http://localhost:3004|g' | sed 's|\\[\\[redirects\\]\\]|\\[\\[redirects\\]\\]\\n  force = true|g' > netlify.toml && HMR_CLIENT_PORT=8888 netlify dev",
 		"start:storybook": "storybook dev -p 6006",
-
 		"postinstall": "node scripts/prepare.js",
-
 		"build": "NODE_OPTIONS='--max-old-space-size=6144'; yarn build:sitemap && yarn build:simulator-data && vite build && yarn build:iframe-script",
 		"build:iframe-script": "NODE_OPTIONS='--max-old-space-size=4096'; vite build --config build/vite-iframe-script.config.ts",
 		"build:prerender": "ts-node-esm build/prerender.ts",
@ -34,20 +32,15 @@
 		"build:ssr": "NODE_OPTIONS='--max-old-space-size=4096'; vite build --ssr ./source/entries/entry-server.tsx --outDir ./dist/ssr --emptyOutDir && echo '{\"type\": \"module\"}' > dist/package.json",
 		"build:storybook": "NODE_OPTIONS='--max-old-space-size=6144'; storybook build",
 		"build:yaml-to-dts": "ts-node-esm scripts/build-yaml-to-dts.ts",
-		
 		"preview:mon-entreprise": "sed 's|:SITE_EN|_|g' netlify.preview.toml | sed 's|:SITE_FR||g' | sed 's|:API_URL|http://localhost:3004|g' > dist/netlify.toml && cd dist && netlify dev -d ./ -p 8888",
 		"preview:infrance": "      sed 's|:SITE_EN||g' netlify.preview.toml | sed 's|:SITE_FR|_|g' | sed 's|:API_URL|http://localhost:3004|g' > dist/netlify.toml && cd dist && netlify dev -d ./ -p 8889",
-		
 		"typecheck:watch": "tsc --skipLibCheck --noEmit --watch",
-		
 		"test": "vitest",
 		"test:dev-e2e:mon-entreprise": "cypress open --e2e --config \"baseUrl=http://localhost:8888\"",
 		"test:dev-e2e:mycompanyinfrance": "cypress open --e2e --config \"baseUrl=http://localhost:8889,specPattern=cypress/integration/mon-entreprise/english/**/*.{js,jsx,ts,tsx}\" --env language=en",
 		"test:record-http-calls:mon-entreprise": "cypress run --env record_http=",
-		
 		"algolia:clean": "node scripts/search/clean.js",
 		"algolia:update": "yarn build:simulator-data && ts-node-esm ./scripts/search/update-data.ts",
-		
 		"i18n:check": "yarn i18n:rules:check && yarn i18n:ui:check",
 		"i18n:translate": "yarn i18n:rules:translate && yarn i18n:ui:translate",
 		"i18n:rules:check": "node scripts/i18n/check-missing-rule-translation.js",
@ -121,7 +114,6 @@
 		"@storybook/react": "^7.0.5",
 		"@storybook/react-vite": "^7.0.5",
 		"@storybook/testing-library": "^0.1.0",
-		"@swc/plugin-styled-components": "^1.5.76",
 		"@types/history": "^5.0.0",
 		"@types/react": "^18.2.21",
 		"@types/react-dom": "^18.2.7",
--- a/site/source/components/App.tsx
+++ b/site/source/components/App.tsx
@ -117,11 +117,11 @@ const App = () => {
 			<main
 				role="main"
 				id="main"
-				css={`
-					flex: 1;
-					display: flex;
-					flex-direction: column;
-				`}
+				style={{
+					flex: '1',
+					display: 'flex',
+					flexDirection: 'column',
+				}}
 			>
 				<a
 					href={`${fullURL}#footer`}
--- a/site/source/components/BarChart.tsx
+++ b/site/source/components/BarChart.tsx
@ -45,14 +45,12 @@ function ChartItemBar({
 			{disableAnimation ? (
 				<div
 					className="distribution-chart__bar print-background-force"
-					css={{ backgroundColor: primary[600] }}
-					style={{ flex: percentage }}
+					style={{ backgroundColor: primary[600], flex: percentage }}
 				/>
 			) : (
 				<animated.div
 					className="distribution-chart__bar print-background-force"
-					css={{ backgroundColor: primary[600] }}
-					style={style}
+					style={{ ...style, backgroundColor: primary[600] }}
 				/>
 			)}
 			<Value>
@ -160,9 +158,9 @@ function InnerBarChartBranch({
 				<div className="distribution-chart__counterparts">
 					<Body
 						as="h3"
-						css={`
-							margin-bottom: 0;
-						`}
+						style={{
+							marginBottom: '0',
+						}}
 					>
 						{title}
 					</Body>
--- a/site/source/components/CurrentSimulatorCard.tsx
+++ b/site/source/components/CurrentSimulatorCard.tsx
@ -29,9 +29,9 @@ export function CurrentSimulatorCard({
 			item
 			md={12}
 			lg={8}
-			css={`
-				margin-bottom: -1rem;
-			`}
+			style={{
+				marginBottom: '-1rem',
+			}}
 		>
 			<Message border={false} type="info">
 				<Trans i18nKey="pages.assistants.pour-mon-entreprise.avertissement-entreprise-non-traitée">
--- a/site/source/components/Notifications.tsx
+++ b/site/source/components/Notifications.tsx
@ -69,9 +69,9 @@ export default function Notifications() {

 	return (
 		<div
-			css={`
-				margin-top: 1rem;
-			`}
+			style={{
+				marginTop: '1rem',
+			}}
 		>
 			<Appear>
 				{messages.map(({ sévérité, dottedName, résumé, description }) => (
--- a/site/source/components/PageHeader.tsx
+++ b/site/source/components/PageHeader.tsx
@ -24,20 +24,22 @@ export default function PageHeader({
 		<Grid
 			container
 			columnSpacing={6}
-			css={`
-				/* align-items: center; */
-			`}
+			css={
+				{
+					/* align-items: center; */
+				}
+			}
 		>
 			<Grid
 				item
 				sm={12}
 				md={picture ? 8 : 12}
 				lg={picture ? 7 : 12}
-				css={`
-					display: flex;
-					flex-direction: column !important;
-					align-items: flex-start;
-				`}
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'flex-start',
+				}}
 			>
 				{titre && (
 					<>
--- a/site/source/components/PaySlip.tsx
+++ b/site/source/components/PaySlip.tsx
@ -21,6 +21,8 @@ import { ExplicableRule } from './conversation/Explicable'

 import './PaySlip.css'

+import { styled } from 'styled-components'
+
 import { Line, SalaireBrutSection, SalaireNetSection } from './PaySlipSections'

 export const SECTION_ORDER = [
@ -108,17 +110,7 @@ export default function PaySlip() {
 	const cotisationsBySection = getCotisationsBySection(parsedRules)

 	return (
-		<div
-			className="payslip__container"
-			css={`
-				.value {
-					display: flex;
-					align-items: flex-end;
-					justify-content: flex-end;
-					padding-right: 0.2em;
-				}
-			`}
-		>
+		<StyledContainer className="payslip__container">
 			<div className="payslip__salarySection">
 				<Line
 					rule="salarié . temps de travail"
@ -199,7 +191,7 @@ export default function PaySlip() {
 			</div>
 			{/* Section salaire net */}
 			<SalaireNetSection />
-		</div>
+		</StyledContainer>
 	)
 }

@ -259,3 +251,12 @@ function Cotisation({ dottedName }: { dottedName: DottedName }) {
 		</>
 	)
 }
+
+const StyledContainer = styled.div`
+	.value {
+		display: flex;
+		align-items: flex-end;
+		justify-content: flex-end;
+		padding-right: 0.2em;
+	}
+`
--- a/site/source/components/PlaceDesEntreprises.tsx
+++ b/site/source/components/PlaceDesEntreprises.tsx
@ -78,10 +78,10 @@ export const PlaceDesEntreprisesButton = ({
 						<Suspense
 							fallback={
 								<Container
-									css={`
-										height: 300px;
-										align-items: center;
-									`}
+									style={{
+										height: '300px',
+										alignItems: 'center',
+									}}
 								>
 									<Loader />
 								</Container>
--- a/site/source/components/References.tsx
+++ b/site/source/components/References.tsx
@ -59,16 +59,16 @@ function Reference({ href, title }: { href: string; title: string }) {
 			<Grid
 				container
 				spacing={2}
-				css={`
-					display: inline-flex;
-				`}
+				style={{
+					display: 'inline-flex',
+				}}
 			>
 				<Grid item xs={12} sm="auto">
 					<Link
 						href={href}
-						css={`
-							display: flex;
-						`}
+						style={{
+							display: 'flex',
+						}}
 					>
 						{capitalise0(title)}
 					</Link>
@ -76,9 +76,9 @@ function Reference({ href, title }: { href: string; title: string }) {
 				<Grid
 					item
 					xs="auto"
-					css={`
-						text-align: right;
-					`}
+					style={{
+						textAlign: 'right',
+					}}
 				>
 					{domain in referencesImages && (
 						<StyledImage
--- a/site/source/components/ShareSimulationBanner/index.tsx
+++ b/site/source/components/ShareSimulationBanner/index.tsx
@ -84,9 +84,9 @@ export default function ShareOrSaveSimulationBanner({
 				container
 				className=" print-hidden"
 				spacing={4}
-				css={`
-					justify-content: center;
-				`}
+				style={{
+					justifyContent: 'center',
+				}}
 			>
 				{share && (
 					<Grid item xs={12} sm="auto">
--- a/site/source/components/Simulation/SimulationGoal.tsx
+++ b/site/source/components/Simulation/SimulationGoal.tsx
@ -77,10 +77,10 @@ export function SimulationGoal({
 			<StyledGoal $small={small && !editable}>
 				<Grid
 					container
-					css={`
-						align-items: baseline;
-						justify-content: space-between;
-					`}
+					style={{
+						alignItems: 'baseline',
+						justifyContent: 'space-between',
+					}}
 					spacing={2}
 				>
 					<Grid item md="auto" sm={small ? 9 : 8} xs={8}>
@ -88,9 +88,9 @@ export function SimulationGoal({
 							{isInfoMode ? (
 								<Grid
 									container
-									css={`
-										align-items: center;
-									`}
+									style={{
+										alignItems: 'center',
+									}}
 								>
 									<Grid item>
 										<StyledBody
--- a/site/source/components/Simulation/SimulationGoals.tsx
+++ b/site/source/components/Simulation/SimulationGoals.tsx
@ -105,11 +105,11 @@ function TopSection({ toggles }: { toggles?: React.ReactNode }) {
 			{inIframe && (
 				<Grid
 					item
-					css={`
-						display: flex;
-						justify-content: center;
-						align-items: flex-end;
-					`}
+					style={{
+						display: 'flex',
+						justifyContent: 'center',
+						alignItems: 'flex-end',
+					}}
 				>
 					<LogoContainer
 						href={import.meta.env.VITE_FR_BASE_URL}
--- a/site/source/components/Simulation/index.tsx
+++ b/site/source/components/Simulation/index.tsx
@ -143,16 +143,22 @@ export function SimulationContainer({
 		<Grid
 			container
 			spacing={2}
-			css={`
-				justify-content: center;
-			`}
+			style={{
+				justifyContent: 'center',
+			}}
 			id={id}
 		>
 			<StyledGrid
 				item
-				css={`
-					${fullWidth ? `width: 100%; max-width: none; flex-basis: auto;` : ''}
-				`}
+				style={
+					fullWidth
+						? {
+								width: ' 100%',
+								maxWidth: 'none',
+								flexBasis: 'auto',
+						  }
+						: {}
+				}
 				xl={9}
 				lg={10}
 				md={11}
--- a/site/source/components/charts/PagesCharts.tsx
+++ b/site/source/components/charts/PagesCharts.tsx
@ -86,15 +86,7 @@ export default function PagesChart({
 					formatKey={(key) => formatLegend(key)}
 				/>
 			) : (
-				<RealResponsiveContainer
-					width="100%"
-					height={500}
-					css={`
-						svg {
-							overflow: visible;
-						}
-					`}
-				>
+				<RealResponsiveContainer width="100%" height={500}>
 					<ComposedChartWithRole
 						layout="horizontal"
 						data={flattenedData}
--- a/site/source/components/company/Details.tsx
+++ b/site/source/components/company/Details.tsx
@ -23,10 +23,10 @@ export function CompanyDetails({
 		<StyledCompanyContainer>
 			<Grid
 				container
-				css={`
-					align-items: flex-end;
-					justify-content: center;
-				`}
+				style={{
+					alignItems: 'flex-end',
+					justifyContent: 'center',
+				}}
 				spacing={3}
 			>
 				<Grid item xs={12} lg>
--- a/site/source/components/company/SearchDetails.tsx
+++ b/site/source/components/company/SearchDetails.tsx
@ -31,9 +31,9 @@ export default function CompanySearchDetails({
 		<CompanyContainer>
 			<H4
 				as="div"
-				css={`
-					margin: 0;
-				`}
+				style={{
+					margin: '0',
+				}}
 			>
 				<>
 					{'highlightLabel' in entreprise
--- a/site/source/components/company/SearchField.tsx
+++ b/site/source/components/company/SearchField.tsx
@ -166,10 +166,10 @@ function Results({
 								aria-label={`${etablissement.label}, Selectionner cette entreprise`}
 								ctaLabel={
 									<ChevronIcon
-										css={`
-											height: 20px;
-											margin-top: 5px;
-										`}
+										style={{
+											height: '20px',
+											marginTop: '5px',
+										}}
 										aria-hidden
 									/>
 								}
--- a/site/source/components/conversation/AnswerList.tsx
+++ b/site/source/components/conversation/AnswerList.tsx
@ -105,9 +105,9 @@ export default function AnswerList({ onClose, children }: AnswerListProps) {
 					{children}
 					<div
 						className="print-hidden"
-						css={`
-							text-align: center;
-						`}
+						style={{
+							textAlign: 'center',
+						}}
 					>
 						<PopoverConfirm
 							small
@ -132,9 +132,9 @@ export default function AnswerList({ onClose, children }: AnswerListProps) {
 			{currentSimulatorData?.pathId === 'simulateurs.salarié' && (
 				<div
 					className="print-hidden"
-					css={`
-						text-align: center;
-					`}
+					style={{
+						textAlign: 'center',
+					}}
 				>
 					<Spacing md />
 					<JeDonneMonAvis />
@ -150,26 +150,26 @@ export default function AnswerList({ onClose, children }: AnswerListProps) {
 						<Message type="secondary" border={false} icon>
 							<Body>
 								<span
-									css={`
-										display: flex;
-										align-items: center;
-									`}
+									style={{
+										display: 'flex',
+										alignItems: 'center',
+									}}
 								>
 									<span
-										css={`
-											flex-shrink: 1;
-										`}
+										style={{
+											flexShrink: '1',
+										}}
 									>
 										Les réponses liées à l'entreprise sont{' '}
 										<Strong>automatiquement sauvegardées</Strong> entre les
 										simulations.
 									</span>
 									<span
-										css={`
-											flex: 1;
-											min-width: fit-content;
-											text-align: right;
-										`}
+										style={{
+											flex: '1',
+											minWidth: 'fit-content',
+											textAlign: 'right',
+										}}
 									>
 										<PopoverConfirm
 											small
@ -199,14 +199,14 @@ export default function AnswerList({ onClose, children }: AnswerListProps) {
 					</div>
 					<div
 						className="print-hidden"
-						css={`
-							text-align: center;
-						`}
+						style={{
+							textAlign: 'center',
+						}}
 					></div>
 					<StepsTable {...{ rules: companyQuestions, onClose }} />
 					<Spacing md />
 					<div className="print-hidden">
-						<Body css={{ marginTop: 0 }}>
+						<Body style={{ marginTop: 0 }}>
 							{t(
 								'gérer.ressources.annuaire-entreprises.body',
 								'Retrouvez toutes les informations publiques concernant votre entreprise sur'
--- a/site/source/components/conversation/ChoicesInput.tsx
+++ b/site/source/components/conversation/ChoicesInput.tsx
@ -175,9 +175,9 @@ function RadioChoice<Names extends string = DottedName>({
 								/\s|\./g,
 								'_'
 							)}-${rootDottedName.replace(/\s|\./g, '_')}`}
-							css={`
-								margin-top: -1rem;
-							`}
+							style={{
+								marginTop: '-1rem',
+							}}
 						>
 							<H4 as={H3} id={node.dottedName + '-legend'}>
 								{node.title}
--- a/site/source/components/conversation/Conversation.tsx
+++ b/site/source/components/conversation/Conversation.tsx
@ -114,10 +114,10 @@ export default function Conversation({
 							ref={formRef}
 						>
 							<div
-								css={`
-									display: inline-flex;
-									align-items: baseline;
-								`}
+								style={{
+									display: 'inline-flex',
+									alignItems: 'baseline',
+								}}
 							>
 								<H3 id="questionHeader" as="h2">
 									{evaluateQuestion(engine, engine.getRule(currentQuestion))}
@ -175,10 +175,10 @@ export default function Conversation({
 									item
 									xs={12}
 									sm
-									css={`
-										justify-content: flex-end;
-										display: flex;
-									`}
+									style={{
+										justifyContent: 'flex-end',
+										display: 'flex',
+									}}
 								>
 									<SeeAnswersButton>
 										{customSituationVisualisation}
@ -224,10 +224,10 @@ export default function Conversation({
 								item
 								xs={6}
 								sm
-								css={`
-									justify-content: flex-end;
-									display: flex;
-								`}
+								style={{
+									justifyContent: 'flex-end',
+									display: 'flex',
+								}}
 							>
 								<SeeAnswersButton>
 									{customSituationVisualisation}
--- a/site/source/components/conversation/select/SelectTauxRisque.tsx
+++ b/site/source/components/conversation/select/SelectTauxRisque.tsx
@ -89,38 +89,38 @@ function SelectComponent({
 						onPress={() => submitOnChange(option)}
 						compact
 						key={JSON.stringify(option)}
-						css={`
-							padding: 0.4rem;
-							margin-top: 0.5rem;
-						`}
+						style={{
+							padding: '0.4rem',
+							marginTop: '0.5rem',
+						}}
 					>
 						<span
-							css={`
-								flex: 6;
-							`}
+							style={{
+								flex: '6',
+							}}
 						>
 							{option['Nature du risque']}
 						</span>

 						<span
-							css={`
-								flex: 2;
-								color: #333;
-								background-color: inherit;
-								font-size: 1rem;
-							`}
+							style={{
+								flex: '2',
+								color: '#333',
+								backgroundColor: 'inherit',
+								fontSize: '1rem',
+							}}
 						>
 							{formatTauxNet(option['Taux net'])}
 						</span>
 						<span
-							css={`
-								flex: 4;
-								background-color: #ddd;
-								color: #333;
-								border-radius: 0.25em;
-								padding: 0.5em;
-								text-align: center;
-							`}
+							style={{
+								flex: '4',
+								backgroundColor: '#ddd',
+								color: '#333',
+								borderRadius: '0.25em',
+								padding: '0.5em',
+								textAlign: 'center',
+							}}
 						>
 							{option['Catégorie']}
 						</span>
--- a/site/source/components/layout/Footer/InscriptionBetaTesteur/index.tsx
+++ b/site/source/components/layout/Footer/InscriptionBetaTesteur/index.tsx
@ -21,11 +21,11 @@ export default function InscriptionBetaTesteur() {
 		>
 			<img
 				src={FeedbackSvg}
-				css={`
-					height: auto !important;
-					max-width: 25rem;
-					padding-top: 2rem;
-				`}
+				style={{
+					height: 'auto',
+					maxWidth: '25rem',
+					paddingTop: '2rem',
+				}}
 				alt=""
 			/>
 			<Intro>
--- a/site/source/components/layout/Header.tsx
+++ b/site/source/components/layout/Header.tsx
@ -27,9 +27,9 @@ export default function Header() {
 	return (
 		<header
 			role="banner"
-			css={`
-				z-index: 1;
-			`}
+			style={{
+				zIndex: '1',
+			}}
 		>
 			<a href={`${fullURL}#main`} className="skip-link print-hidden">
 				{t('Aller au contenu principal')}
--- a/site/source/components/layout/NewsBanner.tsx
+++ b/site/source/components/layout/NewsBanner.tsx
@ -53,10 +53,10 @@ function NewsBanner({ lastRelease }: { lastRelease: LastRelease }) {

 	return (
 		<div
-			css={`
-				display: flex;
-				justify-content: center;
-			`}
+			style={{
+				display: 'flex',
+				justifyContent: 'center',
+			}}
 		>
 			<Message
 				className="print-hidden"
--- a/site/source/components/simulationExplanation/SalaryExplanation.tsx
+++ b/site/source/components/simulationExplanation/SalaryExplanation.tsx
@ -45,17 +45,17 @@ export default function SalaryExplanation() {
 				<div ref={payslipRef} />
 				<Grid
 					container
-					css={`
-						justify-content: center;
-					`}
+					style={{
+						justifyContent: 'center',
+					}}
 				>
 					<Grid
 						item
 						xl={9}
 						lg={10}
-						css={`
-							overflow: auto;
-						`}
+						style={{
+							overflow: 'auto',
+						}}
 					>
 						<H2>
 							<Trans>Fiche de paie</Trans>
@ -111,15 +111,15 @@ function RevenueRepartitionSection(props: { onSeePayslip: () => void }) {
 	return (
 		<section>
 			<div
-				css={`
-					display: flex;
-					align-items: baseline;
-				`}
+				style={{
+					display: 'flex',
+					alignItems: 'baseline',
+				}}
 			>
 				<H2
-					css={`
-						flex: 1;
-					`}
+					style={{
+						flex: '1',
+					}}
 				>
 					<Trans i18nKey="payslip.repartition">
 						Répartition du total chargé
--- a/site/source/components/ui/AnimatedTargetValue.tsx
+++ b/site/source/components/ui/AnimatedTargetValue.tsx
@ -56,10 +56,10 @@ export default function AnimatedTargetValue({
 			className="print-hidden"
 			aria-hidden
 			key={difference}
-			css={`
-				position: relative;
-				text-align: right;
-			`}
+			style={{
+				position: 'relative',
+				textAlign: 'right',
+			}}
 		>
 			<StyledEvaporate>
 				{formatDifference(difference ?? 0, language)}
--- a/site/source/components/ui/Checklist/index.tsx
+++ b/site/source/components/ui/Checklist/index.tsx
@ -75,9 +75,9 @@ export function CheckItem({
 					sm={10}
 					md={8}
 					lg={6}
-					css={`
-						margin-left: 2rem;
-					`}
+					style={{
+						marginLeft: '2rem',
+					}}
 				>
 					{typeof explanations === 'string' ? (
 						<Markdown>{explanations}</Markdown>
--- a/site/source/components/ui/Progress.tsx
+++ b/site/source/components/ui/Progress.tsx
@ -32,9 +32,9 @@ export default function Progress({
 	return (
 		<div
 			aria-live="polite"
-			css={`
-				position: relative;
-			`}
+			style={{
+				position: 'relative',
+			}}
 		>
 			<ProgressContainer {...progressBarProps}>
 				<ProgressBar
--- a/site/source/components/ui/Skeleton.tsx
+++ b/site/source/components/ui/Skeleton.tsx
@ -17,17 +17,18 @@ const skeletonKeyframes = keyframes`
 export default function Skeleton({ width, height }: SkeletonProps) {
 	return (
 		<span
-			css={`
-				background-color: #eee;
-				background-image: linear-gradient(90deg, #eee, #f5f5f5, #eee);
-				background-size: 200px 100%;
-				background-repeat: no-repeat;
-				border-radius: 4px;
-				display: inline-block;
-				line-height: 1;
-				animation: ${skeletonKeyframes} 1.2s ease-in-out infinite;
-			`}
-			style={{ width, height }}
+			style={{
+				backgroundColor: '#eee',
+				backgroundImage: 'linear-gradient(90deg, #eee, #f5f5f5, #eee)',
+				backgroundSize: '200px 100%',
+				backgroundRepeat: 'no-repeat',
+				borderRadius: '4px',
+				display: 'inline-block',
+				lineHeight: '1',
+				animation: `${skeletonKeyframes} 1.2s ease-in-out infinite`,
+				width,
+				height,
+			}}
 		>
 			&zwnj;
 		</span>
--- a/site/source/components/utils/colors.tsx
+++ b/site/source/components/utils/colors.tsx
@ -81,11 +81,11 @@ export function ThemeColorsProvider({ children }: ProviderProps) {
 			<div
 				ref={divRef}
 				data-js-color-element
-				css={`
-					height: 100%;
-					display: flex;
-					flex-direction: column;
-				`}
+				style={{
+					height: '100%',
+					display: 'flex',
+					flexDirection: 'column',
+				}}
 			>
 				{children}
 			</div>
--- a/site/source/components/utils/markdown.tsx
+++ b/site/source/components/utils/markdown.tsx
@ -218,33 +218,32 @@ export function HeadingWithAnchorLink({
 	)

 	return (
-		<Heading
-			id={headingId}
-			level={level}
-			css={`
-				position: relative;
-				.anchor-link {
-					display: none;
-					position: absolute;
-					top: 0;
-					left: 0;
-					transform: translateX(-100%);
-					padding-right: 6px;
-					color: var(--lighterTextColor);
-					background-color: inherit;
-					text-decoration: none;
-					font-size: 0.8em;
-				}
-				&:hover .anchor-link {
-					display: block;
-				}
-			`}
-		>
+		<StyledHeading id={headingId} level={level}>
 			{childrenWithAnchor}
-		</Heading>
+		</StyledHeading>
 	)
 }

+const StyledHeading = styled(Heading)`
+	position: relative;
+
+	.anchor-link {
+		display: none;
+		position: absolute;
+		top: 0;
+		left: 0;
+		transform: translateX(-100%);
+		padding-right: 6px;
+		color: var(--lighterTextColor);
+		background-color: inherit;
+		text-decoration: none;
+		font-size: 0.8em;
+	}
+	&:hover .anchor-link {
+		display: block;
+	}
+`
+
 type HeadingProps = {
 	level: number
 	children: React.ReactNode
--- a/site/source/design-system/answer-group/index.tsx
+++ b/site/source/design-system/answer-group/index.tsx
@ -11,10 +11,10 @@ const AnswerGroup: FunctionComponent<AnswerGroupProps> = ({
 }) => {
 	return (
 		<div
-			css={`
-				display: flex;
-				gap: 18px;
-			`}
+			style={{
+				display: 'flex',
+				gap: '18px',
+			}}
 			{...props}
 		>
 			{Children.map(children, (c, i) => (
--- a/site/source/design-system/card/Card.tsx
+++ b/site/source/design-system/card/Card.tsx
@ -72,11 +72,11 @@ export function Card(props: CardProps) {
 					<StyledHeader {...titleProps} />
 				))}
 			<div
-				css={`
-					flex: 1;
-					text-align: center;
-					width: 100%;
-				`}
+				style={{
+					flex: '1',
+					textAlign: 'center',
+					width: '100%',
+				}}
 			>
 				<Body as={bodyAs}>{children}</Body>
 			</div>
--- a/site/source/design-system/card/SmallCard.tsx
+++ b/site/source/design-system/card/SmallCard.tsx
@ -38,9 +38,9 @@ export function SmallCard({
 			<IconPlaceholder>{icon}</IconPlaceholder>
 			<Content>
 				<H6
-					css={`
-						margin: 0;
-					`}
+					style={{
+						margin: '0',
+					}}
 					{...titleProps}
 					as="span"
 				>
--- a/site/source/design-system/layout/Container.tsx
+++ b/site/source/design-system/layout/Container.tsx
@ -54,6 +54,7 @@ type ContainerProps = {
 	forceTheme?: ThemeType
 	backgroundColor?: (theme: DefaultTheme) => string
 	className?: string
+	style?: React.CSSProperties
 }

 export default function Container({
@ -61,6 +62,7 @@ export default function Container({
 	forceTheme,
 	children,
 	className,
+	style,
 }: ContainerProps) {
 	const theme = useTheme()
 	const background = useMemo(
@ -75,7 +77,11 @@ export default function Container({
 	return (
 		<ForceThemeProvider forceTheme={forceTheme}>
 			<OuterOuterContainer>
-				<OuterContainer $backgroundColor={background} className={className}>
+				<OuterContainer
+					$backgroundColor={background}
+					className={className}
+					style={style}
+				>
 					<InnerContainer>{children}</InnerContainer>
 				</OuterContainer>
 			</OuterOuterContainer>
--- a/site/source/design-system/popover/Popover.tsx
+++ b/site/source/design-system/popover/Popover.tsx
@ -75,17 +75,17 @@ export default function Popover(
 				<Container backgroundColor={() => 'transparent'}>
 					<Grid
 						container
-						css={`
-							justify-content: center;
-						`}
+						style={{
+							justifyContent: 'center',
+						}}
 					>
 						<Grid
 							item
 							sm={small ? 10 : 12}
 							md={small ? 8 : 12}
-							css={`
-								min-width: 0;
-							`}
+							style={{
+								minWidth: '0',
+							}}
 						>
 							{/* 
 								If you use an iframe in the children, be careful because you need a
--- a/site/source/pages/Offline.tsx
+++ b/site/source/pages/Offline.tsx
@ -11,7 +11,7 @@ export default function Offline() {
 	return (
 		<Grid
 			container
-			css={{ justifyContent: 'center', margin: '10rem 0' }}
+			style={{ justifyContent: 'center', margin: '10rem 0' }}
 			role="main"
 		>
 			<Grid item md={8} sm={12}>
@ -22,7 +22,7 @@ export default function Offline() {
 						'Vous êtes actuellement hors ligne.'
 					)}
 				/>
-				<Message type="info" css={{ margin: '1rem 0' }}>
+				<Message type="info" style={{ margin: '1rem 0' }}>
 					<Intro>Vous êtes actuellement hors ligne.</Intro>
 					<Body>
 						Cette page n'a pas encore été téléchargée et n'est donc pas
--- a/site/source/pages/_landing/Landing.tsx
+++ b/site/source/pages/_landing/Landing.tsx
@ -71,10 +71,10 @@ export default function Landing() {
 				<Grid
 					container
 					spacing={4}
-					css={`
-						align-items: stretch;
-						justify-content: center;
-					`}
+					style={{
+						alignItems: 'stretch',
+						justifyContent: 'center',
+					}}
 				>
 					<SimulateurCard {...simulators.salarié} />

@ -85,17 +85,17 @@ export default function Landing() {
 					<Grid
 						item
 						xs={12}
-						css={`
-							display: flex;
-						`}
+						style={{
+							display: 'flex',
+						}}
 					>
 						<Button
 							size="XL"
 							to={absoluteSitePaths.simulateursEtAssistants}
-							css={`
-								white-space: no-wrap;
-								margin: auto;
-							`}
+							style={{
+								whiteSpace: 'nowrap',
+								margin: 'auto',
+							}}
 						>
 							<Trans i18nKey="landing.choice.simulators.title">
 								Découvrir tous les simulateurs et assistants
@ -116,18 +116,18 @@ export default function Landing() {
 				<Spacing lg />
 				<Grid
 					container
-					css={`
-						align-items: flex-end;
-					`}
+					style={{
+						alignItems: 'flex-end',
+					}}
 				>
 					<HideOnMobile item xs={2} md={2}>
 						<img
 							src={illustration2Svg}
-							css={`
-								width: 100%;
-								padding-right: 2rem;
-								padding-bottom: 1rem;
-							`}
+							style={{
+								width: '100%',
+								paddingRight: '2rem',
+								paddingBottom: '1rem',
+							}}
 							alt="illustration"
 							aria-hidden
 						/>
--- a/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx
+++ b/site/source/pages/assistants/choix-du-statut/_components/Navigation.tsx
@ -45,9 +45,9 @@ export default function Navigation({
 				<Grid
 					container
 					spacing={2}
-					css={`
-						flex-wrap: wrap-reverse;
-					`}
+					style={{
+						flexWrap: 'wrap-reverse',
+					}}
 				>
 					{children && (
 						<Grid item xs={12}>
--- a/site/source/pages/assistants/choix-du-statut/comparateur.tsx
+++ b/site/source/pages/assistants/choix-du-statut/comparateur.tsx
@ -47,9 +47,9 @@ export default function Comparateur() {
 						? theme.colors.extended.dark[700]
 						: theme.colors.bases.primary[100]
 				}
-				css={`
-					padding: 2rem 0;
-				`}
+				style={{
+					padding: '2rem 0',
+				}}
 			>
 				<StatutChoice namedEngines={namedEngines} />
 				<Spacing xl />
--- a/site/source/pages/assistants/choix-du-statut/home.tsx
+++ b/site/source/pages/assistants/choix-du-statut/home.tsx
@ -58,10 +58,10 @@ export default function AccueilChoixStatut() {
 							<Grid item>
 								<SmallBody
 									grey
-									css={`
-										display: flex;
-										gap: 0.5rem;
-									`}
+									style={{
+										display: 'flex',
+										gap: '0.5rem',
+									}}
 								>
 									<ClockIcon />
 									<Trans i18nKey="choix-statut.home.estimated-duration">
@ -104,9 +104,9 @@ export default function AccueilChoixStatut() {
 			</PageHeader>
 			<Spacing xxl />
 			<div
-				css={`
-					flex: 1;
-				`}
+				style={{
+					flex: '1',
+				}}
 			></div>
 			<Container
 				backgroundColor={(theme) =>
--- a/site/source/pages/assistants/choix-du-statut/résultat.tsx
+++ b/site/source/pages/assistants/choix-du-statut/résultat.tsx
@ -70,12 +70,12 @@ export default function Résultat() {
 					<Message
 						type="info"
 						border={false}
-						css={`
-							text-align: center;
-							display: flex;
-							align-items: center;
-							height: 100%;
-						`}
+						style={{
+							textAlign: 'center',
+							display: 'flex',
+							alignItems: 'center',
+							height: '100%',
+						}}
 					>
 						<Feedback />
 						<Spacing sm />
@ -84,9 +84,9 @@ export default function Résultat() {
 				<Grid
 					item
 					xs
-					css={`
-						text-align: right;
-					`}
+					style={{
+						textAlign: 'right',
+					}}
 					xl="auto"
 				>
 					<Button
--- a/site/source/pages/assistants/declaration-charges-sociales-independant/index.tsx
+++ b/site/source/pages/assistants/declaration-charges-sociales-independant/index.tsx
@ -120,10 +120,10 @@ export default function AideDéclarationIndépendant() {
 							/>
 							<Condition expression="entreprise . date de création > 31/12/2022">
 								<SmallBody
-									css={`
-										color: #ff2d96;
-										background-color: inherit;
-									`}
+									style={{
+										color: '#ff2d96',
+										backgroundColor: 'inherit',
+									}}
 								>
 									Cette aide à la déclaration concerne uniquement les
 									entreprises déjà en activité en 2022
--- a/site/source/pages/assistants/declaration-revenu-independants/components/DéclarationRevenu.tsx
+++ b/site/source/pages/assistants/declaration-revenu-independants/components/DéclarationRevenu.tsx
@ -46,9 +46,9 @@ const RuleInputWithTitle = ({
 		<>
 			{title && (
 				<H3
-					css={`
-						margin-top: 1rem;
-					`}
+					style={{
+						marginTop: '1rem',
+					}}
 				>
 					{title}
 					<ExplicableRule dottedName={dottedName} />
@ -125,10 +125,10 @@ export function DéclarationRevenuSection({ progress }: { progress: number }) {
 				<Grid
 					container
 					spacing={3}
-					css={`
-						align-items: stretch;
-						flex-wrap: wrap-reverse;
-					`}
+					style={{
+						alignItems: 'stretch',
+						flexWrap: 'wrap-reverse',
+					}}
 				>
 					<Grid
 						item
@ -144,10 +144,10 @@ export function DéclarationRevenuSection({ progress }: { progress: number }) {
 						<Message border={false}>
 							<Grid
 								container
-								css={`
-									align-items: center;
-									justify-content: space-between;
-								`}
+								style={{
+									alignItems: 'center',
+									justifyContent: 'space-between',
+								}}
 								spacing={1}
 							>
 								<SimpleField dottedName="DRI . déclarant" />
@ -164,9 +164,9 @@ export function DéclarationRevenuSection({ progress }: { progress: number }) {

 							<Grid
 								xs={12}
-								css={`
-									text-align: center;
-								`}
+								style={{
+									textAlign: 'center',
+								}}
 								item
 							>
 								<Button
@ -189,11 +189,11 @@ export function DéclarationRevenuSection({ progress }: { progress: number }) {
 					{!déclarationRevenusManuel && (
 						<Grid item lg={4} xl={5}>
 							<div
-								css={`
-									position: sticky !important;
-									top: 1rem;
-									padding-bottom: 0.001rem;
-								`}
+								style={{
+									position: 'sticky',
+									top: '1rem',
+									paddingBottom: '0.001rem',
+								}}
 							>
 								<Message type="info" border={false}>
 									<Body>
@ -262,9 +262,9 @@ export function DéclarationRevenu({
 							<H3>{rule.title}</H3>
 						) : (
 							<H4
-								css={`
-									margin-top: 0rem;
-								`}
+								style={{
+									marginTop: '0rem',
+								}}
 							>
 								{rule.title}
 							</H4>
--- a/site/source/pages/assistants/declaration-revenu-independants/components/NotHandledCase.tsx
+++ b/site/source/pages/assistants/declaration-revenu-independants/components/NotHandledCase.tsx
@ -20,20 +20,20 @@ export default function NotHandledCase({
 		<Message type="info">
 			<Grid
 				container
-				css={`
-					justify-content: center;
-					align-items: center;
-				`}
+				style={{
+					justifyContent: 'center',
+					alignItems: 'center',
+				}}
 				spacing={3}
 			>
 				<ReverseOrderOnMobile item xs={6} md={3}>
 					<img
 						src={notHandled}
 						alt=""
-						css={`
-							width: 100%;
-							padding: 1rem;
-						`}
+						style={{
+							width: '100%',
+							padding: '1rem',
+						}}
 					/>
 				</ReverseOrderOnMobile>
 				<Grid item md={9}>
--- a/site/source/pages/assistants/declaration-revenu-independants/cotisations.tsx
+++ b/site/source/pages/assistants/declaration-revenu-independants/cotisations.tsx
@ -80,11 +80,11 @@ export default function Cotisations() {
 									</div>
 									<Message border={false}>
 										<div
-											css={`
-												position: relative;
-												top: -1px;
-												margin: 0 -1.5rem;
-											`}
+											style={{
+												position: 'relative',
+												top: '-1px',
+												margin: '0 -1.5rem',
+											}}
 										>
 											<Progress
 												progress={numberCurrentStep}
@ -93,9 +93,9 @@ export default function Cotisations() {
 										</div>

 										<div
-											css={`
-												margin: -0.75rem 0;
-											`}
+											style={{
+												margin: '-0.75rem 0',
+											}}
 										>
 											<Conversation
 												customSituationVisualisation={
--- a/site/source/pages/assistants/declaration-revenu-independants/declaration.tsx
+++ b/site/source/pages/assistants/declaration-revenu-independants/declaration.tsx
@ -63,9 +63,9 @@ export default function Déclaration() {
 					<Grid
 						container
 						spacing={2}
-						css={`
-							align-items: flex-end;
-						`}
+						style={{
+							alignItems: 'flex-end',
+						}}
 					>
 						<Grid item lg={10} xl={8}>
 							<FromTop>
@ -298,9 +298,9 @@ function LiasseFiscale() {
 				return section === 'oui' ? (
 					<Grid item xs={12} key={dottedName}>
 						<H3
-							css={`
-								margin-bottom: 0rem;
-							`}
+							style={{
+								marginBottom: '0rem',
+							}}
 						>
 							{rule.title}
 						</H3>
--- a/site/source/pages/assistants/declaration-revenu-independants/entreprise.tsx
+++ b/site/source/pages/assistants/declaration-revenu-independants/entreprise.tsx
@ -184,9 +184,9 @@ export default function Accueil() {
 									</Ul>
 								</Trans>
 								<div
-									css={`
-										text-align: center;
-									`}
+									style={{
+										textAlign: 'center',
+									}}
 								>
 									<Spacing lg />
 									<Button
--- a/site/source/pages/assistants/declaration-revenu-independants/imposition.tsx
+++ b/site/source/pages/assistants/declaration-revenu-independants/imposition.tsx
@ -342,9 +342,9 @@ function ResultSection() {
 							<WhenNotApplicable dottedName="DRI . imposition cas exclus">
 								<Spacing md />
 								<div
-									css={`
-										text-align: center;
-									`}
+									style={{
+										textAlign: 'center',
+									}}
 								>
 									<Button
 										to={
@ -380,9 +380,9 @@ function ResultSection() {
 											déclaration de revenu.
 										</SmallBody>
 										<div
-											css={`
-												text-align: center;
-											`}
+											style={{
+												textAlign: 'center',
+											}}
 										>
 											<Button
 												light
@ -416,9 +416,9 @@ function ResultSection() {
 								<Spacing sm />

 								<div
-									css={`
-										text-align: center;
-									`}
+									style={{
+										textAlign: 'center',
+									}}
 								>
 									<Button
 										light
@ -468,9 +468,9 @@ function ResultSection() {
 								</Body>

 								<Body
-									css={`
-										text-align: center;
-									`}
+									style={{
+										textAlign: 'center',
+									}}
 								>
 									<Button
 										light
--- a/site/source/pages/assistants/demande-mobilité/EndBlock.tsx
+++ b/site/source/pages/assistants/demande-mobilité/EndBlock.tsx
@ -104,11 +104,11 @@ export default function EndBlock({ fields, missingValues }: EndBlockProps) {
 						Signez ci dessous en utilisant la totalité de l'espace :{' '}
 					</SmallBody>
 					<div
-						css={`
-							border: 1px solid ${colors.bases.primary[700]};
-							border-radius: 0.3rem;
-							position: relative;
-						`}
+						style={{
+							border: `1px solid ${colors.bases.primary[700]}`,
+							borderRadius: '0.3rem',
+							position: 'relative',
+						}}
 					>
 						<SignaturePad
 							height={200}
@ -117,9 +117,9 @@ export default function EndBlock({ fields, missingValues }: EndBlockProps) {
 						/>
 					</div>
 					<div
-						css={`
-							text-align: right;
-						`}
+						style={{
+							textAlign: 'right',
+						}}
 					>
 						<Link onPress={() => signatureRef.current?.clear()}>
 							<Emoji emoji="🗑️" /> Recommencer{' '}
--- a/site/source/pages/assistants/demande-mobilité/index.tsx
+++ b/site/source/pages/assistants/demande-mobilité/index.tsx
@ -154,10 +154,10 @@ function FormulairePublicodes() {
 									<WhenApplicable dottedName={dottedName as DottedName}>
 										<Grid item xs={12}>
 											<SmallBody
-												css={`
-													color: #ff2d96;
-													background-color: inherit;
-												`}
+												style={{
+													color: '#ff2d96',
+													backgroundColor: 'inherit',
+												}}
 											>
 												{description}
 											</SmallBody>
@ -176,9 +176,9 @@ function FormulairePublicodes() {
 									>
 										{question && (
 											<div
-												css={`
-													margin-top: -1rem;
-												`}
+												style={{
+													marginTop: '-1rem',
+												}}
 											>
 												{' '}
 												<Markdown>
@ -220,9 +220,9 @@ function FormulairePublicodes() {

 			{!!Object.keys(situation).length && (
 				<div
-					css={`
-						text-align: right;
-					`}
+					style={{
+						textAlign: 'right',
+					}}
 				>
 					<PopoverConfirm
 						small
--- a/site/source/pages/assistants/pour-mon-entreprise/index.tsx
+++ b/site/source/pages/assistants/pour-mon-entreprise/index.tsx
@ -155,9 +155,9 @@ function PourMonEntreprise() {
 					<Grid
 						container
 						spacing={3}
-						css={`
-							position: relative;
-						`}
+						style={{
+							position: 'relative',
+						}}
 					>
 						<CurrentSimulatorCard fromGérer />

@ -173,9 +173,9 @@ function PourMonEntreprise() {
 								xs={12}
 								md={6}
 								lg={4}
-								css={`
-									align-self: flex-end;
-								`}
+								style={{
+									alignSelf: 'flex-end',
+								}}
 							>
 								<Grid container spacing={3} columns={2}>
 									<SimulateurCard fromGérer {...simulateurs.is} small />
@ -283,9 +283,9 @@ const AskCompanyMissingDetails = () => {
 			{!!questions.length && (
 				<>
 					<Body
-						css={`
-							margin-bottom: -0.5rem;
-						`}
+						style={{
+							marginBottom: '-0.5rem',
+						}}
 					>
 						Répondez aux questions suivantes pour découvrir les simulateurs et
 						assistants adaptés à votre situation :
@ -346,9 +346,9 @@ const PopoverOverwriteSituation = ({
 				</Message>
 				<Grid
 					container
-					css={`
-						justify-content: end;
-					`}
+					style={{
+						justifyContent: 'end',
+					}}
 					spacing={2}
 				>
 					<Grid item>
--- a/site/source/pages/assistants/recherche-code-ape/Result.tsx
+++ b/site/source/pages/assistants/recherche-code-ape/Result.tsx
@ -37,10 +37,10 @@ export const Result = ({ item, hideGuichetUnique }: ResultProps) => {
 			<SmallBody>
 				<Grid
 					container
-					css={`
-						align-items: center;
-						justify-content: space-between;
-					`}
+					style={{
+						alignItems: 'center',
+						justifyContent: 'space-between',
+					}}
 				>
 					<Grid item>
 						<Chip>Code : {codeApe}</Chip>
--- a/site/source/pages/assistants/économie-collaborative/ActiviteCard/index.tsx
+++ b/site/source/pages/assistants/économie-collaborative/ActiviteCard/index.tsx
@ -65,11 +65,11 @@ export const ActiviteCard = ({
 		>
 			{selected !== undefined && (
 				<div
-					css={`
-						transform: scale(1.15);
-						margin-bottom: -1rem;
-						margin-left: 0.75rem;
-					`}
+					style={{
+						transform: 'scale(1.15)',
+						marginBottom: '-1rem',
+						marginLeft: '0.75rem',
+					}}
 					{...pressProps}
 				>
 					<Checkbox
@ -89,9 +89,9 @@ export const ActiviteCard = ({
 					<Body>{explication}</Body>
 				</HelpButtonWithPopover>
 				<SmallBody
-					css={`
-						flex: 1;
-					`}
+					style={{
+						flex: '1',
+					}}
 				>
 					{plateformes.join(', ')}
 				</SmallBody>
--- a/site/source/pages/assistants/économie-collaborative/NextButton.tsx
+++ b/site/source/pages/assistants/économie-collaborative/NextButton.tsx
@ -29,9 +29,9 @@ export default function NextButton({ activité, disabled }: NextButtonProps) {
 				isDisabled={disabled}
 				onPress={() => dispatch?.(activitéVue(activité))}
 				to={nextTo}
-				css={`
-					margin: auto;
-				`}
+				style={{
+					margin: 'auto',
+				}}
 			>
 				{nextActivité || disabled ? (
 					<Trans>Continuer</Trans>
--- a/site/source/pages/budget/index.tsx
+++ b/site/source/pages/budget/index.tsx
@ -99,9 +99,9 @@ export default function Budget() {
 			{selectedYear !== '2019' && (
 				<>
 					<div
-						css={`
-							overflow-x: auto;
-						`}
+						style={{
+							overflowX: 'auto',
+						}}
 					>
 						<RessourcesAllocationTable role="table">
 							<caption className="sr-only">
--- a/site/source/pages/dev/IntegrationTest.tsx
+++ b/site/source/pages/dev/IntegrationTest.tsx
@ -64,10 +64,10 @@ export default function IntegrationTest() {
 			</Button>

 			<div
-				style={{ border: '2px dashed blue' }}
-				css={`
-					display: ${version > 0 ? 'block' : 'none'};
-				`}
+				style={{
+					border: '2px dashed blue',
+					display: version > 0 ? 'block' : 'none',
+				}}
 			>
 				<div ref={domNode} />
 			</div>
--- a/site/source/pages/integration/API.tsx
+++ b/site/source/pages/integration/API.tsx
@ -83,9 +83,9 @@ export default function API() {
 				</Body>

 				<div
-					css={`
-						text-align: center;
-					`}
+					style={{
+						textAlign: 'center',
+					}}
 				>
 					<iframe
 						css="width:100%; max-width: 1200px; height:500px; border:0; border-radius: 4px; overflow:hidden;"
--- a/site/source/pages/integration/Iframe.tsx
+++ b/site/source/pages/integration/Iframe.tsx
@ -22,7 +22,6 @@ import './iframe.css'

 import { Button } from '@/design-system/buttons'
 import { Select } from '@/design-system/field/Select'
-import { useDarkMode } from '@/hooks/useDarkMode'

 import cciLogo from './images/cci.png'
 import minTraLogo from './images/min-tra.jpg'
@ -106,9 +105,9 @@ function IntegrationCustomizer() {
 			<Grid
 				container
 				spacing={4}
-				css={`
-					justify-content: space-between;
-				`}
+				style={{
+					justifyContent: 'space-between',
+				}}
 			>
 				<Grid item xl={4} lg={5} md>
 					<H3>
@ -349,7 +348,6 @@ function IntegrationCode({
 	color,
 }: IntegrationCodeProps) {
 	const { t } = useTranslation()
-	const [darkMode] = useDarkMode()

 	const codeRef = useRef<HTMLDivElement>(null)
 	const [copied, setCopied] = useState(false)
@ -377,27 +375,7 @@ function IntegrationCode({
 	}, [module, color])

 	return (
-		<div
-			css={`
-				display: block;
-				position: relative;
-				font-size: 80%;
-				padding: 1em;
-				margin: auto auto 1em;
-				background: ${darkMode ? '#484848' : '#f8f8f8'};
-				overflow: auto;
-				line-height: 1.6em;
-				box-shadow:
-					0 1px 1px rgba(0, 0, 0, 0.05),
-					-1px 1px 1px rgba(0, 0, 0, 0.02);
-
-				em {
-					font-weight: 300;
-					color: ${darkMode ? 'white' : 'black'};
-					background-color: inherit;
-				}
-			`}
-		>
+		<StyledDiv>
 			<code ref={codeRef}>
 				<span>{'<'}</span>
 				<em>script</em>
@ -423,13 +401,13 @@ function IntegrationCode({
 				<span>{'>'}</span>
 			</code>
 			<div
-				css={`
-					display: block;
-					right: 0;
-					top: 0;
-					position: absolute;
-					margin: 8px;
-				`}
+				style={{
+					display: 'block',
+					right: '0',
+					top: '0',
+					position: 'absolute',
+					margin: '8px',
+				}}
 			>
 				<Button
 					size="XXS"
@ -449,6 +427,26 @@ function IntegrationCode({
 					<Emoji emoji={copied ? '✔️' : '📑'} />
 				</Button>
 			</div>
-		</div>
+		</StyledDiv>
 	)
 }
+
+const StyledDiv = styled.div`
+	display: block;
+	right: 0;
+	top: 0;
+	position: absolute;
+	margin: 8px;
+	background: ${({ theme }) => (theme.darkMode ? '#484848' : '#f8f8f8')};
+	overflow: auto;
+	line-height: 1.6em;
+	box-shadow:
+		0 1px 1px rgba(0, 0, 0, 0.05),
+		-1px 1px 1px rgba(0, 0, 0, 0.02);
+
+	em {
+		font-weight: 300;
+		color: ${({ theme }) => (theme.darkMode ? 'white' : 'black')};
+		background-color: inherit;
+	}
+`
--- a/site/source/pages/integration/Library.tsx
+++ b/site/source/pages/integration/Library.tsx
@ -85,9 +85,9 @@ export default function Library() {
 					valeur. Voici un exemple pour le calcul brut / net
 				</Body>
 				<div
-					css={`
-						text-align: center;
-					`}
+					style={{
+						textAlign: 'center',
+					}}
 				>
 					<iframe
 						src="https://codesandbox.io/embed/zen-keller-2dpct?fontsize=14&hidenavigation=1&theme=dark"
@ -186,9 +186,9 @@ export default function Library() {
 					bas salaires.
 				</Body>
 				<div
-					css={`
-						text-align: center;
-					`}
+					style={{
+						textAlign: 'center',
+					}}
 				>
 					<iframe
 						src="https://codesandbox.io/embed/mon-entreprise-exemple-3-4j11c?fontsize=14&hidenavigation=1&theme=dark"
--- a/site/source/pages/simulateurs/auto-entrepreneur/AutoEntrepreneur.tsx
+++ b/site/source/pages/simulateurs/auto-entrepreneur/AutoEntrepreneur.tsx
@ -113,9 +113,9 @@ export const SeoExplanations = () => (
 			role="presentation"
 			mini
 			border={false}
-			css={`
-				width: fit-content;
-			`}
+			style={{
+				width: 'fit-content',
+			}}
 		>
 			Revenu net = Chiffres d'affaires − Cotisations sociales − Dépenses
 			professionnelles
--- a/site/source/pages/simulateurs/chômage-partiel/ChômagePartiel.tsx
+++ b/site/source/pages/simulateurs/chômage-partiel/ChômagePartiel.tsx
@ -45,9 +45,9 @@ export default function ChômagePartiel() {
 			<Grid
 				container
 				spacing={2}
-				css={`
-					justify-content: center;
-				`}
+				style={{
+					justifyContent: 'center',
+				}}
 			>
 				<Grid item xl={9} lg={10} md={11} sm={12}>
 					{' '}
@ -200,10 +200,10 @@ function ExplanationSection() {
 	return (
 		<FromTop>
 			<div
-				css={`
-					overflow: hidden;
-					margin: 1rem 0;
-				`}
+				style={{
+					overflow: 'hidden',
+					margin: '1rem 0',
+				}}
 			>
 				<ComparaisonTable
 					rows={[
@ -345,9 +345,9 @@ function ComparaisonTable({ rows: [head, ...body] }: ComparaisonTableProps) {
 									<ValueWithLink {...cell} />
 									{cell.additionalText && (
 										<p
-											css={`
-												text-align: right;
-											`}
+											style={{
+												textAlign: 'right',
+											}}
 										>
 											{cell.additionalText}
 										</p>
@ -384,9 +384,9 @@ function RowLabel({ dottedName }: { dottedName: DottedName }) {
 		<>
 			{' '}
 			<div
-				css={`
-					font-weight: bold;
-				`}
+				style={{
+					fontWeight: 'bold',
+				}}
 			>
 				{target.title}
 			</div>
--- a/site/source/pages/simulateurs/comparaison-statuts/components/Comparateur.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/Comparateur.tsx
@ -64,16 +64,16 @@ function Comparateur({ namedEngines }: { namedEngines: EngineComparison }) {
 						? theme.colors.extended.dark[700]
 						: theme.colors.bases.primary[100]
 				}
-				css={`
-					padding: 1rem 0;
-				`}
+				style={{
+					padding: '1rem 0',
+				}}
 			>
 				<StatutChoice namedEngines={namedEngines} hideCTA />
 				<div
-					css={`
-						text-align: right;
-						padding-top: 1rem;
-					`}
+					style={{
+						textAlign: 'right',
+						paddingTop: '1rem',
+					}}
 				>
 					<ModifierOptions namedEngines={namedEngines} />
 				</div>
--- a/site/source/pages/simulateurs/comparaison-statuts/components/Détails.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/Détails.tsx
@ -224,9 +224,9 @@ const Détails = ({
 					hasChildItems={false}
 				>
 					<Body
-						css={`
-							margin-bottom: 0;
-						`}
+						style={{
+							marginBottom: '0',
+						}}
 					>
 						<Trans>
 							Tous les statuts vous ouvrent le droit au{' '}
@ -264,9 +264,9 @@ const Détails = ({
 								<WarningTooltip
 									tooltip={
 										<span
-											css={`
-												font-weight: normal;
-											`}
+											style={{
+												fontWeight: 'normal',
+											}}
 										>
 											<Trans>
 												Votre <Strong>rémunération</Strong> est{' '}
@ -286,14 +286,14 @@ const Détails = ({
 							>
 								<StyledDiv>
 									<PlusCircleIcon
-										css={`
-											margin-top: 0 !important;
-										`}
+										style={{
+											marginTop: '0 !important',
+										}}
 									/>
 									<Body
-										css={`
-											margin: 0;
-										`}
+										style={{
+											margin: '0',
+										}}
 									>
 										<Trans>
 											Pour y prétendre, vous devez voir cotisé au moins{' '}
@ -341,9 +341,9 @@ const Détails = ({
 					hasChildItems={false}
 				>
 					<Body
-						css={`
-							margin-bottom: 0;
-						`}
+						style={{
+							marginBottom: '0',
+						}}
 					>
 						<Trans>
 							Tous les statuts vous ouvrent le droit aux{' '}
@ -352,9 +352,9 @@ const Détails = ({
 						</Trans>
 					</Body>
 					<Body
-						css={`
-							margin-top: 0;
-						`}
+						style={{
+							marginTop: '0',
+						}}
 					>
 						<Trans>
 							Pour y prétendre, vous devez avoir cotisé{' '}
@ -445,9 +445,9 @@ const Détails = ({
 						</Trans>
 					</BodyNoMargin>
 					<BodyNoMargin
-						css={`
-							margin-bottom: 1rem;
-						`}
+						style={{
+							marginBottom: '1rem',
+						}}
 					>
 						<Trans>
 							Pour y prétendre, vous devez respecter{' '}
--- a/site/source/pages/simulateurs/comparaison-statuts/components/ModifierOptions.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/ModifierOptions.tsx
@ -207,26 +207,26 @@ const ModifierOptions = ({
 				<Message type="secondary">
 					<Grid
 						container
-						css={`
-							flex-wrap: nowrap;
-							align-items: baseline;
-						`}
+						style={{
+							flexWrap: 'nowrap',
+							alignItems: 'baseline',
+						}}
 						spacing={3}
 					>
 						<Grid item>
 							<InfoIcon
-								css={`
-									padding-top: 0.15rem;
-									display: inline-block;
-								`}
+								style={{
+									paddingTop: '0.15rem',
+									display: 'inline-block',
+								}}
 								aria-label={t('Message à caractère informatif')}
 							/>
 						</Grid>
 						<Grid item>
 							<Body
-								css={`
-									font-size: 0.875rem;
-								`}
+								style={{
+									fontSize: '0.875rem',
+								}}
 							>
 								<Trans>
 									À ce jour, ce comparateur ne prend pas en compte le calcul de
--- a/site/source/pages/simulateurs/comparaison-statuts/components/RevenuEstimé.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/RevenuEstimé.tsx
@ -17,17 +17,17 @@ const RevenuEstimé = () => {

 	return (
 		<CardContainer
-			css={`
-				padding: 1.5rem !important;
-			`}
+			style={{
+				padding: '1.5rem !important',
+			}}
 			$inert
 		>
 			<Grid container>
 				<WhenAlreadyDefined dottedName="entreprise . chiffre d'affaires">
 					<Grid
-						css={`
-							padding-right: 1.5rem;
-						`}
+						style={{
+							paddingRight: '1.5rem',
+						}}
 						item
 						xs={12}
 						sm={6}
@ -68,10 +68,10 @@ const RevenuEstimé = () => {
 					<Link
 						to={absoluteSitePaths.assistants['choix-du-statut'].rémunération}
 						// $noUnderline
-						css={`
-							display: inline-flex;
-							align-items: center;
-						`}
+						style={{
+							display: 'inline-flex',
+							alignItems: 'center',
+						}}
 					>
 						<StyledEditIcon /> Modifier les informations
 					</Link>
--- a/site/source/pages/simulateurs/comparaison-statuts/components/RevenuTable.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/RevenuTable.tsx
@ -41,9 +41,9 @@ export default function RevenuTable({
 						<tr>
 							<th scope="row">
 								<Minus
-									css={`
-										opacity: 0;
-									`}
+									style={{
+										opacity: '0',
+									}}
 									aria-hidden
 								>
 									-
@ -100,9 +100,9 @@ export default function RevenuTable({
 						<tr>
 							<th scope="row">
 								<Minus
-									css={`
-										opacity: 0;
-									`}
+									style={{
+										opacity: '0',
+									}}
 									aria-hidden
 								>
 									-
@ -175,9 +175,9 @@ export default function RevenuTable({
 						<tr>
 							<th scope="row">
 								<Minus
-									css={`
-										opacity: 0;
-									`}
+									style={{
+										opacity: '0',
+									}}
 									aria-hidden
 								>
 									-
--- a/site/source/pages/simulateurs/comparaison-statuts/components/StatusCard.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/StatusCard.tsx
@ -41,9 +41,9 @@ const StatusCard = ({
 				<Tooltip
 					tooltip={
 						<StyledBodyTooltip
-							css={`
-								font-weight: normal;
-							`}
+							style={{
+								fontWeight: 'normal',
+							}}
 						>
 							<Trans>Option la plus avantageuse.</Trans>
 						</StyledBodyTooltip>
--- a/site/source/pages/simulateurs/comparaison-statuts/components/StatutChoice.tsx
+++ b/site/source/pages/simulateurs/comparaison-statuts/components/StatutChoice.tsx
@ -69,9 +69,9 @@ function StatutBloc({
 			footerContent={
 				!hideCTA && (
 					<div
-						css={`
-							text-align: center;
-						`}
+						style={{
+							textAlign: 'center',
+						}}
 					>
 						<Button
 							to={
@ -87,12 +87,12 @@ function StatutBloc({
 		>
 			<H4 as="h3">{TAG_DATA[name].longName}</H4>
 			<Ul
-				css={`
-					display: flex;
-					flex: 1;
-					margin-bottom: 0;
-					flex-direction: column;
-				`}
+				style={{
+					display: 'flex',
+					flex: '1',
+					marginBottom: '0',
+					flexDirection: 'column',
+				}}
 			>
 				<Li>
 					{versementLibératoire ? (
--- a/site/source/pages/simulateurs/dividendes/Dividendes.tsx
+++ b/site/source/pages/simulateurs/dividendes/Dividendes.tsx
@ -113,10 +113,10 @@ const DividendesExplanation = () => {
 		<Condition expression="bénéficiaire . dividendes . bruts > 0">
 			<section id="simulateur-dividendes-section-total">
 				<div
-					css={`
-						display: flex;
-						align-items: baseline;
-					`}
+					style={{
+						display: 'flex',
+						alignItems: 'baseline',
+					}}
 				>
 					<H2>
 						<Trans i18nKey="payslip.repartition">
--- a/site/source/pages/simulateurs/impot-societe/index.tsx
+++ b/site/source/pages/simulateurs/impot-societe/index.tsx
@ -150,9 +150,9 @@ function Explanations() {
 				</Intro>
 				<Body
 					className="notice"
-					css={`
-						margin-top: -1rem;
-					`}
+					style={{
+						marginTop: '-1rem',
+					}}
 				>
 					<Trans>Montant de l'impôt sur les sociétés</Trans>
 				</Body>
--- a/site/source/pages/simulateurs/indépendant/Indépendant.tsx
+++ b/site/source/pages/simulateurs/indépendant/Indépendant.tsx
@ -79,9 +79,9 @@ export const SeoExplanationsEI = () => (
 			role="presentation"
 			mini
 			border={false}
-			css={`
-				width: fit-content;
-			`}
+			style={{
+				width: 'fit-content',
+			}}
 		>
 			Revenu net = Chiffres d'affaires − Dépenses professionnelles - Cotisations
 			sociales
--- a/site/source/pages/statistiques/Chart.tsx
+++ b/site/source/pages/statistiques/Chart.tsx
@ -16,7 +16,7 @@ import {
 	XAxis,
 	YAxis,
 } from 'recharts'
-import { useTheme } from 'styled-components'
+import { styled, useTheme } from 'styled-components'

 import { StyledLegend } from '@/components/charts/PagesCharts'
 import { Strong } from '@/design-system/typography'
@ -106,14 +106,7 @@ export default function VisitsChart({
 	): ReactElement => <ComposedChart {...props} />

 	return (
-		<Body
-			as="div"
-			css={`
-				svg {
-					overflow: visible;
-				}
-			`}
-		>
+		<Body as="div">
 			<RealResponsiveContainer width="100%" height={500}>
 				<ComposedChartWithRole
 					layout={layout}
@ -210,7 +203,7 @@ export default function VisitsChart({
 export const RealResponsiveContainer = (
 	props: ComponentProps<typeof ResponsiveContainer>
 ) => (
-	<div
+	<StyledDiv
 		style={{
 			width: props.width,
 			height: props.height,
@ -229,9 +222,13 @@ export const RealResponsiveContainer = (
 		>
 			<ResponsiveContainer {...props} width="100%" height="100%" />
 		</div>
-	</div>
+	</StyledDiv>
 )
-
+const StyledDiv = styled.div`
+	svg {
+		overflow: visible;
+	}
+`
 function formatDay(date: string | Date) {
 	return new Date(date).toLocaleString('default', {
 		day: '2-digit',
--- a/site/source/pages/statistiques/StatsDetail.tsx
+++ b/site/source/pages/statistiques/StatsDetail.tsx
@ -93,9 +93,9 @@ export const StatsDetail = ({ stats, accessibleMode }: StatsDetailProps) => {

 			<Indicators>
 				<div
-					css={`
-						flex-basis: 50%;
-					`}
+					style={{
+						flexBasis: '50%',
+					}}
 				>
 					<SimulateursChoice onChange={setFilter} value={filter} />
 					<Spacing sm />
--- a/site/source/pages/statistiques/StatsGlobal.tsx
+++ b/site/source/pages/statistiques/StatsGlobal.tsx
@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import { useLocation } from 'react-router-dom'
+import { styled } from 'styled-components'

 import { Emoji } from '@/design-system/emoji'
 import { Grid, Spacing } from '@/design-system/layout'
@ -36,34 +37,31 @@ const RetoursAsProgress = ({
 	return (
 		<ul
 			className="progress__container"
-			css={`
-				width: 100%;
-				overflow: hidden;
-				height: 2.5rem;
-				border-radius: 3px;
-				margin-top: 1rem;
-				margin-bottom: 2.5rem;
-				display: flex;
-				font-size: 1.8rem;
-				padding: 0;
-			`}
+			style={{
+				width: '100%',
+				overflow: 'hidden',
+				height: '2.5rem',
+				borderRadius: '3px',
+				marginTop: '1rem',
+				marginBottom: '2.5rem',
+				display: 'flex',
+				fontSize: '1.8rem',
+				padding: '0',
+			}}
 		>
 			{' '}
 			{SatisfactionStyle.map(([level, { emoji: emojiStr, color }]) => {
 				return (
-					<li
+					<StyledLi
 						key={level}
-						css={`
-							width: ${percentages[level]}%;
-							background-color: ${color};
-							display: flex;
-							align-items: center;
-							justify-content: center;
-							border-left: solid 2px white;
-							&:first-child {
-								border-left: none;
-							}
-						`}
+						style={{
+							width: `${percentages[level]}%`,
+							backgroundColor: `${color}`,
+							display: 'flex',
+							alignItems: 'center',
+							justifyContent: 'center',
+							borderLeft: 'solid 2px white',
+						}}
 					>
 						<Emoji
 							emoji={emojiStr}
@ -71,22 +69,28 @@ const RetoursAsProgress = ({
 							alt={mappedLevelToLabel[level]}
 						/>
 						<div
-							css={`
-								position: absolute;
-								margin-top: 4rem;
-								font-size: 0.7rem;
-								font-weight: lighter;
-							`}
+							style={{
+								position: 'absolute',
+								marginTop: '4rem',
+								fontSize: '0.7rem',
+								fontWeight: 'lighter',
+							}}
 						>
 							{Math.round(percentages[level])}%
 						</div>
-					</li>
+					</StyledLi>
 				)
 			})}
 		</ul>
 	)
 }

+const StyledLi = styled.li`
+	&:first-child {
+		border-left: none;
+	}
+`
+
 interface GlobalStatsProps {
 	stats: StatsStruct
 }
--- a/site/vite.config.ts
+++ b/site/vite.config.ts
@ -58,18 +58,7 @@ export default defineConfig(({ command, mode }) => ({
 				preventAssignment: false,
 			}),

-		react({
-			plugins: [
-				[
-					'@swc/plugin-styled-components',
-					{
-						pure: true,
-						displayName: true,
-						transpileTemplateLiterals: false,
-					},
-				],
-			],
-		}),
+		react(),

 		yaml({
 			transform(data, filePath) {
--- a/yarn.lock
+++ b/yarn.lock
@ -11047,13 +11047,6 @@ __metadata:
  languageName: node
  linkType: hard

-"@swc/plugin-styled-components@npm:^1.5.76":
-  version: 1.5.76
-  resolution: "@swc/plugin-styled-components@npm:1.5.76"
-  checksum: 13af300558b29ccb45ef92ab51f9816bb2842ea6b156e8b538f384e8bc8e26f2166cfb0fe720105e5c77fb2010c991693e87b7d61065468800eef6b2679c6e49
-  languageName: node
-  linkType: hard
-
 "@szmarczak/http-timer@npm:^4.0.5":
  version: 4.0.6
  resolution: "@szmarczak/http-timer@npm:4.0.6"
@ -28179,7 +28172,6 @@ __metadata:
    "@storybook/react": ^7.0.5
    "@storybook/react-vite": ^7.0.5
    "@storybook/testing-library": ^0.1.0
-    "@swc/plugin-styled-components": ^1.5.76
    "@types/history": ^5.0.0
    "@types/react": ^18.2.21
    "@types/react-dom": ^18.2.7