fix(core): use tailwind aspect-ratio plugin

.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-h-1 aspect-w-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="aspect-h-3 aspect-w-4 relative mb-4 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-h-3 aspect-w-4 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="aspect-h-1 aspect-w-1 relative 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-h-6 aspect-w-5',
+              '3:4': 'aspect-h-4 aspect-w-3',
+              '1:1': 'aspect-h-1 aspect-w-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-h-6 aspect-w-5',
+            '3:4': 'aspect-h-4 aspect-w-3',
+            '1:1': 'aspect-h-1 aspect-w-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="aspect-h-9 aspect-w-16 mb-8 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="aspect-h-9 aspect-w-16 mb-8 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="aspect-h-1 aspect-w-1 relative 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"

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

@@ -90,7 +90,7 @@ export function CartSkeleton({
                 key={index}
               >
                 {/* Image */}
-                <Skeleton.Box className="aspect-square w-full max-w-24 rounded-xl" />
+                <Skeleton.Box className="aspect-h-1 aspect-w-1 w-full max-w-24 rounded-xl" />
                 <div className="flex grow flex-col flex-wrap justify-between gap-y-2 @xl:flex-row">
                   <div className="flex w-full flex-1 flex-col @xl:w-1/2 @xl:pr-4">
                     {/* Line Item Title */}

core/vibes/soul/sections/order-details-section/index.tsx

@@ -312,7 +312,7 @@ function ShipmentLineItem({ lineItem }: { lineItem: ShipmentLineItem }) {
 
   return (
     <LineItemWrapper>
-      <div className="relative aspect-square basis-40 overflow-hidden rounded-[inherit] border border-[var(--order-details-section-border,hsl(var(--contrast-100)))] bg-[var(--order-details-section-image-background,hsl(var(--contrast-100)))]">
+      <div className="aspect-h-1 aspect-w-1 relative basis-40 overflow-hidden rounded-[inherit] border border-[var(--order-details-section-border,hsl(var(--contrast-100)))] bg-[var(--order-details-section-image-background,hsl(var(--contrast-100)))]">
         {lineItem.image?.src != null ? (
           <Image
             alt={lineItem.image.alt}
@@ -361,7 +361,7 @@ function ShipmentLineItem({ lineItem }: { lineItem: ShipmentLineItem }) {
 function ShipmentLineItemSkeleton() {
   return (
     <div className="group grid shrink-0 gap-8 rounded-xl @sm:flex @sm:rounded-2xl">
-      <div className="relative aspect-square basis-40 overflow-hidden rounded-[inherit]">
+      <div className="aspect-h-1 aspect-w-1 relative basis-40 overflow-hidden rounded-[inherit]">
         <Skeleton.Box className="h-full w-full" />
       </div>
 

core/vibes/soul/sections/product-detail/index.tsx

@@ -210,7 +210,7 @@ function ProductGallerySkeleton() {
     <Skeleton.Root className="group-has-[[data-pending]]/product-gallery:animate-pulse" pending>
       <div className="w-full overflow-hidden rounded-xl @xl:rounded-2xl">
         <div className="flex">
-          <Skeleton.Box className="aspect-[4/5] h-full w-full shrink-0 grow-0 basis-full" />
+          <Skeleton.Box className="aspect-h-5 aspect-w-4 h-full w-full shrink-0 grow-0 basis-full" />
         </div>
       </div>
       <div className="mt-2 flex max-w-full gap-2 overflow-x-auto">

core/vibes/soul/sections/product-detail/product-gallery.tsx

@@ -78,17 +78,17 @@ export function ProductGallery({
               className={clsx(
                 'relative w-full shrink-0 grow-0 basis-full',
                 {
-                  '5:6': 'aspect-[5/6]',
-                  '3:4': 'aspect-[3/4]',
-                  '4:5': 'aspect-[4/5]',
-                  '3:2': 'aspect-[3/2]',
-                  '2:3': 'aspect-[2/3]',
-                  '16:9': 'aspect-[16/9]',
-                  '9:16': 'aspect-[9/16]',
-                  '6:5': 'aspect-[6/5]',
-                  '5:4': 'aspect-[5/4]',
-                  '4:3': 'aspect-[4/3]',
-                  '1:1': 'aspect-square',
+                  '5:6': 'aspect-h-6 aspect-w-5',
+                  '3:4': 'aspect-h-4 aspect-w-3',
+                  '4:5': 'aspect-h-5 aspect-w-4',
+                  '3:2': 'aspect-h-2 aspect-w-3',
+                  '2:3': 'aspect-h-3 aspect-w-3',
+                  '16:9': 'aspect-h-9 aspect-w-16',
+                  '9:16': 'aspect-h-16 aspect-w-9',
+                  '6:5': 'aspect-h-5 aspect-w-6',
+                  '5:4': 'aspect-h-4 aspect-w-5',
+                  '4:3': 'aspect-h-3 aspect-w-4',
+                  '1:1': 'aspect-h-1 aspect-w-1',
                 }[aspectRatio],
               )}
               key={idx}