Repository navigation
docs(richtext): the README shows Core's, the theme's and richtext's prebuilt stylesheets - #7582
Conversation
…rebuilt stylesheets
meta-cla
Bot
added
the
CLA Signed
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
AI review status for this pull request.
|
PR Analysis Report📚 Storybook Preview🧪 Sandbox PreviewNo new or modified components detected. Bundle Size SummaryNo component packages changed. Accessibility AuditStatus: No accessibility violations detected. Visual Regression38 of 474 shot(s) changed. A change here is a question, not a failure: check whether the after is the
and 18 more. Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
![astracat-bot[bot]](https://avatars.githubusercontent.com/in/4796231?s=60&v=4){kind=small}
There was a problem hiding this comment.
Changes requested: the new RichText stylesheet setup loads astryx.css before anything declares the reset layer, so the theme stylesheet's own @layer reset, astryx-base, astryx-theme; line places reset above astryx-base and the theme's prose defaults (:where(p), :where(h1, …, h6), :where(code, pre) and so on) override component styles. In a browser check with this branch's built CSS, a RichText table-header paragraph rendered at normal weight in the primary text color instead of the header cell's semibold secondary style; loading Core's reset.css first, as Core's README does, fixed it. Please add import '@astryxdesign/core/reset.css'; as the first import (apps with their own reset can declare the layer order instead), reword "as long as astryx.css comes first" to name that first import, and update the Changeset's "full stylesheet setup" sentence to match.
[Automated review]
| import '@astryxdesign/core/astryx.css'; | ||
| import '@astryxdesign/theme-neutral/theme.css'; // or your theme's CSS | ||
| import '@astryxdesign/richtext/richtext.css'; |
There was a problem hiding this comment.
Loading astryx.css first declares astryx-base before anything declares reset, so the theme stylesheet's @layer reset, astryx-base, astryx-theme; appends reset above astryx-base, and the theme's prose defaults (:where(p), :where(h1, …, h6), :where(code, pre)) then beat component styles. With this branch's built CSS in Chromium, a RichText table-header paragraph rendered at weight 400 in the primary text color instead of the header cell's semibold secondary style. Core's README loads reset.css first, which keeps reset < astryx-base < astryx-theme:
import '@astryxdesign/core/reset.css';
import '@astryxdesign/core/astryx.css';
import '@astryxdesign/theme-neutral/theme.css'; // or your theme's CSS
import '@astryxdesign/richtext/richtext.css';| `richtext.css` emits into `@layer astryx-base`, the layer `astryx.css` opens, | ||
| so your theme's token overrides (`@layer astryx-theme`) win over it whatever | ||
| the import order, as long as `astryx.css` comes first. |
There was a problem hiding this comment.
The theme-over-astryx-base part holds in any order, because every theme stylesheet registers the layer order. The condition is what needs to change: if astryx.css loads before reset.css (or nothing declares reset first), reset lands above astryx-base. Something like "…as long as Core's reset.css (or a @layer reset, astryx-base, astryx-theme; line) loads first" would keep the guarantee true.
| '@astryxdesign/richtext': patch | ||
| --- | ||
|
|
||
| [docs] The `@astryxdesign/richtext` README shows the full stylesheet setup: Core's `astryx.css`, your theme's CSS, and `richtext.css`. It says the package ships prebuilt CSS, so you never compile its source, and that `richtext.css` sits in `@layer astryx-base`, so theme overrides win. |
There was a problem hiding this comment.
Once the snippet imports Core's reset.css, this "full stylesheet setup" list should name it too.
There was a problem hiding this comment.
This looks ready: the RichText README now imports Core's reset.css first, so the documented setup keeps the reset < astryx-base < astryx-theme layer order, and a browser check with this branch's built CSS shows RichText table-header text keeping its semibold, secondary style. The prebuilt-CSS note, the @layer astryx-base explanation, the Changeset and the integration-header cleanup all match the shipped packages, so nothing else is needed.
[Automated review]
This branch was successfully deployed
2 participants
Reader impact
A product engineer installing the newly stable
@astryxdesign/richtextfollows its README, which is also the package's docsite page. The README showed Core'sastryx.cssandrichtext.cssbut no theme stylesheet, and didn't say the package ships prebuilt CSS. A reader could leave the theme out, or try to set up StyleX to compile the package's source, which Astryx packages never need.Change
@astryxdesign/core/reset.cssfirst, then@astryxdesign/core/astryx.css, the theme's CSS, and@astryxdesign/richtext/richtext.css.richtext.cssemits into@layer astryx-base, so the theme's@layer astryx-themeoverrides win as long asreset.css(or a@layer reset, astryx-base, astryx-theme;line, for an app with its own reset) loads first. Without that, the theme's layer-order line appendsresetaboveastryx-base, and its prose defaults override component styles.@astryxdesign/richtext.Evidence
From a fresh
pnpm buildofpackages/coreandpackages/richtextonmain:dist/richtext.cssholds exactly one layer block,@layer astryx-base { … }, the same layerdist/astryx.cssopens.richtext.css, 2124 inastryx.css. The 125 they share are StyleX atomic classes, and each carries the identical rule in both files (0 differ), so loading both changes nothing.richtext.cssreads is defined by Core or set at runtime: the--x-*dynamic properties, plus--color-syntax-comment, which Core'sCodeBlockreads the same way.Scope