Centralize all CSS imports in index.css for explicit ordering (#2035)

* put text-accent back on sidebar link, fix button styling

* fix dialog styles, get rid of dialog.css

* move all remaining css imports into css. render unto css what is css's

* clean up modal stuff. take pointer events and onclicks off modal overlay

Author: david-crespo

.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'] },
+        ],
+      },
+    },
+  ],
+}

.eslintrc.json

@@ -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/Sidebar.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/components/form/Form.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/main.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/LoginPage.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/pages/LoginPageSaml.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/ActionMenu.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/lib/Button.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" />
+)