chore: workaround @Property issue in Tailwind 4

Author: birtles

package.json

@@ -111,6 +111,7 @@
     "playwright": "1.55.0",
     "playwright-test": "14.1.12",
     "postcss": "8.5.6",
+    "postcss-load-config": "6.0.1",
     "postcss-loader": "8.1.1",
     "prettier": "3.6.2",
     "prettier-plugin-organize-attributes": "1.0.0",

pnpm-lock.yaml

@@ -0,0 +1,8 @@
+import tailwindcss from '@tailwindcss/postcss';
+
+import { propertyToCustomProp } from './scripts/postcss-property-to-custom-prop.js';
+
+/** @type {import('postcss-load-config').Config} */
+const config = { plugins: [tailwindcss(), propertyToCustomProp()] };
+
+export default config;

postcss.config.cjs

@@ -0,0 +1,61 @@
+/*
+ * Tailwind 4 uses @property but these don't work inside shadow DOM
+ *
+ * See: https://github.com/tailwindlabs/tailwindcss/issues/15005
+ *
+ * This script converts @property rules to custom properties on :root, :host
+ *
+ * Courtesy of https://github.com/tailwindlabs/tailwindcss/discussions/16772#discussioncomment-12309978
+ */
+export function propertyToCustomProp() {
+  return {
+    postcssPlugin: 'postcss-property-to-custom-prop',
+    prepare() {
+      // Store all the properties we find
+      const properties = [];
+
+      return {
+        AtRule: {
+          property: (rule) => {
+            // Extract the property name and initial value
+            const propertyName = rule.params.match(/--[\w-]+/)?.[0];
+            let initialValue = '';
+
+            rule.walkDecls('initial-value', (decl) => {
+              initialValue = decl.value;
+            });
+
+            if (propertyName && initialValue) {
+              // Store the property
+              properties.push({ name: propertyName, value: initialValue });
+
+              // Remove the original @property rule
+              rule.remove();
+            }
+          },
+        },
+
+        OnceExit(root, { Rule, Declaration }) {
+          // If we found properties, add them to :root, :host
+          if (properties.length > 0) {
+            // Create the :root, :host rule using the Rule constructor from helpers
+            const rootRule = new Rule({ selector: ':root, :host' });
+
+            // Add all properties as declarations
+            properties.forEach((prop) => {
+              // Create a new declaration for each property
+              const decl = new Declaration({
+                prop: prop.name,
+                value: prop.value,
+              });
+              rootRule.append(decl);
+            });
+
+            // Add the rule to the beginning of the CSS
+            root.prepend(rootRule);
+          }
+        },
+      };
+    },
+  };
+}