chore: Remove postcss deps and update css imports for explicit ordering (#2964)

* remove postcss deps and update css imports for explicit ordering

* never mind about the components layer, figure it out later

* ok put back most of the layer things

Author: david-crespo

app/ui/styles/index.css

@@ -8,14 +8,19 @@
 
 /*
  * We import all of these here instead of in the corresponding component files
- * so we can control the order things are imported in. In theory that's what the
- * @layer directives are for, but Vite's usage of postcss-import didn't  seem
- * to be aware of the @tailwind directives here. I suspect it was not following
- * the order specified in our postcss config. In any case we don't need to worry
- * about that if we're controlling the order directly here. All of these end up
- * inlined into a single file by postcss-import.
+ * so we can control the order things are imported in. If we were to import them
+ * in the component files, the order that the CSS comes in is whatever order the
+ * component file is bundled in by Vite, which is determined by the import DAG
+ * and is therefore arbitrary with respect to  style precedence.
+ *
+ * Tailwind v4 uses native CSS cascade layers (@layer), and the first @layer
+ * declaration establishes precedence order. Each @import can be assigned to a
+ * layer using layer() syntax, ensuring predictable specificity regardless of
+ * import order.
  */
 
+@layer base, components, utilities;
+
 @import 'tailwindcss';
 
 @import '@oxide/design-system/styles/tailwind.css';
@@ -24,19 +29,21 @@
 
 @import './fonts.css' layer(base);
 @import './vars.css' layer(base);
-@import './components/button.css';
-@import './components/menu-button.css';
-@import './components/menu-list.css';
-@import './components/loading-bar.css';
-@import './components/Tabs.css';
-@import './components/form.css';
-@import './components/login-page.css';
-@import './components/mini-table.css';
-@import './components/side-modal.css';
-@import './components/spinner.css';
+@import './components/button.css' layer(components);
+@import './components/menu-button.css' layer(components);
+@import './components/menu-list.css' layer(components);
+@import './components/loading-bar.css' layer(components);
+@import './components/Tabs.css' layer(components);
+@import './components/form.css' layer(components);
+@import './components/login-page.css' layer(components);
+@import './components/mini-table.css' layer(components);
+@import './components/side-modal.css' layer(components);
+@import './components/spinner.css' layer(components);
+@import './components/tooltip.css' layer(components);
+@import './themes/selection.css' layer(components);
+
+/* layer(components) on this one results in visual changes, holding off for now */
 @import './components/table.css';
-@import './components/tooltip.css';
-@import './themes/selection.css';
 
 @import '@xterm/xterm/css/xterm.css' layer(components);
 @source '../../../node_modules/@oxide/design-system/dist';

package-lock.json

@@ -123,10 +123,6 @@
     "oxlint": "^1.23.0",
     "oxlint-tsgolint": "^0.2.0",
     "patch-package": "^8.0.0",
-    "postcss": "^8.4.49",
-    "postcss-import": "^16.1.0",
-    "postcss-nesting": "^13.0.1",
-    "postcss-pseudo-classes": "^0.4.0",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.14",
     "resize-observer-polyfill": "^1.5.1",