feat: revert project to Tailwind 3 for improved browser support

Author: hunterbecton

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

@@ -44,7 +44,7 @@ export const WishlistActions = ({
         <div className="flex-1">
           <WishlistVisibilitySwitch {...wishlist} />
         </div>
-        <div className="@lg:border-l-contrast-100 flex items-center gap-2 pl-4 @lg:border-l">
+        <div className="flex items-center gap-2 pl-4 @lg:border-l @lg:border-l-contrast-100">
           {publicUrl != null && publicUrl !== '' && (
             <WishlistShareButton
               closeLabel={shareCloseLabel}
@@ -74,7 +74,7 @@ export function WishlistActionsSkeleton() {
         <div className="flex-1">
           <SwitchSkeleton characterCount={5} />
         </div>
-        <div className="@lg:border-l-contrast-100 flex items-center gap-2 pl-4 @lg:border-l">
+        <div className="flex items-center gap-2 pl-4 @lg:border-l @lg:border-l-contrast-100">
           <WishlistShareButtonSkeleton />
           <Skeleton.Box className="h-10 w-10 rounded-full" />
         </div>

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

@@ -163,7 +163,7 @@ export const WishlistActionsMenu = ({ actionsTitle, items, share }: Props) => {
       </DropdownMenu>
       {modals.map(({ key, modal: { formAction: action, ...modalProps } }) => (
         <Modal
-          className="max-w-lg min-w-64 @lg:min-w-96"
+          className="min-w-64 max-w-lg @lg:min-w-96"
           form={action ? { action, onSuccess: handleModalFormSuccess(key) } : undefined}
           isOpen={state[key] ?? false}
           key={key}

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

@@ -30,13 +30,13 @@ export function WebPageContent({ webPage: streamableWebPage, breadcrumbs, childr
               <header className="pb-8 @2xl:pb-12 @4xl:pb-16">
                 {breadcrumbs && <Breadcrumbs breadcrumbs={breadcrumbs} />}
 
-                <h1 className="font-heading mt-8 mb-4 text-4xl leading-none font-medium @xl:text-5xl @4xl:text-6xl">
+                <h1 className="mb-4 mt-8 font-heading text-4xl font-medium leading-none @xl:text-5xl @4xl:text-6xl">
                   {title}
                 </h1>
               </header>
 
               <div
-                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"
+                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"
                 dangerouslySetInnerHTML={{ __html: content }}
               />
               {children}
@@ -50,22 +50,22 @@ export function WebPageContent({ webPage: streamableWebPage, breadcrumbs, childr
 
 function WebPageTitleSkeleton() {
   return (
-    <div className="mt-8 mb-4 animate-pulse">
-      <div className="bg-contrast-100 h-9 w-5/6 rounded-lg @xl:h-12 @4xl:h-[3.75rem]" />
+    <div className="mb-4 mt-8 animate-pulse">
+      <div className="h-9 w-5/6 rounded-lg bg-contrast-100 @xl:h-12 @4xl:h-[3.75rem]" />
     </div>
   );
 }
 
 function WebPageBodySkeleton() {
   return (
     <div className="mx-auto w-full max-w-4xl animate-pulse pb-8 @2xl:pb-12 @4xl:pb-16">
-      <div className="bg-contrast-100 mb-8 h-[1lh] w-3/5 rounded-lg" />
-      <div className="bg-contrast-100 mb-4 h-[0.5lh] w-full rounded-lg" />
-      <div className="bg-contrast-100 mb-4 h-[0.5lh] w-full rounded-lg" />
-      <div className="bg-contrast-100 mb-4 h-[0.5lh] w-full rounded-lg" />
-      <div className="bg-contrast-100 mb-4 h-[0.5lh] w-full rounded-lg" />
-      <div className="bg-contrast-100 mb-4 h-[0.5lh] w-full rounded-lg" />
-      <div className="bg-contrast-100 mb-4 h-[0.5lh] w-3/4 rounded-lg" />
+      <div className="mb-8 h-[1lh] w-3/5 rounded-lg bg-contrast-100" />
+      <div className="mb-4 h-[0.5lh] w-full rounded-lg bg-contrast-100" />
+      <div className="mb-4 h-[0.5lh] w-full rounded-lg bg-contrast-100" />
+      <div className="mb-4 h-[0.5lh] w-full rounded-lg bg-contrast-100" />
+      <div className="mb-4 h-[0.5lh] w-full rounded-lg bg-contrast-100" />
+      <div className="mb-4 h-[0.5lh] w-full rounded-lg bg-contrast-100" />
+      <div className="mb-4 h-[0.5lh] w-3/4 rounded-lg bg-contrast-100" />
     </div>
   );
 }

core/app/[locale]/layout.tsx

@@ -18,6 +18,7 @@ import { graphql } from '~/client/graphql';
 import { revalidate } from '~/client/revalidate-target';
 import { WebAnalyticsFragment } from '~/components/analytics/fragment';
 import { AnalyticsProvider } from '~/components/analytics/provider';
+import { ContainerQueryPolyfill } from '~/components/polyfills/container-query';
 import { routing } from '~/i18n/routing';
 import { getToastNotification } from '~/lib/server-toast';
 
@@ -122,6 +123,7 @@ export default async function RootLayout({ params, children }: Props) {
           </NuqsAdapter>
         </NextIntlClientProvider>
         <VercelComponents />
+        <ContainerQueryPolyfill />
       </body>
     </html>
   );

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

@@ -0,0 +1,45 @@
+import { headers } from 'next/headers';
+import Script from 'next/script';
+import { userAgent } from 'next/server';
+
+function checkBrowserSupport(name: string | undefined, version: string | undefined): boolean {
+  if (!name || !version) return false;
+
+  const versionNumber = parseFloat(version);
+
+  switch (name) {
+    case 'Chrome':
+      return versionNumber <= 105;
+
+    case 'Edge':
+      return versionNumber <= 105;
+
+    case 'Safari':
+      return versionNumber <= 15.6;
+
+    case 'Firefox':
+      return versionNumber <= 109;
+
+    default:
+      return false;
+  }
+}
+
+export async function ContainerQueryPolyfill() {
+  const headersList = await headers();
+  const { browser } = userAgent({ headers: headersList });
+
+  const { version, name } = browser;
+
+  const isUnsupported = checkBrowserSupport(name, version);
+
+  if (isUnsupported) {
+    return (
+      // eslint-disable-next-line @next/next/no-before-interactive-script-outside-document
+      <Script
+        src="https://cdn.jsdelivr.net/npm/container-query-polyfill@1/dist/container-query-polyfill.modern.js"
+        strategy="beforeInteractive"
+      />
+    );
+  }
+}

core/components/wishlist/share-button.tsx

@@ -98,7 +98,7 @@ export const WishlistShareButton = ({
         if (!isMobileUser) {
           return (
             <Modal
-              className="max-w-lg min-w-64 @lg:min-w-96"
+              className="min-w-64 max-w-lg @lg:min-w-96"
               isOpen={open}
               setOpen={setOpen}
               trigger={ShareButton}