Migrate just <Section> to Linaria as a test

pimterry · pimterry · commit a8af6280e0fe · 2026-03-04T13:53:02.000+01:00
diff --git a/next.config.js b/next.config.js
@@ -1,3 +1,4 @@
+const withLinaria = require('next-with-linaria');
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true',
 });
@@ -45,4 +46,4 @@ const nextConfig = {
   },
 };
 
-module.exports = withBundleAnalyzer(nextConfig);
+module.exports = withBundleAnalyzer(withLinaria(nextConfig));
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,10 +28,14 @@
     "@docsearch/react": "^3.6.0",
     "@httptoolkit/accounts": "^3.0.1",
     "@httptoolkit/util": "^0.1.5",
+    "@linaria/core": "^7.0.0",
+    "@linaria/react": "^7.0.1",
     "@phosphor-icons/react": "^2.1.4",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@wyw-in-js/babel-preset": "^1.0.6",
+    "@wyw-in-js/transform": "^1.0.6",
     "core-js": "^3.47.0",
     "date-fns": "^1.29.0",
     "fs-extra": "^6.0.0",
@@ -45,6 +49,7 @@
     "next-mdx-remote": "^4.4.1",
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.2.1",
+    "next-with-linaria": "^1.3.0",
     "posthog-js": "^1.188.1",
     "prismjs": "^1.27.0",
     "react": "^18.2.0",
