fix(core): use tailwind aspect-ratio plugin

Author: chanceaclark

.changeset/icy-cars-camp.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Updates our usage of aspect-ratio to use the tailwind plugin in order to support older browsers.

core/package.json

@@ -92,7 +92,6 @@
     "eslint": "^8.57.1",
     "eslint-config-next": "15.2.3",
     "postcss": "^8.5.4",
-    "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-preset-env": "^10.2.1",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.12",

core/postcss.config.js

@@ -14,6 +14,5 @@ module.exports = {
         'gap-properties': true,
       },
     },
-    'postcss-aspect-ratio-polyfill': {},
   },
 };

core/tailwind.config.js

@@ -228,12 +228,16 @@ const config = {
       },
     },
   },
+  corePlugins: {
+    aspectRatio: false,
+  },
   plugins: [
     // @ts-ignore
     require('tailwindcss-radix')(),
     require('tailwindcss-animate'),
     require('@tailwindcss/container-queries'),
     require('@tailwindcss/typography'),
+    require('@tailwindcss/aspect-ratio'),
   ],
 };
 

core/vibes/soul/form/card-radio-group/index.tsx

@@ -93,7 +93,7 @@ export const CardRadioGroup = React.forwardRef<
               value={option.value}
             >
               {option.image && (
-                <div className="relative aspect-square h-full">
+                <div className="aspect-w-1 aspect-h-1 relative h-full">
                   <Image
                     alt={option.image.alt}
                     className="bg-background object-fill"

core/vibes/soul/primitives/blog-post-card/index.tsx

@@ -32,7 +32,7 @@ export function BlogPostCard({ blogPost, className }: Props) {
       )}
       href={href}
     >
-      <div className="relative mb-4 aspect-[4/3] w-full overflow-hidden rounded-2xl bg-contrast-100">
+      <div className="relative mb-4 aspect-w-4 aspect-h-3 w-full overflow-hidden rounded-2xl bg-contrast-100">
         {image?.src != null && image.src !== '' ? (
           <Image
             alt={image.alt}
@@ -71,7 +71,7 @@ export function BlogPostCardSkeleton({ className }: { className?: string }) {
   return (
     <div className={clsx('flex max-w-md animate-pulse flex-col gap-2 rounded-xl', className)}>
       {/* Image */}
-      <div className="aspect-[4/3] overflow-hidden rounded-xl bg-contrast-100" />
+      <div className="aspect-w-4 aspect-h-3 overflow-hidden rounded-xl bg-contrast-100" />
 
       {/* Title */}
       <div className="h-4 w-24 rounded-lg bg-contrast-100" />

core/vibes/soul/primitives/compare-drawer/index.tsx

@@ -163,7 +163,7 @@ export function CompareDrawer({
                     className="group relative flex max-w-56 items-center overflow-hidden whitespace-nowrap rounded-xl border border-[var(--compare-drawer-link-border,hsl(var(--contrast-100)))] bg-[var(--compare-drawer-card-background,hsl(var(--background)))] font-semibold ring-[var(--compare-drawer-card-focus,hsl(var(--primary)))] transition-all duration-150 hover:bg-[var(--compare-drawer-card-background-hover,hsl(var(--contrast-100)))] focus:outline-none focus:ring-2"
                     href={item.href}
                   >
-                    <div className="relative aspect-square w-12 shrink-0 bg-[var(--compare-drawer-card-image-background,hsl(var(--contrast-100)))]">
+                    <div className="relative aspect-w-1 aspect-h-1 w-12 shrink-0 bg-[var(--compare-drawer-card-image-background,hsl(var(--contrast-100)))]">
                       {item.image?.src != null ? (
                         <Image
                           alt={item.image.alt}

core/vibes/soul/primitives/product-card/index.tsx

@@ -74,9 +74,9 @@ export function ProductCard({
           className={clsx(
             'relative overflow-hidden rounded-xl @md:rounded-2xl',
             {
-              '5:6': 'aspect-[5/6]',
-              '3:4': 'aspect-[3/4]',
-              '1:1': 'aspect-square',
+              '5:6': 'aspect-w-5 aspect-h-6',
+              '3:4': 'aspect-w-3 aspect-h-4',
+              '1:1': 'aspect-w-1 aspect-h-1',
             }[aspectRatio],
             {
               light: 'bg-[var(--product-card-light-background,hsl(var(--contrast-100)))]',
@@ -193,9 +193,9 @@ export function ProductCardSkeleton({
         className={clsx(
           'rounded-xl @md:rounded-2xl',
           {
-            '5:6': 'aspect-[5/6]',
-            '3:4': 'aspect-[3/4]',
-            '1:1': 'aspect-square',
+            '5:6': 'aspect-w-5 aspect-h-6',
+            '3:4': 'aspect-w-3 aspect-h-4',
+            '1:1': 'aspect-w-1 aspect-h-1',
           }[aspectRatio],
         )}
       />

core/vibes/soul/sections/blog-post-content/index.tsx

@@ -81,7 +81,7 @@ export function BlogPostContent({
                 {image?.src != null && image.src !== '' && (
                   <Image
                     alt={image.alt}
-                    className="mb-8 aspect-video w-full rounded-2xl bg-contrast-100 object-cover @2xl:mb-12 @4xl:mb-16"
+                    className="mb-8 aspect-w-1 aspect-h-9 w-full rounded-2xl bg-contrast-100 object-cover @2xl:mb-12 @4xl:mb-16"
                     height={780}
                     src={image.src}
                     width={1280}
@@ -129,7 +129,7 @@ function BlogPostTagsSkeleton() {
 
 function BlogPostImageSkeleton() {
   return (
-    <div className="mb-8 aspect-video w-full animate-pulse rounded-2xl bg-contrast-100 object-cover @2xl:mb-12 @4xl:mb-16">
+    <div className="mb-8 aspect-w-1 aspect-h-9 w-full animate-pulse rounded-2xl bg-contrast-100 object-cover @2xl:mb-12 @4xl:mb-16">
       <div className="h-full w-full" />
     </div>
   );

core/vibes/soul/sections/cart/client.tsx

@@ -290,7 +290,7 @@ export function CartClient<LineItem extends CartLineItem>({
               className="flex flex-col items-start gap-x-5 gap-y-4 @container @sm:flex-row"
               key={lineItem.id}
             >
-              <div className="relative aspect-square w-full max-w-24 overflow-hidden rounded-xl bg-[var(--cart-image-background,hsl(var(--contrast-100)))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--cart-focus,hsl(var(--primary)))] focus-visible:ring-offset-4">
+              <div className="relative aspect-w-1 aspect-h-1 w-full max-w-24 overflow-hidden rounded-xl bg-[var(--cart-image-background,hsl(var(--contrast-100)))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--cart-focus,hsl(var(--primary)))] focus-visible:ring-offset-4">
                 <Image
                   alt={lineItem.image.alt}
                   className="object-cover"