Skip to content

Commit 6bf8b3a

Browse files
pimterrypimterry
committed
Fully drop styled components
1 parent a2c8245 commit 6bf8b3a

File tree

99 files changed

+1150
-1386
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

99 files changed

+1150
-1386
lines changed

‎next.config.js‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,7 @@ const nextConfig = {
2424
experimental: {
2525
optimizePackageImports: ['@phosphor-icons/react', '@httptoolkit/accounts'],
2626
},
27-
compiler: {
28-
styledComponents: true,
29-
},
30-
// Configure `pageExtensions` to include MDX files
27+
// Configure `pageExtensions` to include MDX files
3128
pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
3229
trailingSlash: true,
3330
webpack(config) {

‎package-lock.json‎

Lines changed: 0 additions & 96 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,6 @@
6161
"react-use": "^17.5.0",
6262
"react-use-clipboard": "^1.0.9",
6363
"server-only": "^0.0.1",
64-
"styled-components": "^6.1.8",
65-
"styled-reset": "^4.5.2",
6664
"vaul": "^0.9.0"
6765
},
6866
"devDependencies": {

‎src/app/(products)/http-toolkit-for-linux/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export default async function ForLinuxPage() {
1717
return (
1818
<>
1919
<CTA
20-
$bgVariant="rigth-bottom-to-top-left"
20+
$bgVariant="right-bottom-to-top-left"
2121
icon={LinuxLogo}
2222
heading="Intercept, debug & mock HTTP on Linux"
2323
excerpt="HTTP Toolkit lets you easily see and modify HTTP & HTTPS messages from applications, browsers, scripts & more on your Linux computer."

‎src/app/(thank-you-pages)/app-purchase-thank-you/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function AppPurchaseThankYouPage() {
2222
return (
2323
<LandingLayout>
2424
<div>
25-
<StyledHideElementOn $hideAbove="md">
25+
<StyledHideElementOn data-hide-above="md">
2626
<StyledSectionCTAWrapper>
2727
<CTA
2828
heading="Thanks for your purchase!"
@@ -44,7 +44,7 @@ export default function AppPurchaseThankYouPage() {
4444
<Stack>
4545
<Stack $gapxl="32px">
4646
<Stack $gapxl="24px">
47-
<StyledHideElementOn $hideBelow="md">
47+
<StyledHideElementOn data-hide-below="md">
4848
<Heading fontSize="l" color="textGradient">
4949
Thanks for your purchase!
5050
</Heading>
@@ -64,7 +64,7 @@ export default function AppPurchaseThankYouPage() {
6464
</Stack>
6565
</StyledTextContent>
6666
</StyledThankYouColumnContent>
67-
<StyledHideElementOn $hideBelow="md">
67+
<StyledHideElementOn data-hide-below="md">
6868
<ThemedImage
6969
withBorder
7070
alt="Frida Mobile Interception Scripts"

‎src/app/(thank-you-pages)/web-purchase-thank-you/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default function WebPurchaseThankYouPage() {
2828
<CapturePurchaseEvent />
2929
</Suspense>
3030
<div>
31-
<StyledHideElementOn $hideAbove="md">
31+
<StyledHideElementOn data-hide-above="md">
3232
<StyledSectionCTAWrapper>
3333
<CTA
3434
heading="Thanks for your purchase!"
@@ -50,7 +50,7 @@ export default function WebPurchaseThankYouPage() {
5050
<Stack $gapxl="48px">
5151
<Stack $gapxl="32px">
5252
<Stack $gapxl="24px">
53-
<StyledHideElementOn $hideBelow="md">
53+
<StyledHideElementOn data-hide-below="md">
5454
<Heading fontSize="l" color="textGradient">
5555
Thanks for your purchase!
5656
</Heading>
@@ -71,7 +71,7 @@ export default function WebPurchaseThankYouPage() {
7171
</Stack>
7272
</StyledTextContent>
7373
</StyledThankYouColumnContent>
74-
<StyledHideElementOn $hideBelow="md">
74+
<StyledHideElementOn data-hide-below="md">
7575
<ThemedImage
7676
withBorder
7777
alt="Frida Mobile Interception Scripts"

‎src/app/frida-scripts/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default async function FridaPage() {
2929
return (
3030
<LandingLayout>
3131
<div>
32-
<StyledHideElementOn $hideAbove="md">
32+
<StyledHideElementOn data-hide-above="md">
3333
<StyledSectionCTAWrapper>
3434
<CTA
3535
heading="Frida Mobile Interception Scripts"
@@ -53,7 +53,7 @@ export default async function FridaPage() {
5353
<Container>
5454
<StyledFridaColumns>
5555
<StyledFridaColumnContent>
56-
<StyledHideElementOn $hideBelow="md">
56+
<StyledHideElementOn data-hide-below="md">
5757
<Stack $gapxl="24px">
5858
<Heading fontSize="l" color="textGradient">
5959
Frida Mobile Interception Scripts
@@ -83,7 +83,7 @@ export default async function FridaPage() {
8383
</Button>
8484
</StyledButtonsWrapper>
8585
</StyledFridaColumnContent>
86-
<StyledHideElementOn $hideBelow="md">
86+
<StyledHideElementOn data-hide-below="md">
8787
<ThemedImage
8888
withBorder
8989
alt="Frida Mobile Interception Scripts"

‎src/app/layout.tsx‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ import { PHProvider } from './providers';
77

88
import { Button } from '@/components/elements/button';
99
import { RadixProviders } from '@/components/layout/radix-layout';
10-
import { StyledLayout } from '@/components/layout/styled-layout';
10+
import { ThemeLayout } from '@/components/layout/theme-layout';
1111
import { siteMetadata } from '@/lib/site-metadata';
1212
import { buildMetadata } from '@/lib/utils/build-metadata';
13-
import StyledComponentsRegistry from '@/styles/styled-component-registry';
13+
1414
import { Polyfills } from '@/components/elements/polyfills';
1515

1616
const PostHogPageView = dynamic(() => import('@/components/layout/posthog-page-view'), {
@@ -75,17 +75,15 @@ export default function RootLayout({
7575

7676
<body className={dmSansFont.variable}>
7777
<PHProvider>
78-
<StyledComponentsRegistry>
79-
<StyledLayout>
80-
<RadixProviders>
81-
<Button as="link" href="#main-content" $small className="skip-button">
82-
Skip to main content
83-
</Button>
84-
<PostHogPageView />
85-
{children}
86-
</RadixProviders>
87-
</StyledLayout>
88-
</StyledComponentsRegistry>
78+
<ThemeLayout>
79+
<RadixProviders>
80+
<Button as="link" href="#main-content" $small className="skip-button">
81+
Skip to main content
82+
</Button>
83+
<PostHogPageView />
84+
{children}
85+
</RadixProviders>
86+
</ThemeLayout>
8987
</PHProvider>
9088
</body>
9189
</html>

‎src/app/will-it-cors/components/breadcrumbs/breadcrumb.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ interface BreadcrumbProps {
99

1010
export const Breadcrumb = ({ children, state }: Component<BreadcrumbProps>) => {
1111
return (
12-
<StyledBreadcrumbItemWrapper $state={state}>
12+
<StyledBreadcrumbItemWrapper data-state={state}>
1313
{state === 'yes' && <CheckCircle aria-label="Yes" weight="fill" size={30} color="#6284FA" />}
1414
{state === 'no' && <XCircle aria-label="No" weight="fill" size={30} color="#D93E1C" />}
1515

‎src/app/will-it-cors/components/breadcrumbs/breadcrumbs.styles.ts‎

Lines changed: 15 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
'use client';
2-
3-
import type { BreadcrumState } from './breadcrumbs-types';
4-
5-
import { css, styled } from '@/styles';
1+
import { styled } from '@linaria/react';
62

73
export const StyledBreadcrumbContainer = styled.nav`
84
display: flex;
@@ -11,7 +7,7 @@ export const StyledBreadcrumbContainer = styled.nav`
117
justify-content: space-between;
128
`;
139

14-
export const StyledBreadcrumbItemWrapper = styled.div<{ $state?: BreadcrumState }>`
10+
export const StyledBreadcrumbItemWrapper = styled.div`
1511
flex: 1 1 33%;
1612
1713
display: flex;
@@ -24,26 +20,19 @@ export const StyledBreadcrumbItemWrapper = styled.div<{ $state?: BreadcrumState
2420
2521
p {
2622
padding: 0 5px;
23+
}
24+
25+
&[data-state="yes"] p {
26+
opacity: 0.6;
27+
}
28+
29+
&[data-state="no"] p,
30+
&[data-state="maybe"] p {
31+
font-weight: bold;
32+
}
2733
28-
${({ $state }) => {
29-
switch ($state) {
30-
case 'yes':
31-
return css`
32-
opacity: 0.6;
33-
`;
34-
35-
case 'no':
36-
case 'maybe':
37-
return css`
38-
font-weight: bold;
39-
`;
40-
41-
case 'nvm':
42-
return css`
43-
opacity: 0.5;
44-
text-decoration: line-through;
45-
`;
46-
}
47-
}}
34+
&[data-state="nvm"] p {
35+
opacity: 0.5;
36+
text-decoration: line-through;
4837
}
4938
`;

0 commit comments

Comments
 (0)