Centralize all CSS imports in index.css for explicit ordering

.eslintrc.cjs

@@ -0,0 +1,84 @@
+/**
+ * @type {import("eslint").Linter.Config}
+ */
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    warnOnUnsupportedTypeScriptVersion: false,
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/strict',
+    'plugin:@typescript-eslint/stylistic',
+    'plugin:jsx-a11y/recommended',
+    'plugin:react/recommended',
+    'prettier',
+    'plugin:react-hook-form/recommended',
+  ],
+  plugins: ['@typescript-eslint', 'react-hooks', 'prettier', 'jsx-a11y', 'react-hook-form'],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  env: {
+    node: true,
+  },
+  rules: {
+    '@typescript-eslint/array-type': 'off',
+    '@typescript-eslint/consistent-type-definitions': 'off',
+    '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    eqeqeq: ['error', 'always', { null: 'ignore' }],
+    'jsx-a11y/label-has-associated-control': [2, { controlComponents: ['button'] }],
+    'no-param-reassign': 'error',
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          '.', // preventing confusion due to auto-imports and barrel files
+        ],
+        patterns: [
+          // import all CSS except index.css at top level through CSS @import statements
+          // to avoid bad ordering situations. See https://github.com/oxidecomputer/console/pull/2035
+          '*.css',
+        ],
+      },
+    ],
+    'no-return-assign': 'error',
+    'no-unused-vars': 'off',
+    'prefer-arrow-callback': 'off',
+    'prettier/prettier': 'error',
+    radix: 'error',
+    'react-hooks/exhaustive-deps': 'error',
+    'react-hooks/rules-of-hooks': 'error',
+    'react/jsx-boolean-value': 'error',
+    'react/display-name': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/prop-types': 'off',
+  },
+  ignorePatterns: ['dist/'],
+  overrides: [
+    {
+      files: ['*.js'],
+      rules: {
+        '@typescript-eslint/no-var-requires': 'off',
+      },
+    },
+    {
+      files: ['*.e2e.ts'],
+      extends: ['plugin:playwright/playwright-test'],
+      rules: {
+        'playwright/expect-expect': [
+          'warn',
+          { assertFunctionNames: ['expectVisible', 'expectRowVisible'] },
+        ],
+      },
+    },
+  ],
+}

app/components/Sidebar.tsx

