fix: fix for tailwind styles breaking Sphinx theme, and add linter

.github/workflows/pre-release.yml

@@ -86,6 +86,7 @@ jobs:
         run: |
           echo "🔨 Generating UI assets..."
           npm install
+          npm run lint
           npm run build
           cp ./build/injectNav.iife.js ../quantinuum_sphinx/static/injectNav.iife.js
           cp ./build/syncTheme.iife.js ../quantinuum_sphinx/static/syncTheme.iife.js

.github/workflows/release.yml

@@ -147,6 +147,7 @@ jobs:
         run: |
           echo "🔨 Generating UI assets..."
           npm install
+          npm run lint
           npm run build
           cp ./build/injectNav.iife.js ../quantinuum_sphinx/static/injectNav.iife.js
           cp ./build/syncTheme.iife.js ../quantinuum_sphinx/static/syncTheme.iife.js

sphinx-ui/react/package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "scripts": {
     "build": "npx tsdown",
+    "lint": "tsc --noEmit",
     "format": "prettier --write --config='../../libraries/ui/.prettierrc'  --ignore-path='.prettierignore' ."
   },
   "author": "",
@@ -23,7 +24,6 @@
     "prettier-plugin-tailwindcss": "^0.6.6",
     "serve": "^14.2.3",
     "tailwindcss": "^3.4.4",
-    "tsc": "^2.0.4",
     "tsdown": "^0.21.7",
     "typescript": "^6.0.3"
   },

sphinx-ui/react/postcss.config.mjs

@@ -5,13 +5,34 @@ import autoprefixer from 'autoprefixer'
 import prefixSelector from 'postcss-prefix-selector'
 import failOnWarn from 'postcss-fail-on-warn'
 
+const tailwindScopeSelector = '.use-tailwind'
+
+function scopeTailwindSelector(prefix, selector, prefixedSelector) {
+  if (selector === '*') {
+    return `${prefix}, ${prefixedSelector}`
+  }
+
+  if (selector.startsWith('::')) {
+    return `${prefix}${selector}, ${prefixedSelector}`
+  }
+
+  if (selector.startsWith('.')) {
+    return `${prefixedSelector}, ${prefix}${selector}`
+  }
+
+  return prefixedSelector
+}
+
 export default {
   plugins: [
     postcssImport,
     tailwindcssNesting,
     tailwindcss,
     autoprefixer,
-    prefixSelector({ prefix: '.use-tailwind' }),
+    prefixSelector({
+      prefix: tailwindScopeSelector,
+      transform: scopeTailwindSelector,
+    }),
     failOnWarn,
   ],
 }

sphinx-ui/react/src/injectNav.tsx

@@ -8,12 +8,53 @@ const GA_ID = __NEXT_PUBLIC_GA_ID__;
 
 const tailwindScopeClassName = 'use-tailwind';
 
-(() => {
-  document.body.classList.add(tailwindScopeClassName)
+const isTailwindDialogPortalElement = (element: Element): element is HTMLElement => {
+  if (!(element instanceof HTMLElement)) return false
+
+  const { classList } = element
+  return (
+    classList.contains('fixed') &&
+    classList.contains('z-50') &&
+    (classList.contains('inset-0') || element.getAttribute('role') === 'dialog')
+  )
+}
+
+const scopeTailwindDialogPortalElements = (root: ParentNode = document.body) => {
+  const scopeElement = (element: Element) => {
+    if (isTailwindDialogPortalElement(element)) {
+      element.classList.add(tailwindScopeClassName)
+    }
+  }
+
+  if (root instanceof Element) {
+    scopeElement(root)
+  }
+
+  root.querySelectorAll('[class][data-state], [class][role="dialog"]').forEach(scopeElement)
+}
 
+const observeTailwindDialogPortalElements = () => {
+  scopeTailwindDialogPortalElements()
+
+  const observer = new MutationObserver((records) => {
+    records.forEach((record) => {
+      record.addedNodes.forEach((node) => {
+        if (node instanceof Element) {
+          scopeTailwindDialogPortalElements(node)
+        }
+      })
+    })
+  })
+
+  observer.observe(document.body, { childList: true, subtree: true })
+}
+
+(() => {
   const mountElement = document.querySelector('.nexus-nav')
   if (!mountElement) return
 
+  observeTailwindDialogPortalElements()
+
   const renderIn = document.createElement('div')
   mountElement.appendChild(renderIn)
 

sphinx-ui/react/tailwind.config.ts

@@ -1,3 +1,5 @@
+/// <reference types="node" />
+
 import path from 'path'
 import { Config } from 'tailwindcss'
 import plugin from 'tailwindcss/plugin'

sphinx-ui/react/tsdown.config.ts

@@ -1,6 +1,8 @@
+/// <reference types="node" />
+
 import { defineConfig } from 'tsdown'
 
-const NEXT_PUBLIC_GA_ID = JSON.stringify(process.env.NEXT_PUBLIC_GA_ID || '')
+const NEXT_PUBLIC_GA_ID = JSON.stringify(process.env['NEXT_PUBLIC_GA_ID'] || '')
 
 export default defineConfig([
   // Script for injecting nav into sphinx build.