fix: scope all Tailwind utilities under .formipay-design-system for WP admin isolation

- Add postcss-prefix-selector to prefix all CSS selectors with .formipay-design-system
- This gives Tailwind utilities higher specificity than WP admin styles
- Prevents WP input/select/button styles from overriding shadcn components
- All 129 selectors now scoped correctly

build/admin.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-components', 'wp-element', 'wp-i18n', 'wp-icons/build/arrow-left', 'wp-icons/build/bell', 'wp-icons/build/message', 'wp-icons/build/trash', 'wp-primitives'), 'version' => '0f9f6ed347f34c368d87');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-components', 'wp-element', 'wp-i18n', 'wp-icons/build/arrow-left', 'wp-icons/build/bell', 'wp-icons/build/message', 'wp-icons/build/trash', 'wp-primitives'), 'version' => '66ba2a0809137b4a1bf3');

node_modules/.package-lock.json

@@ -17429,6 +17429,16 @@
         "postcss": "^8.4.31"
       }
     },
+    "node_modules/postcss-prefix-selector": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-prefix-selector/-/postcss-prefix-selector-2.1.1.tgz",
+      "integrity": "sha512-ZBgf427Et6+XnrnJ9VXtJEKCjJwTvn2wn/qMg+wvvlRhIeFIAxdbrlZZ0CSsWYMJfcyPLBh8ogj5O1kb/Mcx3g==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-reduce-initial": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-6.1.0.tgz",

package-lock.json

@@ -35,6 +35,7 @@
       },
       "devDependencies": {
         "@wordpress/scripts": "^27.0.0",
+        "postcss-prefix-selector": "^2.1.1",
         "tw-animate-css": "^1.4.0"
       }
     },
@@ -18104,6 +18105,16 @@
         "postcss": "^8.4.31"
       }
     },
+    "node_modules/postcss-prefix-selector": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-prefix-selector/-/postcss-prefix-selector-2.1.1.tgz",
+      "integrity": "sha512-ZBgf427Et6+XnrnJ9VXtJEKCjJwTvn2wn/qMg+wvvlRhIeFIAxdbrlZZ0CSsWYMJfcyPLBh8ogj5O1kb/Mcx3g==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-reduce-initial": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-6.1.0.tgz",

package.json

@@ -16,6 +16,7 @@
   },
   "devDependencies": {
     "@wordpress/scripts": "^27.0.0",
+    "postcss-prefix-selector": "^2.1.1",
     "tw-animate-css": "^1.4.0"
   },
   "dependencies": {

postcss.config.js

@@ -1,6 +1,26 @@
+const prefixSelector = require('postcss-prefix-selector');
+
 module.exports = {
     plugins: {
         '@tailwindcss/postcss': {},
         autoprefixer: {},
+        'postcss-prefix-selector': {
+            prefix: '.formipay-design-system',
+            transform(prefix, selector) {
+                // Don't prefix root-level selectors like :root, @keyframes
+                if (selector.startsWith(':root') || selector.startsWith('@keyframes') || selector.startsWith('@font-face')) {
+                    return selector;
+                }
+                // Don't prefix html/body selectors
+                if (selector.startsWith('html') || selector.startsWith('body')) {
+                    return selector;
+                }
+                // Don't double-prefix
+                if (selector.startsWith(prefix)) {
+                    return selector;
+                }
+                return `${prefix} ${selector}`;
+            },
+        },
     },
 };

src/admin/styles/globals.css

@@ -58,6 +58,7 @@
     --sidebar-active: #2985f7;
 }
 
+/* WP admin style isolation: all Tailwind utilities get !important */
 @layer base {
     .formipay-design-system * {
         @apply border-border;