Docusaurus 3.8 #4607
Docusaurus 3.8 #4607
Conversation
✅ Deploy Preview for react-native ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Thanks @slorber! Looks like the bump induced some lint errors? I don't see them when running the check locally, on |
|
Yes it looks related to the React types upgrade, I'm not sure your snack examples are compatible with React 19 types so we may need to upgrade to React 19 in a separate PR. Will figure it out later |
…rber/docusaurus-3.7
…rber/docusaurus-3.7
There was a problem hiding this comment.
Ready to review, see my additional inline comments.
I'll release Docusaurus v3.8 tomorrow and then update the PR.
I fixed all the visual diffs that my tooling reported here: https://app.argos-ci.com/slorber/rnw-visual-tests
Normally this should look exactly as before
| @@ -43,7 +43,6 @@ | |||
| --ifm-table-border-color: var(--ifm-toc-border-color); | |||
| --ifm-table-cell-padding: 10px; | |||
| --ifm-table-stripe-background: rgba(0, 0, 0, 0.02); | |||
| --docusaurus-blog-social-icon-size: 16px; | |||
There was a problem hiding this comment.
This was not used, and after introducing cascade layers, it became used and produced a visual diff that my tool caught.
The effective icon size on the RN website in prod is 17px, not 16px.
| function disableExpensiveBundlerOptimizationPlugin() { | ||
| return { | ||
| name: 'disable-expensive-bundler-optimizations', | ||
| configureWebpack(_config, isServer) { | ||
| // This optimization is expensive and only reduces by 3% the JS assets size | ||
| // Let's skip it for local and deploy preview builds | ||
| // See also https://github.com/facebook/docusaurus/discussions/11199 | ||
| return { | ||
| optimization: { | ||
| concatenateModules: isProductionDeployment ? !isServer : false, | ||
| }, | ||
| }; | ||
| }, | ||
| }; | ||
| }, |
There was a problem hiding this comment.
Optional but this can significantly reduce build time for local production builds and deploy previews.
See also facebook/docusaurus#11199
See benchmarks with/without this optimization in the PR description.
| > :last-child { | ||
| margin-bottom: 0; | ||
| } |
There was a problem hiding this comment.
Your site's custom CSS now overrides what comes from Infima and Docusaurus.
This broke our CSS rule that prevents an useless extra margin at the end of blockquote by default.
I'm moving this rule here so that you can keep the same behavior:
| /* | ||
| Layer needed to override utility rules using !important in the Infima layer | ||
| See also https://css-tricks.com/css-cascade-layers/#aa-important-layers | ||
| */ | ||
| @layer docusaurus.infima.importantOverrides { | ||
| main[class^="docMainContainer"] > .container { | ||
| padding-top: 2rem !important; | ||
| } | ||
| } |
There was a problem hiding this comment.
Our Infima utility types such as margin--xl use !important
Once layered, these rules can't be overridden by unlayered CSS, and you have to add your override directly to the Infima layer with !important to be able to override it.
All this is explained here: https://css-tricks.com/css-cascade-layers/#aa-important-layers.
This may seem annoying, but I think it makes sense. Utility classes serve to drive the styling from the markup. If you write margin--xl in the HTML, it's a bit weird if the final margin is not "xl" but another value due to an unexpected override. You can see this as a way to be explicit and say "hey, I know what I'm doing, and really want to override even if this is dangerous and can lead to unexpected behavior.
The proper way would be to swizzle the component and remove margin--xl for example, but I understand how it might feel more practical to just use CSS 🤪
PS: the name "importantOverrides doesn't matter much, what matters is that it's a "sub-layer" of Infima.
|
@slorber Thanks for putting all of the work into migrating the website, and explaining all of the changes needed! 🙏 Tested the website locally, and on the PR preview, it looks and performs great! |
|
Awesome! v3.8 is out now, PR updated and ready to merge :) |
This PR upgrades the React Native website to Docusaurus 3.8:
https://docusaurus.io/blog/releases/3.8
Visual regression tests
I'm running visual regression tests from this PR: slorber/rnw-visual-tests#10
All the reported differences have been handled with little custom CSS changes.
Benchmarks
This release continues to improve build times significantly.
Bundling
Default:
With the expensive optimization disabled:
SSG
Before: 13s
After: 6s
Docusaurus Faster Impact
Here's the global updated impact of Docusaurus Faster on total build times, with all the flags on/off for the React Native website (including ~2k pages)