fix(sdui): no Tailwind in page source — guardrail + corrected guidance (ADR-0065)#2495
Merged
Merged
Conversation
…e (ADR-0065) A kind:'html'/'react' page's `source` is runtime metadata, so the console's build-time Tailwind never scans it — authored utility classNames silently produce no CSS (the ADR-0065 failure that the Task Desk modal hit). The page fixes landed in the showcase; this closes the loop so AI authors don't repeat the mistake. Prevention (the guardrail): - New `@objectstack/lint` rule `validatePageSourceStyling` flags `className` attributes in source-tier pages, wired into `os validate` as step 3e — a warning with the actionable fix (react: inline style + hsl(var(--token)) + ObjectForm formType overlays; html: structured props + a JSON style object). Verified: os validate now flags all 7 showcase source pages; 6 unit tests. Corrected guidance (so the contract/docs/skill no longer teach the mistake): - react-blocks contract generator note → "do NOT use Tailwind className; style with inline style + hsl(var(--token)); overlays via ObjectForm formType" (regenerated contract.json + react-blocks.md). - objectstack-ui SKILL.md: html + react examples and prose rewritten off Tailwind; the ADR-0065 styling section gains a source-tier subsection. - layout-dsl.mdx: html tier row no longer says "HTML + Tailwind". - ADR-0080 / ADR-0081: amendment notes pointing to ADR-0065 — the tiers stand, only the styling primitive changes; never author Tailwind in page source. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
documentation
Contributor
📓 Docs Drift CheckThis PR changes 3 package(s): 93 hand-written doc(s) reference the affected code and may need an implementation-accuracy re-verification:
|
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
1 participant
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.
Follow-up to #2494 (which removed Tailwind from the react showcase pages). This closes the loop so AI authors don't repeat the mistake: a prevention gate + corrected guidance.
Why
A
kind:'html'/'react'page'ssourceis runtime metadata, so the console's build-time Tailwind never scans it — authored utilityclassNames silently produce no CSS (the ADR-0065 failure the Task Desk modal hit: transparent backdrop, unstyled boxes). The contract/skill/docs were still telling AI to write "HTML + Tailwind", so the gate and the guidance both needed fixing.Prevention — the guardrail
@objectstack/lintrulevalidatePageSourceStyling: flagsclassNameattributes in source-tier pages, wired intoos validateas step 3e — a warning with the actionable fix (react: inlinestyle+hsl(var(--token))+<ObjectForm formType=…>overlays; html: structured props + a JSONstyleobject).os validatenow flags all 7 showcase source pages with the right per-tier hint. 6 unit tests; all 106 lint tests green.Corrected guidance — so the docs no longer teach the mistake
style+hsl(var(--token)); overlays via ObjectForm formType" (regeneratedcontract.json+react-blocks.md).style; react = inlinestyle+hsl(var(--token))+formTypeoverlays).Follow-up
command-center-jsx(thekind:'html'showcase page) still uses Tailwind — the new guardrail flags it (48 classNames). It's the last page to convert (html tier: structured props + JSONstyle); doing it in a separate change so this PR stays focused on the systemic gate + guidance.🤖 Generated with Claude Code