Skip to content

Commit 470e1d8

Browse files
hunterbectonhunterbecton
committed
feat: revert project to Tailwind 3 for improved browser support
1 parent 68a6501 commit 470e1d8

86 files changed

Lines changed: 2216 additions & 1240 deletions

File tree

Some content is hidden

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

‎core/app/[locale]/(default)/account/wishlists/[id]/_components/wishlist-actions.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const WishlistActions = ({
4444
<div className="flex-1">
4545
<WishlistVisibilitySwitch {...wishlist} />
4646
</div>
47-
<div className="@lg:border-l-contrast-100 flex items-center gap-2 pl-4 @lg:border-l">
47+
<div className="flex items-center gap-2 pl-4 @lg:border-l @lg:border-l-contrast-100">
4848
{publicUrl != null && publicUrl !== '' && (
4949
<WishlistShareButton
5050
closeLabel={shareCloseLabel}
@@ -74,7 +74,7 @@ export function WishlistActionsSkeleton() {
7474
<div className="flex-1">
7575
<SwitchSkeleton characterCount={5} />
7676
</div>
77-
<div className="@lg:border-l-contrast-100 flex items-center gap-2 pl-4 @lg:border-l">
77+
<div className="flex items-center gap-2 pl-4 @lg:border-l @lg:border-l-contrast-100">
7878
<WishlistShareButtonSkeleton />
7979
<Skeleton.Box className="h-10 w-10 rounded-full" />
8080
</div>

‎core/app/[locale]/(default)/account/wishlists/_components/wishlist-actions-menu.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ export const WishlistActionsMenu = ({ actionsTitle, items, share }: Props) => {
163163
</DropdownMenu>
164164
{modals.map(({ key, modal: { formAction: action, ...modalProps } }) => (
165165
<Modal
166-
className="max-w-lg min-w-64 @lg:min-w-96"
166+
className="min-w-64 max-w-lg @lg:min-w-96"
167167
form={action ? { action, onSuccess: handleModalFormSuccess(key) } : undefined}
168168
isOpen={state[key] ?? false}
169169
key={key}

‎core/app/[locale]/(default)/webpages/[id]/_components/web-page.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,13 @@ export function WebPageContent({ webPage: streamableWebPage, breadcrumbs, childr
3030
<header className="pb-8 @2xl:pb-12 @4xl:pb-16">
3131
{breadcrumbs && <Breadcrumbs breadcrumbs={breadcrumbs} />}
3232

33-
<h1 className="font-heading mt-8 mb-4 text-4xl leading-none font-medium @xl:text-5xl @4xl:text-6xl">
33+
<h1 className="mb-4 mt-8 font-heading text-4xl font-medium leading-none @xl:text-5xl @4xl:text-6xl">
3434
{title}
3535
</h1>
3636
</header>
3737

3838
<div
39-
className="prose [&_h2]:font-heading space-y-4 [&_h2]:text-3xl [&_h2]:leading-none [&_h2]:font-normal @-xl:[&_h2]:text-4xl [&_img]:mx-auto [&_img]:max-h-[600px] [&_img]:w-fit [&_img]:rounded-2xl [&_img]:object-cover"
39+
className="@-xl:[&_h2]:text-4xl prose space-y-4 [&_h2]:font-heading [&_h2]:text-3xl [&_h2]:font-normal [&_h2]:leading-none [&_img]:mx-auto [&_img]:max-h-[600px] [&_img]:w-fit [&_img]:rounded-2xl [&_img]:object-cover"
4040
dangerouslySetInnerHTML={{ __html: content }}
4141
/>
4242
{children}
@@ -50,22 +50,22 @@ export function WebPageContent({ webPage: streamableWebPage, breadcrumbs, childr
5050

5151
function WebPageTitleSkeleton() {
5252
return (
53-
<div className="mt-8 mb-4 animate-pulse">
54-
<div className="bg-contrast-100 h-9 w-5/6 rounded-lg @xl:h-12 @4xl:h-[3.75rem]" />
53+
<div className="mb-4 mt-8 animate-pulse">
54+
<div className="h-9 w-5/6 rounded-lg bg-contrast-100 @xl:h-12 @4xl:h-[3.75rem]" />
5555
</div>
5656
);
5757
}
5858

5959
function WebPageBodySkeleton() {
6060
return (
6161
<div className="mx-auto w-full max-w-4xl animate-pulse pb-8 @2xl:pb-12 @4xl:pb-16">
62-
<div className="bg-contrast-100 mb-8 h-[1lh] w-3/5 rounded-lg" />
63-
<div className="bg-contrast-100 mb-4 h-[0.5lh] w-full rounded-lg" />
64-
<div className="bg-contrast-100 mb-4 h-[0.5lh] w-full rounded-lg" />
65-
<div className="bg-contrast-100 mb-4 h-[0.5lh] w-full rounded-lg" />
66-
<div className="bg-contrast-100 mb-4 h-[0.5lh] w-full rounded-lg" />
67-
<div className="bg-contrast-100 mb-4 h-[0.5lh] w-full rounded-lg" />
68-
<div className="bg-contrast-100 mb-4 h-[0.5lh] w-3/4 rounded-lg" />
62+
<div className="mb-8 h-[1lh] w-3/5 rounded-lg bg-contrast-100" />
63+
<div className="mb-4 h-[0.5lh] w-full rounded-lg bg-contrast-100" />
64+
<div className="mb-4 h-[0.5lh] w-full rounded-lg bg-contrast-100" />
65+
<div className="mb-4 h-[0.5lh] w-full rounded-lg bg-contrast-100" />
66+
<div className="mb-4 h-[0.5lh] w-full rounded-lg bg-contrast-100" />
67+
<div className="mb-4 h-[0.5lh] w-full rounded-lg bg-contrast-100" />
68+
<div className="mb-4 h-[0.5lh] w-3/4 rounded-lg bg-contrast-100" />
6969
</div>
7070
);
7171
}

‎core/app/[locale]/layout.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { graphql } from '~/client/graphql';
1818
import { revalidate } from '~/client/revalidate-target';
1919
import { WebAnalyticsFragment } from '~/components/analytics/fragment';
2020
import { AnalyticsProvider } from '~/components/analytics/provider';
21+
import { ContainerQueryPolyfill } from '~/components/polyfills/container-query';
2122
import { routing } from '~/i18n/routing';
2223
import { getToastNotification } from '~/lib/server-toast';
2324

@@ -107,23 +108,26 @@ export default async function RootLayout({ params, children }: Props) {
107108
setRequestLocale(locale);
108109

109110
return (
110-
<html className={clsx(fonts.map((f) => f.variable))} lang={locale}>
111-
<body className="flex min-h-screen flex-col">
112-
<NextIntlClientProvider>
113-
<NuqsAdapter>
114-
<AnalyticsProvider channelId={data.channel.entityId} settings={data.site.settings}>
115-
<Providers>
116-
{toastNotificationCookieData && (
117-
<CookieNotifications {...toastNotificationCookieData} />
118-
)}
119-
{children}
120-
</Providers>
121-
</AnalyticsProvider>
122-
</NuqsAdapter>
123-
</NextIntlClientProvider>
124-
<VercelComponents />
125-
</body>
126-
</html>
111+
<>
112+
<ContainerQueryPolyfill />
113+
<html className={clsx(fonts.map((f) => f.variable))} lang={locale}>
114+
<body className="flex min-h-screen flex-col">
115+
<NextIntlClientProvider>
116+
<NuqsAdapter>
117+
<AnalyticsProvider channelId={data.channel.entityId} settings={data.site.settings}>
118+
<Providers>
119+
{toastNotificationCookieData && (
120+
<CookieNotifications {...toastNotificationCookieData} />
121+
)}
122+
{children}
123+
</Providers>
124+
</AnalyticsProvider>
125+
</NuqsAdapter>
126+
</NextIntlClientProvider>
127+
<VercelComponents />
128+
</body>
129+
</html>
130+
</>
127131
);
128132
}
129133

‎core/components/polyfills/container-query/index.tsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import Script from 'next/dist/client/script';
2+
import { headers } from 'next/headers';
3+
4+
function getBrowserInfo(userAgent: string) {
5+
let browser = 'Unknown';
6+
let version = 'Unknown';
7+
8+
switch (true) {
9+
case /Edg\/(\d+\.\d+)/.test(userAgent):
10+
browser = 'Edge';
11+
version = /Edg\/(\d+\.\d+)/.exec(userAgent)?.[1] || '';
12+
break;
13+
14+
case /Chrome\/(\d+\.\d+)/.test(userAgent):
15+
browser = 'Chrome';
16+
version = /Chrome\/(\d+\.\d+)/.exec(userAgent)?.[1] || '';
17+
break;
18+
19+
case /Firefox\/(\d+\.\d+)/.test(userAgent):
20+
browser = 'Firefox';
21+
version = /Firefox\/(\d+\.\d+)/.exec(userAgent)?.[1] || '';
22+
break;
23+
24+
case /Safari\/(\d+\.\d+)/.test(userAgent) && /Version\/(\d+\.\d+)/.test(userAgent):
25+
browser = 'Safari';
26+
version = /Version\/(\d+\.\d+)/.exec(userAgent)?.[1] || '';
27+
break;
28+
}
29+
30+
return { browser, version };
31+
}
32+
33+
function checkBrowserSupport(browser: string, version: string): boolean {
34+
const versionNumber = parseFloat(version);
35+
36+
switch (browser) {
37+
case 'Chrome':
38+
return versionNumber <= 105;
39+
40+
case 'Edge':
41+
return versionNumber <= 105;
42+
43+
case 'Safari':
44+
return versionNumber <= 15.6;
45+
46+
case 'Firefox':
47+
return versionNumber <= 109;
48+
49+
default:
50+
return false;
51+
}
52+
}
53+
54+
export async function ContainerQueryPolyfill() {
55+
const headersList = await headers();
56+
const userAgent = headersList.get('user-agent') || '';
57+
58+
const { browser, version } = getBrowserInfo(userAgent);
59+
60+
const isUnsupported = checkBrowserSupport(browser, version);
61+
62+
if (isUnsupported) {
63+
return (
64+
<Script
65+
src="https://cdn.jsdelivr.net/npm/container-query-polyfill@1/dist/container-query-polyfill.modern.js"
66+
strategy="beforeInteractive"
67+
/>
68+
);
69+
}
70+
}

‎core/components/wishlist/share-button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export const WishlistShareButton = ({
9898
if (!isMobileUser) {
9999
return (
100100
<Modal
101-
className="max-w-lg min-w-64 @lg:min-w-96"
101+
className="min-w-64 max-w-lg @lg:min-w-96"
102102
isOpen={open}
103103
setOpen={setOpen}
104104
trigger={ShareButton}

0 commit comments

Comments
 (0)