diff --git a/src/components/elements/section/index.tsx b/src/components/elements/section/index.tsx
@@ -1,4 +1,17 @@
-import { StyledSection } from './section.styles';
+import { styled } from '@linaria/react';
+
+import { screens } from '@/styles/tokens';
+
+const StyledSection = styled.section`
+  position: relative;
+  padding-top: 32px;
+  padding-bottom: 32px;
+
+  @media (min-width: ${screens['2xl']}) {
+    padding-top: 96px;
+    padding-bottom: 96px;
+  }
+`;
 
 export const Section = ({ children, className }: Component) => {
   return <StyledSection className={className}>{children}</StyledSection>;
diff --git a/src/components/elements/section/section.styles.ts b/src/components/elements/section/section.styles.ts
diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -2,14 +2,15 @@ import styled, { createGlobalStyle, css, keyframes } from 'styled-components';
 
 export { createGlobalStyle, css, keyframes, styled };
 
-export const screens = {
-  content: '662px',
-  sm: '640px',
-  md: '768px',
-  lg: '1024px',
-  xl: '1280px',
-  '2xl': '1440px',
-};
+export {
+  screens,
+  textColors,
+  fontWeight,
+  fontSizes,
+  lineHeight,
+  letterSpacing,
+} from './tokens';
+export type { TextColor, FontWeight, FontSize } from './tokens';
 
 export const textGradientMixin = css`
   background: var(--text-gradient);
@@ -23,73 +24,6 @@ export const textOrangeGradientMixin = css`
   -webkit-text-fill-color: transparent;
 `;
 
-export const textColors = {
-  lightGrey: 'var(--text-light-grey)',
-  darkGrey: 'var(--text-dark-grey)',
-  cinnabarRed: 'var(--text-cinnabar-red)',
-  white: 'var(--text-white)',
-  alwaysWhite: 'var(--text-always-white)',
-  alwaysLightGrey: 'var(--text-always-light-grey)',
-  electricLightBlue: 'var(--text-electric-light-blue)',
-} as const;
-
-export const fontWeight = {
-  light: '300',
-  normal: '400',
-  medium: '500',
-  semibold: '600',
-  bold: '700',
-} as const;
-
-export const fontSizes = {
-  heading: {
-    mobile: {
-      xl: '3rem', // 48px / 16px = 3rem
-      l: '2.5rem', // 40px / 16px = 2.5rem
-      m: '2rem', // 32px / 16px = 2rem
-      s: '1.5rem', // 24px / 16px = 1.5rem
-      xs: '1.25rem', // 20px / 16px = 1.25rem
-    },
-    desktop: {
-      xl: '5rem', // 80px / 16px = 5rem
-      l: '3.5rem', // 56px / 16px = 3.5rem
-      m: '2rem', // 32px / 16px = 2rem
-      s: '1.5rem', // 24px / 16px = 1.5rem
-      xs: '1.25rem', // 20px / 16px = 1.25rem
-    },
-  },
-  text: {
-    xll: '1.5rem', // 24px / 16px = 1.5rem
-    xl: '1.25rem', // 20px / 16px = 1.25rem
-    l: '1.125rem', // 18px / 16px = 1.125.5rem
-    m: '1rem', // 16px / 16px = 1rem
-    s: '0.875rem', // 14px / 16px = 0.875
-    xs: '0.75rem', // 12px / 16px = 0.875
-  },
-  button: {
-    large: '1.5rem',
-    default: '1.125rem', // 18px / 16px = 1.125.5rem
-    small: '1rem', // 16px / 16px = 1rem
-  },
-  label: {
-    xl: '1.5rem', // 24px / 16px = 1.5rem
-    l: '1rem', // 16px / 16px = 1rem
-    m: '0.875rem', // 14px / 16px = 0.875
-  },
-} as const;
-
-export const lineHeight = {
-  label: '1.1',
-} as const;
-
-export const letterSpacing = {
-  label: '0.06em',
-} as const;
-
-export type TextColor = keyof typeof textColors | 'textGradient' | 'textOrangeGradient';
-export type FontWeight = keyof typeof fontWeight;
-export type FontSize = keyof (typeof fontSizes)['text'];
-
 export const Keyframes = {
   rotate: keyframes`
     from {
diff --git a/src/styles/tokens.ts b/src/styles/tokens.ts
@@ -0,0 +1,75 @@
+export const screens = {
+  content: '662px',
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+  '2xl': '1440px',
+};
+
+export const textColors = {
+  lightGrey: 'var(--text-light-grey)',
+  darkGrey: 'var(--text-dark-grey)',
+  cinnabarRed: 'var(--text-cinnabar-red)',
+  white: 'var(--text-white)',
+  alwaysWhite: 'var(--text-always-white)',
+  alwaysLightGrey: 'var(--text-always-light-grey)',
+  electricLightBlue: 'var(--text-electric-light-blue)',
+} as const;
+
+export const fontWeight = {
+  light: '300',
+  normal: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+} as const;
+
+export const fontSizes = {
+  heading: {
+    mobile: {
+      xl: '3rem', // 48px / 16px = 3rem
+      l: '2.5rem', // 40px / 16px = 2.5rem
+      m: '2rem', // 32px / 16px = 2rem
+      s: '1.5rem', // 24px / 16px = 1.5rem
+      xs: '1.25rem', // 20px / 16px = 1.25rem
+    },
+    desktop: {
+      xl: '5rem', // 80px / 16px = 5rem
+      l: '3.5rem', // 56px / 16px = 3.5rem
+      m: '2rem', // 32px / 16px = 2rem
+      s: '1.5rem', // 24px / 16px = 1.5rem
+      xs: '1.25rem', // 20px / 16px = 1.25rem
+    },
+  },
+  text: {
+    xll: '1.5rem', // 24px / 16px = 1.5rem
+    xl: '1.25rem', // 20px / 16px = 1.25rem
+    l: '1.125rem', // 18px / 16px = 1.125.5rem
+    m: '1rem', // 16px / 16px = 1rem
+    s: '0.875rem', // 14px / 16px = 0.875
+    xs: '0.75rem', // 12px / 16px = 0.875
+  },
+  button: {
+    large: '1.5rem',
+    default: '1.125rem', // 18px / 16px = 1.125.5rem
+    small: '1rem', // 16px / 16px = 1rem
+  },
+  label: {
+    xl: '1.5rem', // 24px / 16px = 1.5rem
+    l: '1rem', // 16px / 16px = 1rem
+    m: '0.875rem', // 14px / 16px = 0.875
+  },
+} as const;
+
+export const lineHeight = {
+  label: '1.1',
+} as const;
+
+export const letterSpacing = {
+  label: '0.06em',
+} as const;
+
+export type TextColor = keyof typeof textColors | 'textGradient' | 'textOrangeGradient';
+export type FontWeight = keyof typeof fontWeight;
+export type FontSize = keyof (typeof fontSizes)['text'];
