feat: Add prose macro#10161
Open
devongovett wants to merge 23 commits into
Open
Conversation
|
Build successful! 🎉 |
devongovett
commented
Jun 5, 2026
| textDecoration: 'underline', | ||
| transition: 'color 200ms' | ||
| }, | ||
| ':is(h1, h2, h3, h4, h5, h6, hr) + *': { |
Member
Author
There was a problem hiding this comment.
gap between headings and following paragraphs should collapse to the smaller of the two (heading)
Member
There was a problem hiding this comment.
don't css margins collapse already when siblings? I guess they collapse to the larger of the two, not the smaller... so do we want to have a different behaviour?
from looking at tailwind, I guess they are doing the same thing, so it's probably ok
|
Build successful! 🎉 |
snowystinger
reviewed
Jun 9, 2026
| textDecoration: 'underline', | ||
| transition: 'color 200ms' | ||
| }, | ||
| ':is(h1, h2, h3, h4, h5, h6, hr) + *': { |
Member
There was a problem hiding this comment.
don't css margins collapse already when siblings? I guess they collapse to the larger of the two, not the smaller... so do we want to have a different behaviour?
from looking at tailwind, I guess they are doing the same thing, so it's probably ok
| ol: { | ||
| listStyleType: 'decimal' | ||
| }, | ||
| 'li > p:last-child:not(:first-child)': { |
Member
There was a problem hiding this comment.
This is going to have a higher specificity than the others in this file, instead of 1 element or 0 0 1, this would be 0 2 2
(I am intentionally ignoring the leading classname "prose" for this, technically everything is one classname 0 1 0 higher than normal classes in our style macro)
again I see the tailwind prose has a bunch of selectors that violate that, so it's probably ok
|
|
||
| let css = ''; | ||
| for (let key in rules) { | ||
| let selector = key === '.prose' ? '.prose' : `.prose ${key}`; |
Member
There was a problem hiding this comment.
how will prose work through mergeStyles? and will it also get a version appended to it?
| return 'prose'; | ||
| } | ||
|
|
||
| function font(value: keyof typeof fontSize) { |
Member
There was a problem hiding this comment.
anything we need to do to keep this in sync with the spectrum-theme shorthand?
looks like the addition of --fs is really all that differs
|
|
||
| const fontWeightBase = { | ||
| normal: '400', | ||
| normal: { |
Member
There was a problem hiding this comment.
why do you have to provide a default key in an object for these?
| } as const; | ||
|
|
||
| const i18nFonts = { | ||
| export const i18nFonts = { |
Member
There was a problem hiding this comment.
doesn't look like anything is using this?
| export default meta; | ||
|
|
||
| export const Example = () => ( | ||
| <article className={`${prose()} ${style({maxWidth: 800, marginX: 'auto'})}`}> |
Member
There was a problem hiding this comment.
so if someone does one of these? Since prose already attaches font('body') to itself
<article className={`${mergeStyles(prose(), style({maxWidth: 800, marginX: 'auto'}))`}>
<article className={`${prose()} ${style({maxWidth: 800, marginX: 'auto', font: 'title'})}`}>
Member
Author
|
You don't need to review wips @snowystinger 😉 |
Member
|
I know, but it's a good idea and I was just writing down any questions I had. Feel free to ignore. |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
snowystinger
reviewed
Jul 7, 2026
| export function prose(this: MacroContext | void) { | ||
| let rules = { | ||
| '.prose': font('body'), | ||
| h1: { |
Member
There was a problem hiding this comment.
Notes for the redline work:
use token name for font instead of h1
use token name for margin instead of em size
any other call outs for special cases?
put this into context in our Thread/Chat component
maybe in a Dialog with Chat as well?
|
Build successful! 🎉 |
|
Build successful! 🎉 |
|
Build successful! 🎉 |
snowystinger
marked this pull request as ready for review
July 15, 2026 05:19
|
Build successful! 🎉 |
|
Build successful! 🎉 |
# Conflicts: # packages/react-aria/src/tokenfield/useTokenField.ts
|
Build successful! 🎉 |
devongovett
commented
Jul 20, 2026
|
|
||
| // A Chat rendered inside an S2 Popover, where the system response is prose | ||
| // (markdown) styled with the `prose` macro. | ||
| export function ChatPopover() { |
Member
Author
There was a problem hiding this comment.
why is it in a popover?
Member
There was a problem hiding this comment.
Design wanted this as an example they could try out 🤷🏻
Member
Author
There was a problem hiding this comment.
hmm a chat in a popover is strange example. maybe they meant a Dialog? but either way would be nice to have prose in the other examples not in there as well
Member
There was a problem hiding this comment.
re-watched sync, they said Dialog, i'll update that
|
Build successful! 🎉 |
devongovett
commented
Jul 21, 2026
|
|
||
| // A Chat rendered inside an S2 Popover, where the system response is prose | ||
| // (markdown) styled with the `prose` macro. | ||
| export function ChatPopover() { |
Member
Author
There was a problem hiding this comment.
hmm a chat in a popover is strange example. maybe they meant a Dialog? but either way would be nice to have prose in the other examples not in there as well
|
Build successful! 🎉 |
Agent Skills ChangesRemoved (90)
Modified (33)
InstallReact Spectrum S2: React Aria: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a
prose()macro to S2 that styles semantic HTML elements within it, e.g. headings, paragraphs, code, etc. Useful for displaying markdown and other article content.It's in a layer that is before the style macro, so regardless of its specificity, the style macro can override it.
I was unable to make use of
@scope, it's not available in FF until 146 and Chromatic is still at 141, so I figured it was a bad idea to push it in right now.I think it's probably ok to leave support out for now, scope worked really well when i used it. Creating a fallback for it would have increased the size of the css. I thought about adding a
:notor usingrevert-layer