Add firefox specific styles to fix team section (#6580)

Author: hasparus

packages/web/docs/src/components/team-section/index.tsx

@@ -139,10 +139,10 @@ function TeamAvatar({ data: [name, avatar, social] }: { data: TeamMember }) {
       rel="noreferrer"
     >
       <div className="relative aspect-square min-h-[var(--size)] w-auto min-w-[var(--size)] flex-1 overflow-hidden rounded-2xl mix-blend-multiply ring-blue-500/0 ring-offset-2 transition-all hover:ring-4 hover:ring-blue-500/15 group-focus:ring-blue-500/40 group-focus-visible:ring-4 xl:w-[var(--size)]">
-        <div className="absolute inset-0 size-full bg-blue-100" />
+        <div className="firefox:hidden absolute inset-0 size-full bg-blue-100" />
         <Image
           alt=""
-          className="rounded-2xl bg-black brightness-100 grayscale transition-all duration-500 group-hover:scale-[1.03] group-hover:brightness-110"
+          className="firefox:bg-blend-multiply firefox:![filter:grayscale(1)] rounded-2xl bg-black brightness-100 grayscale transition-all duration-500 group-hover:scale-[1.03] group-hover:brightness-110"
           {...(typeof avatar === 'string'
             ? { src: avatar }
             : { blurDataURL: avatar.blurDataURL, src: avatar.src })}

packages/web/docs/tailwind.config.ts

@@ -46,6 +46,7 @@ const config: Config = {
     tailwindcssAnimate,
     blockquotesPlugin(),
     tailwindTypography,
+    firefoxVariantPlugin(),
   ],
 };
 
@@ -88,3 +89,27 @@ function blockquotesPlugin() {
     );
   });
 }
+
+function firefoxVariantPlugin() {
+  return plugin((api: PluginAPI) => {
+    const { addVariant, e, postcss } = api as PluginAPI & { postcss: any };
+    // @ts-expect-error types are outdated
+    addVariant('firefox', ({ container, separator }) => {
+      if (!postcss || !container || !separator) {
+        throw new Error("can't add firefox variant, assumptions invalid. did the API change?");
+      }
+      const isFirefoxRule = postcss.atRule({
+        name: 'supports',
+        params: '(-moz-appearance:none)',
+      });
+      isFirefoxRule.append(container.nodes);
+      container.append(isFirefoxRule);
+      // @ts-expect-error types are outdated
+      isFirefoxRule.walkRules(rule => {
+        rule.selector = `.${e(
+          `firefox${separator}${rule.selector.slice(1).replaceAll('\\', '')}`,
+        )}`;
+      });
+    });
+  });
+}