feat(website): no global docusaurus styles #8482
Conversation
tkajtoch
added
the
skip-changelog
weronikaolejniczak
left a comment
weronikaolejniczak
left a comment
There was a problem hiding this comment.
Amazing idea to remove infima styles altogether, it's a meaningful solution to several issues.
Thanks for tackling this, Tomasz! 🙌🏻
Testing notes
✅ The footer is now correctly styled, always in dark mode
✅ EuiLink hover and active styles are no longer affected by global CSS
Screen.Recording.2025-03-21.at.08.20.11.mov
✅ [Global styles missing] EuiComboBox and EuiTreeView are as expected; combo box doesn't cut off the text in the input and the cursor as in prod in the tree view
❌ The alerts are unstyled now (the container styles are missing); we can fix it on another task, no problem
✅ Subdued background colors seem to be back!
❌ EuiComment - the letters are still not vertically aligned in the blue circles; we'd need to extract it to a bug ticket
✅ EuiTimeline multiple items example no longer looks "very broken" 😄
✅ EuiSkeleton doesn't bounce around in height anymore, it doesn't seem like it needs tweaking either
❌ Something is happening to the rectangle skeleton though, it seems to be "bouncing" in width now; we can extract it to a separate task0
Screen.Recording.2025-03-21.at.08.38.37.mov
✅ EuiSteps horizontal variant seems to be working as expected now
Screen.Recording.2025-03-21.at.08.41.28.mov
✅ Not sure if this is affected by your changed but EuiBottomBar Displacement example seems to be working now
✅ EuiCodeBlock doesn't seem to suffer from font being too small compared to prod
| Prod | New docs |
|---|---|
 |
 |
but I just noticed that the React import is missing 🤔 We might want to create a ticket for this.
I would make #8167 a spike, close it as @acstll has done some amazing investigation there, I would close all the above-mentioned tasks as "Duplicate" (I guess the closest to "Solved by").
Let's either fix the above-mentioned issues here or create separate tickets, in which case please link them here for awareness 🙏🏻 I can help creating them!
| */ | ||
| const ignoreInfimaPlugin: PluginModule = () => ({ | ||
| name: 'ignore-infima-plugin', | ||
| configureWebpack(config: any, isServer: boolean, utils: any) { |
There was a problem hiding this comment.
blocking:
We're not using these values, can we remove them?
ℹ️ Fyi, The skeleton visual bug is unrelated to this PR. It was already addressed as part of this PR. |
…rk with MDX ordered lists
|
@weronikaolejniczak I created https://github.com/elastic/eui-private/issues/269 to cover admonition styles and decided to fix EuiCommentList directly here (commit) |
| color: ${euiTheme.colors.emptyShade}; | ||
| ${useEuiFontSize('xs')}; | ||
| // override due to a custom lineHeightMultiplier set | ||
| line-height: 1.14rem; |
There was a problem hiding this comment.
Line height multiplier is overridden in @elastic/eui-docusaurus-theme. Since this component is pretty much fully customized to display the circle indicators I decided to just hardcode a correct (default) value here.
|
Preview staging links for this PR:
|
💚 Build Succeeded
History
cc @tkajtoch |
weronikaolejniczak
left a comment
weronikaolejniczak
left a comment
There was a problem hiding this comment.
LGTM! Thanks for making the additional changes 😄
5 participants
Summary
This fixes EUI components having incorrect styles because of Docusaurus' defaults applied by their
infimaCSS library. That library defines quite a few global styles we need to programmatically remove. Until now we were patching them withyarn patchbut that's not a reliable solution, and unfortunately, there's no way to let docusaurus not include these styles.This PR adds a custom webpack configuration that omits any
infimastyles from being bundled, and re-applies some of the safe styles we actually need for the base docusaurus theme to render properly.