feat: revert project to Tailwind 3 for improved browser support

Author: hunterbecton

.github/workflows/lighthouseCommentMaker.js

@@ -0,0 +1,61 @@
+// @ts-check
+
+/**
+ * @typedef {Object} Summary
+ * @prop {number} performance
+ * @prop {number} accessibility
+ * @prop {number} best-practices
+ * @prop {number} seo
+ * @prop {number} pwa
+ */
+
+/**
+ * @typedef {Object} Manifest
+ * @prop {string} url
+ * @prop {boolean} isRepresentativeRun
+ * @prop {string} htmlPath
+ * @prop {string} jsonPath
+ * @prop {Summary} summary
+ */
+
+/**
+ * @typedef {Object} LighthouseOutputs
+ * @prop {Record<string, string>} links
+ * @prop {Manifest[]} manifest
+ * @prop {string} preset
+ */
+
+const formatScore = (/** @type { number } */ score) => Math.round(score * 100);
+const emojiScore = (/** @type { number } */ score) =>
+  score >= 0.9 ? "🟢" : score >= 0.5 ? "🟠" : "🔴";
+
+const scoreRow = (
+  /** @type { string } */ label,
+  /** @type { number } */ score,
+) => `| ${emojiScore(score)} ${label} | ${formatScore(score)} |`;
+
+/**
+ * @param {LighthouseOutputs} lighthouseOutputs
+ */
+function makeComment(lighthouseOutputs) {
+  const { summary } = lighthouseOutputs.manifest[2];
+  const [[testedUrl, reportUrl]] = Object.entries(lighthouseOutputs.links);
+  const preset = lighthouseOutputs.preset;
+
+  const comment = `We ran Lighthouse against the changes on a ${preset} and produced this [report](${reportUrl}). Here's the summary:
+
+| Category | Score |
+| -------- | ----- |
+${scoreRow("Performance", summary.performance)}
+${scoreRow("Accessibility", summary.accessibility)}
+${scoreRow("Best practices", summary["best-practices"])}
+${scoreRow("SEO", summary.seo)}
+
+`;
+
+  return comment;
+}
+
+module.exports = ({ lighthouseOutputs }) => {
+  return makeComment(lighthouseOutputs);
+};

.github/workflows/pull-request-data.js

@@ -0,0 +1,12 @@
+module.exports = async ({ github, context, core }) => {
+  const result = await github.rest.repos.listPullRequestsAssociatedWithCommit({
+    owner: context.repo.owner,
+    repo: context.repo.repo,
+    commit_sha: context.sha,
+  });
+
+  core.setOutput("pr", result?.data[0]?.number || "");
+  core.setOutput("title", result?.data[0]?.title || "");
+  core.setOutput("url", result?.data[0]?.html_url || "");
+  core.setOutput("draft", `${result?.data[0]?.draft}` || "true");
+};

core/.browserslistrc

@@ -0,0 +1 @@
+>2%, last 2 versions, Firefox ESR

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/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}