fix(react): add CSS post-processor to prefix class selectors with data-wallet-ui

This commit adds a post-processing script that prefixes all CSS class selectors
with `[data-wallet-ui]` to increase their specificity and solve issues with
reset styles in consumer projects. It also updates component structure to
ensure the `data-wallet-ui` attribute is correctly placed on parent elements
that wrap Tailwind-styled content.

The post-processing approach ensures utility classes properly override
preflight styles in projects that don't use Tailwind CSS, maintaining the
intended appearance of our components regardless of the host application's
styling environment.

Author: drichar

packages/react/package.json

@@ -57,7 +57,7 @@
     "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
     "format": "prettier --write .",
     "typecheck": "tsc --noEmit",
-    "generate:css": "npx @tailwindcss/cli -c ./tailwind.config.js -i ./src/input.css -o ./dist/style.css"
+    "generate:css": "npx @tailwindcss/cli -c ./tailwind.config.js -i ./src/input.css -o ./dist/style.css && node ./scripts/post-process-css.js"
   },
   "peerDependencies": {
     "@txnlab/use-wallet-react": "^4.0.1",

packages/react/scripts/post-process-css.js

@@ -0,0 +1,58 @@
+#!/usr/bin/env node
+/**
+ * Post-processes the generated Tailwind CSS file to ensure utility classes
+ * have higher specificity than preflight styles when scoped.
+ *
+ * This script adds [data-wallet-ui] prefix to CSS class selectors to increase
+ * their specificity and prevent them from being overridden by preflight styles.
+ */
+
+import fs from 'fs/promises'
+import path from 'path'
+
+const STYLE_FILE_PATH = path.resolve('./dist/style.css')
+
+// Check if a line contains a top-level class selector
+function isTopLevelClassSelector(line) {
+  const trimmed = line.trim()
+  // Skip existing prefixed lines, at-rules, and comments
+  if (
+    line.includes('[data-wallet-ui]') ||
+    trimmed.startsWith('@') ||
+    trimmed.startsWith('/*') ||
+    trimmed.startsWith('*')
+  ) {
+    return false
+  }
+  // Match a line that starts with a period followed by valid CSS class characters
+  return /^\s*\.[a-zA-Z0-9_\-\\:]+[^\{]*\{/.test(line)
+}
+
+async function main() {
+  try {
+    // Read the generated CSS file
+    const cssContent = await fs.readFile(STYLE_FILE_PATH, 'utf8')
+    const lines = cssContent.split('\n')
+
+    // Process each line
+    const processedLines = lines.map((line) => {
+      if (isTopLevelClassSelector(line)) {
+        // Replace the first occurrence of a period with '[data-wallet-ui] .'
+        return line.replace(/(\s*)\./, '$1[data-wallet-ui] .')
+      }
+      return line
+    })
+
+    // Write the processed content back to the file
+    await fs.writeFile(STYLE_FILE_PATH, processedLines.join('\n'))
+
+    console.log(
+      `Processed CSS file to add [data-wallet-ui] prefix to class selectors in ${STYLE_FILE_PATH}`,
+    )
+  } catch (error) {
+    console.error('Error processing CSS file:', error)
+    process.exit(1)
+  }
+}
+
+main()

packages/react/src/components/ConnectWalletMenu.tsx

@@ -120,79 +120,80 @@ export function ConnectWalletMenu({ children }: ConnectWalletMenuProps) {
       {trigger}
       <FloatingPortal id="wallet-dialog-portal">
         {isOpen && (
-          <FloatingOverlay
-            className="grid place-items-center px-4 z-50 transition-opacity duration-150 ease-in-out bg-black/30 dark:bg-black/50 data-[state=starting]:opacity-0 data-[state=exiting]:opacity-0 data-[state=entered]:opacity-100"
-            data-state={animationState}
-            lockScroll
-            data-wallet-ui
-          >
-            <FloatingFocusManager context={context} modal={true}>
-              <div
-                ref={refs.setFloating}
-                {...getFloatingProps({
-                  'aria-labelledby': labelId,
-                  'aria-describedby': descriptionId,
-                })}
-                data-state={animationState}
-                className="w-full max-w-sm rounded-3xl bg-white dark:bg-[#001324] shadow-xl transform transition-all duration-150 ease-in-out data-[state=starting]:opacity-0 data-[state=starting]:scale-90 data-[state=exiting]:opacity-0 data-[state=exiting]:scale-90 data-[state=entered]:opacity-100 data-[state=entered]:scale-100"
-                style={{
-                  marginTop: '-0.5rem',
-                }}
-              >
-                {/* Header */}
-                <div className="relative flex items-center px-6 pt-5 pb-4">
-                  <h2
-                    id={labelId}
-                    className="text-xl font-bold text-gray-900 dark:text-[#E9E9FD] wallet-custom-font"
-                  >
-                    Connect a Wallet
-                  </h2>
-                  {/* Close button */}
-                  <button
-                    onClick={() => context.onOpenChange(false)}
-                    className="absolute right-4 rounded-full bg-gray-100 dark:bg-[#192A39]/75 p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-[#192A39] hover:text-gray-700 dark:hover:text-[#D4D4FA]"
-                    aria-label="Close dialog"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      className="h-5 w-5"
-                      viewBox="0 0 20 20"
-                      fill="currentColor"
+          <div data-wallet-ui>
+            <FloatingOverlay
+              className="grid place-items-center px-4 z-50 transition-opacity duration-150 ease-in-out bg-black/30 dark:bg-black/50 data-[state=starting]:opacity-0 data-[state=exiting]:opacity-0 data-[state=entered]:opacity-100"
+              data-state={animationState}
+              lockScroll
+            >
+              <FloatingFocusManager context={context} modal={true}>
+                <div
+                  ref={refs.setFloating}
+                  {...getFloatingProps({
+                    'aria-labelledby': labelId,
+                    'aria-describedby': descriptionId,
+                  })}
+                  data-state={animationState}
+                  className="w-full max-w-sm rounded-3xl bg-white dark:bg-[#001324] shadow-xl transform transition-all duration-150 ease-in-out data-[state=starting]:opacity-0 data-[state=starting]:scale-90 data-[state=exiting]:opacity-0 data-[state=exiting]:scale-90 data-[state=entered]:opacity-100 data-[state=entered]:scale-100"
+                  style={{
+                    marginTop: '-0.5rem',
+                  }}
+                >
+                  {/* Header */}
+                  <div className="relative flex items-center px-6 pt-5 pb-4">
+                    <h2
+                      id={labelId}
+                      className="text-xl font-bold text-gray-900 dark:text-[#E9E9FD] wallet-custom-font"
                     >
-                      <path
-                        fillRule="evenodd"
-                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                        clipRule="evenodd"
-                      />
-                    </svg>
-                  </button>
-                </div>
-
-                {/* Wallet list */}
-                <div className="px-4 pb-3">
-                  <WalletList
-                    wallets={wallets}
-                    handleWalletClick={handleWalletClick}
-                  />
-                </div>
-
-                {/* Footer section */}
-                <div className="px-6 py-5 border-t border-gray-200 dark:border-[#192A39] flex items-center justify-between">
-                  <span className="text-gray-600 dark:text-[#99A1A7] text-sm">
-                    Need an Algorand wallet?
-                  </span>
-                  <a
-                    href="https://algorand.co/wallets"
-                    className="text-[#2D2DF1]/80 dark:text-[#6C6CF1] font-medium text-sm hover:text-[#2D2DF1] dark:hover:text-[#8080F3]"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    Start here →
-                  </a>
+                      Connect a Wallet
+                    </h2>
+                    {/* Close button */}
+                    <button
+                      onClick={() => context.onOpenChange(false)}
+                      className="absolute right-4 rounded-full bg-gray-100 dark:bg-[#192A39]/75 p-2 text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-[#192A39] hover:text-gray-700 dark:hover:text-[#D4D4FA]"
+                      aria-label="Close dialog"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        className="h-5 w-5"
+                        viewBox="0 0 20 20"
+                        fill="currentColor"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+
+                  {/* Wallet list */}
+                  <div className="px-4 pb-3">
+                    <WalletList
+                      wallets={wallets}
+                      handleWalletClick={handleWalletClick}
+                    />
+                  </div>
+
+                  {/* Footer section */}
+                  <div className="px-6 py-5 border-t border-gray-200 dark:border-[#192A39] flex items-center justify-between">
+                    <span className="text-gray-600 dark:text-[#99A1A7] text-sm">
+                      Need an Algorand wallet?
+                    </span>
+                    <a
+                      href="https://algorand.co/wallets"
+                      className="text-[#2D2DF1]/80 dark:text-[#6C6CF1] font-medium text-sm hover:text-[#2D2DF1] dark:hover:text-[#8080F3]"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Start here →
+                    </a>
+                  </div>
                 </div>
-              </div>
-            </FloatingFocusManager>
-          </FloatingOverlay>
+              </FloatingFocusManager>
+            </FloatingOverlay>
+          </div>
         )}
       </FloatingPortal>
     </>