feat: tailwind #1052
feat: tailwind #1052
Conversation
|
Feels like TW is something we should be handling on the ReadMe side of things, rather than in the engine? (Update: although, on reading a little closer, I do see why you did it this way…) |
|
|
|
Not sure why the snapshots changed? It looks like some padding wasn't being applied? |
| const css = ` | ||
| @layer theme, base, components, utilities; | ||
|
|
||
| @import "tailwindcss/theme.css" layer(theme); | ||
| @import "tailwindcss/utilities.css" layer(utilities); | ||
| `; |
There was a problem hiding this comment.
We're not including the 'preflight' stylesheet, which does the base restyling.
tsconfig.json
Outdated
| @@ -16,7 +16,7 @@ | |||
| "outDir": "dist", | |||
| "resolveJsonModule": true, | |||
| "sourceMap": true, | |||
| "target": "ES2017", | |||
| "target": "ES2018", | |||
There was a problem hiding this comment.
might want to bump this up to ES2020 where you'd get access to optional chaining. might even just go to ES2024.
lib/run.tsx
Outdated
|
|
||
| return { | ||
| default: () => ( | ||
| <Contexts terms={terms} baseUrl={baseUrl} variables={variables}> | ||
| {!!stylesheets && stylesheets.map(stylesheet => <style>{stylesheet}</style>)} |
There was a problem hiding this comment.
It looks like we're adding the <style> wherever we run rdmd right? So the markup will be something like
<div class="markdown-body">
<style>
...
</style>
...
</div>
It's worth noting that putting a style tag outside of the <head> is technically not valid html. Seems like it'll work fine though? We just might want to be mindful that
- This doesn't create any FOUC in the readme app once it's all wired up
- Any of our customers won't have a problem that their hub isn't going to pass strict HTML validation. Not sure if this would impact seo or a11y compliance. Probably not?
Found a whatwg thread all about this. You used to be able to use <style scoped> on some browsers for this, but it was deprecated.
There was a problem hiding this comment.
Yea, that's a good point. I'd like to keep it to prevent a FOUC, but maybe I can have it portal into the head async.
IIRC, when rendering server side, we render this output and inject the html into the doc. So this component won't have access to the head until it's fully rehydrated in the client.
There was a problem hiding this comment.
Yeah true -- & having to wait till the app hydrates to tack on the stylesheet would have waaaaay more of a FOUC than what you're currently doing.
There was a problem hiding this comment.
I think for this first pass it’s fine to inject these <style> tags outside of the head; we can always revisit down the line if we notice issues/get complaints!
|
This PR was released!🚀 Changes included in v8.1.0 |
🧰 Changes
Adds support for tailwind classes in components.
Some considerations that were taken into account:
To do this, first we pass all the component source's through a hacked up tailwind processer that generates a single stylesheet with all the tailwind classes it sees. The styles are prefixed with a single class,
readme-tailwind. Then that stylesheet is injected into astyletag at the top of the main doc's content.🧬 QA & Testing