Scope tailwind preflight styles #740
Conversation
Bjoern-Rapp
changed the title
|
@Bjoern-Rapp this is working for me. I tested in vscode and it doesn't seem to be leaking styles anymore. Would you be able to run |
Bjoern-Rapp
force-pushed
the
scope-css
branch
from
f1845d6 to
32c1717
Compare
| color: #11181c; | ||
| color: hsl(var(--nextui-foreground)); | ||
| background-color: #fff; | ||
| background-color: hsl(var(--nextui-background)); | ||
| margin: 0; | ||
| line-height: 1.5; | ||
| -webkit-text-size-adjust: 100%; | ||
| tab-size: 4; | ||
| font-family: | ||
| ui-sans-serif, | ||
| system-ui, | ||
| -apple-system, | ||
| Segoe UI, | ||
| Roboto, | ||
| Ubuntu, | ||
| Cantarell, | ||
| Noto Sans, | ||
| sans-serif, | ||
| "Apple Color Emoji", | ||
| "Segoe UI Emoji", | ||
| Segoe UI Symbol, | ||
| "Noto Color Emoji"; | ||
| font-feature-settings: normal; | ||
| font-variation-settings: normal; | ||
| -webkit-tap-highlight-color: transparent; |
There was a problem hiding this comment.
@Bjoern-Rapp it didn't notice this when I reviewed yesterday. Could you explain why this was added?
There was a problem hiding this comment.
Some selectors in the preflight stylesheet targets html, body and :root elements. They become useless when scoped to the div.lonboard wrapper, since there are no html or body elements inside the wrapper. The only alternative then is to copy / duplicate those properties from the resulting stylesheet and apply them directly to the wrapper.
|
@Bjoern-Rapp @kylebarron the background color change appears to be coming from NextUI, not Tailwind. Disabling this line, at least in the VSCode interactive code display, keeps the existing color. Adding overrides to the global styles might work for VSCode, but I would be in favor of a more permanent solution that avoids maintaining the NextUI-related overrides. Currently, we are using only two components from NextUI, Button and Tooltip. I believe we should consider replacing them with custom components and dropping the NextUI dependency as it might conflict with other environments. If you agree we can track this in a separated ticket. |
|
The change in background colour comes from NextUI, but Tailwind still comes with other changes to the global style that may be unwanted in other environments than VScode, such as Sphinx, if the "base" stylesheet is not scoped in some way. The stylesheet still contains changes to the font family, even when NextUI is removed. This solutions should work in all environments, not just VSCode, but there is probably better ways to scope the styles, |
|
I'm happy to merge whatever you two agree on as the best approach. |
There was a problem hiding this comment.
@Bjoern-Rapp @kylebarron I wasn't able to test on sphinx, but I think we should merge this as it is working well on VSCode and I aggree with Bjørn it should fix on other environments. I still leaning torward on dropping the usage of NextUI a look for a lighter aproach to style components, but let's discuss it on a separated ticket.
|
Thank you! |
Anywidget loads CSS from the _css attribute to the global scope. A widget most take care not to conflict with any other CSS selectors. The stylesheet from the tailwind preflight, loaded with
@tailwind base, will conflict with stylesheets from Sphinx themes (#698) or the VScode interactive display (#696).To scope the preflight stylesheet to descendants of a wrapper should fix that.