@@ -94,7 +94,7 @@ export const NavLinkItem = (props: {
       to={props.to}
       className={({ isActive }) =>
         cn(linkStyles, {
-          '!bg-accent-secondary hover:!bg-accent-secondary-hover svg:!text-accent-tertiary':
+          'text-accent !bg-accent-secondary hover:!bg-accent-secondary-hover svg:!text-accent-tertiary':
             isActive,
           'pointer-events-none text-disabled': props.disabled,
         })

app/components/form/Form.tsx

@@ -15,8 +15,6 @@ import { flattenChildren, isOneOf, pluckFirstOfType } from '~/util/children'
 import { classed } from '~/util/classed'
 import { invariant } from '~/util/invariant'
 
-import './form.css'
-
 interface FormActionsProps {
   formId?: string
   children: React.ReactNode

app/main.tsx

@@ -19,7 +19,8 @@ import { ReduceMotion } from './hooks'
 // stripped out by rollup in production
 import { startMockAPI } from './msw-mock-api'
 import { routes } from './routes'
-
+// this is the only allowed css import
+// eslint-disable-next-line no-restricted-imports
 import '~/ui/styles/index.css'
 
 import { SkipLink } from '~/ui/lib/SkipLink'

app/pages/LoginPage.tsx

@@ -11,12 +11,9 @@ import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useApiMutation, type UsernamePasswordCredentials } from '@oxide/api'
 
 import { TextFieldInner } from '~/components/form/fields/TextField'
+import { useForm } from '~/hooks'
 import { Button } from '~/ui/lib/Button'
 import { Identicon } from '~/ui/lib/Identicon'
-
-import '~/components/login-page.css'
-
-import { useForm } from '~/hooks'
 import { pb } from '~/util/path-builder'
 
 import { useSiloSelector, useToast } from '../hooks'

app/pages/LoginPageSaml.tsx

@@ -11,8 +11,6 @@ import { useSearchParams } from 'react-router-dom'
 import { buttonStyle } from '~/ui/lib/Button'
 import { Identicon } from '~/ui/lib/Identicon'
 
-import '~/components/login-page.css'
-
 import { useIdpSelector } from '../hooks'
 
 /** SAML "login page" that just links to the actual IdP */

app/ui/lib/ActionMenu.tsx

@@ -16,6 +16,7 @@ import { KEYS } from '~/ui/util/keys'
 import { groupBy } from '~/util/array'
 import { classed } from '~/util/classed'
 
+import { DialogOverlay } from './DialogOverlay'
 import { useSteppedScroll } from './use-stepped-scroll'
 
 export interface QuickActionItem {
@@ -90,8 +91,8 @@ export function ActionMenu(props: ActionMenuProps) {
       }}
     >
       <Dialog.Portal>
-        <Dialog.Overlay className="DialogOverlay" />
-        <Dialog.Content className="DialogContent fixed inset-0 mt-[20vh] !w-[46rem] bg-transparent p-0">
+        <DialogOverlay />
+        <Dialog.Content className="fixed inset-0 z-modal mx-auto mt-[20vh] w-[46rem] bg-transparent p-0">
           <div
             onKeyDown={(e) => {
               const lastIdx = itemsInOrder.length - 1

app/ui/lib/Button.tsx

@@ -12,8 +12,6 @@ import { Spinner } from '~/ui/lib/Spinner'
 import { Tooltip } from '~/ui/lib/Tooltip'
 import { Wrap } from '~/ui/util/wrap'
 
-import './button.css'
-
 export const buttonSizes = ['sm', 'icon', 'base'] as const
 export const variants = ['primary', 'secondary', 'ghost', 'danger'] as const
 

app/ui/styles/components/dialog.css → app/ui/lib/DialogOverlay.tsx

@@ -2,21 +2,10 @@
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, you can obtain one at https://mozilla.org/MPL/2.0/.
- *  
+ *
  * Copyright Oxide Computer Company
  */
 
-.DialogOverlay {
-  /* background: hsla(0, 0%, 0%, 0.33); */
-  @apply fixed inset-0 z-10 overflow-auto bg-scrim;
-}
-
-.DialogContent {
-  @apply z-20;
-
-  width: 50vw;
-  margin: 10vh auto;
-  background: white;
-  padding: 2rem;
-  outline: none;
-}
+export const DialogOverlay = () => (
+  <div aria-hidden className="fixed inset-0 z-10 overflow-auto bg-scrim" />
+)

app/ui/lib/MiniTable.tsx

@@ -9,8 +9,6 @@ import { classed } from '~/util/classed'
 
 import { Table as BigTable } from './Table'
 
-import './mini-table.css'
-
 type Children = { children: React.ReactNode }
 
 export const Table = classed.table`ox-mini-table w-full border-separate text-sans-md`

app/ui/lib/Modal.tsx

@@ -14,6 +14,7 @@ import { Close12Icon } from '@oxide/design-system/icons/react'
 import { classed } from '~/util/classed'
 
 import { Button } from './Button'
+import { DialogOverlay } from './DialogOverlay'
 
 const ModalContext = createContext(false)
 
@@ -56,13 +57,9 @@ export function Modal({ children, onDismiss, title, isOpen }: ModalProps) {
               modal={false}
             >
               <Dialog.Portal>
-                <div
-                  className="DialogOverlay pointer-events-auto"
-                  onClick={onDismiss}
-                  aria-hidden
-                />
+                <DialogOverlay />
                 <AnimatedDialogContent
-                  className="DialogContent ox-modal pointer-events-auto fixed left-1/2 top-1/2 z-modal m-0 flex max-h-[min(800px,80vh)] w-auto min-w-[28rem] max-w-[32rem] flex-col justify-between rounded-lg border p-0 bg-raise border-secondary elevation-2"
+                  className="pointer-events-auto fixed left-1/2 top-1/2 z-modal m-0 flex max-h-[min(800px,80vh)] w-auto min-w-[28rem] max-w-[32rem] flex-col justify-between rounded-lg border p-0 bg-raise border-secondary elevation-2"
                   aria-labelledby={titleId}
                   style={{
                     transform: y.to((value) => `translate3d(-50%, ${-50 + value}%, 0px)`),

app/ui/lib/PropertiesTable.tsx

@@ -12,8 +12,6 @@ import { Badge } from '~/ui/lib/Badge'
 import { isOneOf } from '~/util/children'
 import { invariant } from '~/util/invariant'
 
-import './properties-table.css'
-
 export interface PropertiesTableProps {
   className?: string
   children: ReactNode

app/ui/lib/SideModal.tsx

@@ -17,7 +17,7 @@ import { Message } from '~/ui/lib/Message'
 import { useIsInModal } from '~/ui/lib/Modal'
 import { classed } from '~/util/classed'
 
-import './side-modal.css'
+import { DialogOverlay } from './DialogOverlay'
 
 const SideModalContext = createContext(false)
 
@@ -82,11 +82,7 @@ export function SideModal({
               modal={false}
             >
               <Dialog.Portal>
-                <div
-                  className="DialogOverlay pointer-events-auto"
-                  onClick={onDismiss}
-                  aria-hidden
-                />
+                <DialogOverlay />
                 <AnimatedDialogContent
                   className="DialogContent ox-side-modal pointer-events-auto fixed bottom-0 right-0 top-0 z-sideModal m-0 flex w-[32rem] flex-col justify-between border-l p-0 bg-raise border-secondary elevation-2"
                   aria-labelledby={titleId}

app/ui/lib/Spinner.tsx

@@ -8,8 +8,6 @@
 import cn from 'classnames'
 import { useEffect, useRef, useState, type ReactNode } from 'react'
 
-import './spinner.css'
-
 export const spinnerSizes = ['base', 'lg'] as const
 export const spinnerVariants = ['primary', 'secondary', 'ghost', 'danger'] as const
 export type SpinnerSize = (typeof spinnerSizes)[number]

app/ui/lib/Table.tsx

@@ -9,13 +9,9 @@ import cn from 'classnames'
 import React, { useRef, type ReactElement } from 'react'
 import SimpleBar from 'simplebar-react'
 
-import 'simplebar-react/dist/simplebar.min.css'
-
 import { useIsOverflow } from '~/hooks'
 import { classed } from '~/util/classed'
 
-import './table.css'
-
 export type TableProps = JSX.IntrinsicElements['table']
 export function Table({ className, ...props }: TableProps) {
   const overflowRef = useRef<HTMLDivElement>(null)

app/ui/lib/Tabs.tsx

@@ -18,8 +18,6 @@ import {
 import cn from 'classnames'
 import type { SetRequired } from 'type-fest'
 
-import './Tabs.css'
-
 // They don't require a default value, but without it there is no tab selected
 // by default.
 export type TabsRootProps = SetRequired<TabsProps, 'defaultValue'>

app/ui/lib/Tooltip.tsx

@@ -34,8 +34,6 @@ import { mergeRefs } from 'react-merge-refs'
 
 import { usePopoverZIndex } from './SideModal'
 
-import './tooltip.css'
-
 export interface TooltipProps {
   delay?: number
   children?: React.ReactNode