refactor(frontend): Replace Tailwind with StyleX (#408)

Times are a changing, and who doesn't love a good ol'refactor. The goal
of this PR is to migrate away from Tailwind, and instead over to StyleX.
The reason for this is that we live in a world of agents now, and
constant validation is key to ensuring durable, and good code. StyleX
provides this via type safe styles unlike those of Tailwind, which at
the end of the day are just strings.

🤖 generated description below:
---
## Why

Replace Tailwind throughout the frontend with StyleX. Shared components
accept compiled styles through typed `style` props, so callers can
compose overrides without class strings or raw CSS objects.

## What changed

- Migrate shared components and all incident, filter, and availability
screens. Remove Tailwind, CVA, classnames, tailwind-merge, and `cn`.
- Generate only `tokens.stylex.ts` from Scraps colors, spacing, radii,
and typography. Store direct values with dark-mode media overrides.
Remove `scraps-theme.css` and the intermediate variable aliases.
- Add the StyleX ESLint plugin, a rule that requires StyleX styles, and
negative type and lint tests. Preserve calendar selection, keyboard
focus, dynamic dimensions, and dialog scroll locking.

## Scope

The change covers frontend application styling. The backend and API
contracts are unchanged. No demo page remains.

Global CSS retains font faces and the latest Tailwind Preflight, adapted
as standalone CSS in the reset layer. All native inputs suppress focus
outlines through a global reset rule. Buttons, links, selects, and
textareas retain native focus. Calendar adapters use generated classes
internally, and Radix manages its runtime positioning.

## Tradeoffs

Scraps exports ordinary JavaScript objects that the StyleX compiler
cannot import directly as tokens. A generator converts those values into
a StyleX module and checks the committed output during lint. StyleX
emits the CSS declarations. Preflight uses standard CSS font defaults in
place of its Tailwind compiler helpers. Its MIT notice ships with the
production assets.

## Blast radius

Every frontend screen uses the new styling path. Review the global
reset, calendar adapters, dynamic measurements, and conditional style
precedence closely.

## Verification

- All 193 frontend tests pass, including six style contract tests. Lint,
formatting, type checking, token freshness, the production build, and
applicable precommit and pre-push hooks pass.
- All 118 tokens preserve their previous values in both color schemes
through the installed StyleX compiler. Production CSS contains no
Tailwind symbols or Scraps variable aliases.
- Browser checks cover desktop and mobile layouts, light and dark
rendering, calendars, keyboard focus return, dialogs, scroll unlock, and
textarea resizing. Visual checks are sampled. Dark hover precedence was
checked through compiled CSS, while RTL and week numbers have component
test coverage. Browser checks confirm unchanged dropdown geometry at
1280px, outline removal on all five searchable dropdowns and a regular
form input, and native focus on selects, textareas, and buttons.

---------

Co-authored-by: Spencer Murray <spencer.murray@sentry.io>

Author: nsdeschenes

frontend/eslint-rules/stylex-only.mjs

@@ -0,0 +1,137 @@
+export default {
+  meta: {
+    type: 'problem',
+    schema: [],
+    messages: {
+      className:
+        'Define styles with StyleX and pass a typed style prop or spread stylex.props on a host element.',
+      inlineStyle:
+        'Define host styles with stylex.create and apply them with stylex.props.',
+      cssProperties: 'Component style props must accept StyleXStyles, not CSSProperties.',
+      hostProps:
+        'Pass StyleX styles to application components instead of spreading generated DOM props.',
+    },
+  },
+  create(context) {
+    function applicationComponent(node) {
+      const name = node.type === 'JSXMemberExpression' ? node.object : node;
+      if (name.type !== 'JSXIdentifier' || !/^[A-Z]/.test(name.name)) return false;
+      let scope = context.sourceCode.getScope(node);
+      while (scope && !scope.set.has(name.name)) scope = scope.upper;
+      const variable = scope?.set.get(name.name);
+      const imported = variable?.defs.find(def => def.type === 'ImportBinding');
+      if (!imported) {
+        return Boolean(
+          variable?.defs.some(
+            def =>
+              def.type === 'FunctionName' ||
+              (def.type === 'Variable' &&
+                ['ArrowFunctionExpression', 'FunctionExpression'].includes(
+                  def.node.init?.type
+                ))
+          )
+        );
+      }
+      const source = imported.parent.source.value;
+      return (
+        source.startsWith('components/') ||
+        source.startsWith('./') ||
+        source.startsWith('../')
+      );
+    }
+
+    function initializer(node) {
+      if (node.type !== 'Identifier') return node;
+      let scope = context.sourceCode.getScope(node);
+      while (scope && !scope.set.has(node.name)) scope = scope.upper;
+      return scope?.set.get(node.name)?.defs.find(def => def.type === 'Variable')?.node
+        .init;
+    }
+
+    function spreadValues(node, seen = new Set()) {
+      if (!node || seen.has(node)) return [];
+      seen.add(node);
+      if (
+        node.type === 'TSAsExpression' ||
+        node.type === 'TSSatisfiesExpression' ||
+        node.type === 'TSNonNullExpression'
+      ) {
+        return spreadValues(node.expression, seen);
+      }
+      if (node.type === 'Identifier') return spreadValues(initializer(node), seen);
+      if (node.type === 'ObjectExpression') {
+        return node.properties.flatMap(property =>
+          property.type === 'SpreadElement'
+            ? spreadValues(property.argument, seen)
+            : [property]
+        );
+      }
+      if (
+        node.type === 'CallExpression' &&
+        node.callee.type === 'MemberExpression' &&
+        node.callee.object.name === 'stylex' &&
+        node.callee.property.name === 'props'
+      ) {
+        return [node];
+      }
+      return [];
+    }
+
+    return {
+      JSXAttribute(node) {
+        if (node.name.name === 'className')
+          context.report({node, messageId: 'className'});
+        if (
+          node.name.name === 'classNames' &&
+          !context.filename.endsWith('/components/Calendar.tsx')
+        ) {
+          context.report({node, messageId: 'className'});
+        }
+        if (
+          node.name.name === 'style' &&
+          (!applicationComponent(node.parent.name) ||
+            node.value?.expression?.type === 'ObjectExpression')
+        ) {
+          context.report({node, messageId: 'inlineStyle'});
+        }
+      },
+      TSTypeReference(node) {
+        const name =
+          node.typeName.type === 'TSQualifiedName'
+            ? node.typeName.right.name
+            : node.typeName.name;
+        if (name === 'CSSProperties') context.report({node, messageId: 'cssProperties'});
+      },
+      AssignmentExpression(node) {
+        if (
+          node.left.type === 'MemberExpression' &&
+          node.left.object.type === 'MemberExpression' &&
+          node.left.object.property.name === 'style'
+        ) {
+          context.report({node, messageId: 'inlineStyle'});
+        }
+      },
+      JSXSpreadAttribute(node) {
+        const host = node.parent.name;
+        const values = spreadValues(node.argument);
+        for (const value of values) {
+          if (value.type !== 'Property' || value.computed) continue;
+          const key = value.key.name ?? value.key.value;
+          if (key === 'className' || key === 'classNames') {
+            context.report({node: value, messageId: 'className'});
+          }
+          if (
+            key === 'style' &&
+            (!applicationComponent(host) || value.value.type === 'ObjectExpression')
+          ) {
+            context.report({node: value, messageId: 'inlineStyle'});
+          }
+        }
+        if (!values.some(value => value.type === 'CallExpression')) return;
+        if (applicationComponent(host)) {
+          context.report({node, messageId: 'hostProps'});
+        }
+      },
+    };
+  },
+};

frontend/eslint.config.js

@@ -1,11 +1,13 @@
 import js from '@eslint/js';
+import {rules as stylexRules} from '@stylexjs/eslint-plugin';
 import reactHooks from 'eslint-plugin-react-hooks';
 import reactRefresh from 'eslint-plugin-react-refresh';
-import eslintPluginTailwindCSS from 'eslint-plugin-tailwindcss';
 import {globalIgnores} from 'eslint/config';
 import globals from 'globals';
 import tseslint from 'typescript-eslint';
 
+import stylexOnly from './eslint-rules/stylex-only.mjs';
+
 export default tseslint.config([
   globalIgnores(['dist']),
   {
@@ -15,26 +17,33 @@ export default tseslint.config([
       tseslint.configs.recommended,
       reactHooks.configs.flat.recommended,
       reactRefresh.configs.vite,
-      eslintPluginTailwindCSS.configs['flat/recommended'],
     ],
-    settings: {
-      tailwindcss: {
-        // For Tailwind v4 - disable config path since it uses CSS-based config
-        config: false,
-        // Specify CSS files where Tailwind is defined
-        cssFiles: ['src/styles/index.css', 'src/styles/scraps-theme.css'],
-      },
-    },
-    rules: {
-      // Disable until plugin properly supports Tailwind v4 CSS-based config
-      'tailwindcss/no-custom-classname': 'off',
+    plugins: {
+      '@stylexjs': {rules: stylexRules},
+      local: {rules: {'stylex-only': stylexOnly}},
     },
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     rules: {
-      'tailwindcss/no-custom-classname': 'off',
+      '@stylexjs/valid-styles': 'error',
+      '@stylexjs/enforce-extension': 'error',
+      'local/stylex-only': 'error',
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            'classnames',
+            'class-variance-authority',
+            'tailwind-merge',
+            'tailwindcss',
+            '@tailwindcss/vite',
+            'utils/cn',
+          ],
+          patterns: ['**/utils/cn', '**/cn', '@tailwindcss/*', '**/*.css', '**/*.scss'],
+        },
+      ],
     },
   },
 ]);

