Centralize all CSS imports in index.css for explicit ordering

[david-crespo]

Changes

• Moved all CSS imports that took place TS files into the main index.css file so we can control the order
• Moved all CSS files into app/ui/styles — this is debatable, I guess they could still live next to their components, but meh
• Clean up dialog styles
• Resolve TODO comments on dialog styles

Why

postcss-import is a PostCSS plugin that takes all your CSS @import statements and inlines them into a single file. If you're just working with CSS files importing other CSS files, the order should be straightforward: depth-first traversal of the import tree. Vite also, somewhat magically, inlines CSS files imported into TypesSript files. We were importing CSS that way sometimes so the CSS would be right next to the relevant code, e.g., importing the button CSS in Button.tsx. The problem, as far as I can tell, is that with imports into TS files, the order that things get inlined into the final CSS output is not well-defined, or at least not easy to predict.

In #1978, I shuffled a bunch of files around and moved the import of the main CSS bundle from the now-deceased UI barrel file all the way up to main.tsx, and this seems to have caused the order that CSS imports were inlined into the bundle to change, which broke button styling by failing to put it after the base Tailwind styles it is meant to override.

Bad

Good

The selectors, being single classes, were not more specific than the base Tailwind styles. Make them more specific could be one approach to fixing this.

At this point the Tailwind expert should ask: isn't this what @layer is for? Yes, this is what @layer is for. Unfortunately, when you're mixing imports into CSS and imports into TSX, postcss-import doesn't see to be executing correctly, so when it see @layer in a the CSS file imported into TS, it doesn't seem to know that the necessary @tailwind is present over in another CSS file.

x Build failed in 1.22s
error during build:
CssSyntaxError: [vite:css] [postcss] /Users/david/oxide/console/app/ui/lib/button.css:9:1: `@layer components` is used but no matching `@tailwind components` directive is present.
file: /Users/david/oxide/console/app/ui/lib/button.css:9:0
    at Input.error (/Users/david/oxide/console/node_modules/postcss/lib/input.js:106:16)
    at AtRule.error (/Users/david/oxide/console/node_modules/postcss/lib/node.js:115:32)
    at normalizeTailwindDirectives (/Users/david/oxide/console/node_modules/tailwindcss/lib/lib/normalizeTailwindDirectives.js:72:32)
    at /Users/david/oxide/console/node_modules/tailwindcss/lib/processTailwindFeatures.js:30:98
    at plugins (/Users/david/oxide/console/node_modules/tailwindcss/lib/plugin.js:38:69)
    at LazyResult.runOnRoot (/Users/david/oxide/console/node_modules/postcss/lib/lazy-result.js:329:16)
    at LazyResult.runAsync (/Users/david/oxide/console/node_modules/postcss/lib/lazy-result.js:258:26)
    at async compileCSS (file:///Users/david/oxide/console/node_modules/vite/dist/node/chunks/dep-G-px366b.js:32012:25)
    at async Object.transform (file:///Users/david/oxide/console/node_modules/vite/dist/node/chunks/dep-G-px366b.js:31327:56)
    at async transform (file:///Users/david/oxide/console/node_modules/rollup/dist/es/shared/node-entry.js:17501:16)

It does not give this error on @layer if the same CSS file is imported directly into index.css instead, but once we're doing it all in CSS, we control the order anyway, so we don't need @layer.

I think the fact that this worked before was basically luck. Looking at the compiled CSS output from a "good" deploy, the base TW stuff is still not at the beginning of the file, it just happens to be somewhere in the middle and the button CSS goes after it. It's good that we turned up this problem now when it wasn't particularly inconvenient and we have time to fix it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
console	✅ Ready (Inspect)	Visit Preview	Mar 6, 2024 3:53pm

[david-crespo]

I had copied this stuff in from Reach dialog when we switched to Radix, even though almost all of it was being overridden.

https://github.com/reach/reach-ui/blob/43f450db7bcb25a743121fe31355f2294065a049/packages/dialog/styles.css#L18-L24

[david-crespo]

I accidentally deleted this while testing HMR performance after removing barrel files.

[david-crespo]

converted this file to JS solely so I could put this comment here

[david-crespo]

Turned this into a DialogOverlay component.

[david-crespo]

I can't find any problem with removing this onClick and the pointer-events-auto. Everything works – clicking out to close the modal, scrolling popovers when they're inside the modal, etc. Give it a try @benjaminleonard.

[charliepark]

Clicking through, everything looks good to me