frontend/index.html

@@ -10,7 +10,7 @@
     <title>Firetower</title>
   </head>
 
-  <body class="bg-background-tertiary">
+  <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>

frontend/package.json

@@ -10,13 +10,14 @@
     "type-check": "tsc --project tsconfig.build.json --noEmit",
     "prebuild": "pnpm run tokens:generate",
     "build": "tsc --project tsconfig.build.json --noEmit && vite build",
-    "lint": "eslint .",
+    "lint": "pnpm run tokens:check && eslint .",
     "lint:fix": "eslint . --fix",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "test": "vitest run",
     "tokens:generate": "node scripts/generate-scraps-theme.mjs",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "tokens:check": "node scripts/generate-scraps-theme.mjs --check"
   },
   "dependencies": {
     "@emotion/react": "11.14.0",
@@ -26,26 +27,24 @@
     "@sentry/react": "^10.63.0",
     "@sentry/scraps": "0.1.0",
     "@sentry/vite-plugin": "^5.4.1",
+    "@stylexjs/stylex": "^0.19.1",
     "@t3-oss/env-core": "^0.13.8",
     "@tanstack/react-query": "^5.90.12",
     "@tanstack/react-router": "^1.141.1",
     "@tanstack/zod-adapter": "^1.141.1",
-    "class-variance-authority": "^0.7.1",
-    "classnames": "^2.5.1",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.560.0",
     "react": "^19.2.2",
     "react-day-picker": "^9.13.0",
     "react-dom": "^19.2.2",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4.1.18",
     "zod": "^4.1.13"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@happy-dom/global-registrator": "^20.0.11",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.0",
-    "@tailwindcss/vite": "^4.1.18",
+    "@stylexjs/eslint-plugin": "^0.19.1",
+    "@stylexjs/unplugin": "^0.19.1",
     "@tanstack/react-router-devtools": "^1.141.1",
     "@tanstack/router-plugin": "^1.141.1",
     "@testing-library/dom": "^10.4.1",
@@ -59,11 +58,11 @@
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
-    "eslint-plugin-tailwindcss": "^4.0.0-beta.0",
     "globals": "^16.5.0",
     "prettier": "^3.7.4",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.49.0",
+    "unplugin": "^2.3.11",
     "vite": "^7.3.5",
     "vitest": "^3.2.6"
   }