fix(ui): Give each Mosaic component a minimal CSS reset by alexcarpenter · Pull Request #9332 · clerk/javascript

alexcarpenter · 2026-08-04T19:19:29Z

Description

MosaicProvider injects a reset keyed on data-cl-slot, but only the slot-recipe components (dialog, tabs, input) emit that attribute. The StyleX components style through themeProps + stylex.props and never carried it, so they inherited user-agent defaults — most visibly <Text> and <Heading>, which rendered with the browser's paragraph and heading margins. Meanwhile boxSizing and fontFamily: inherit were hand-copied into six separate .styles.ts files.

An injected stylesheet can't fix this: the StyleX tier builds through the deliberately Emotion-free styles/index.ts barrel, which has no provider to inject anything. So the reset has to be a StyleX atom.

components/reset.styles.ts exports reset.base, composed as the first argument of every stylex.props(...) call — the same way typography.styles.ts already shares sizes / colors / truncationStyles:

export const reset = stylex.create({
  base: {
    boxSizing: 'border-box',
    color: 'inherit',
    fontFamily: 'inherit',
    fontSize: 'inherit',
    fontWeight: 'inherit',
    lineHeight: 'inherit',
    margin: 0,
    padding: 0,
  },
});

margin and padding are shorthands on purpose. StyleX sorts shorthands into an earlier priority layer than longhands, so a component's own paddingInline outranks the reset no matter how the arguments are ordered — visible in the built styles.css:

margin: 0        → priority2   (reset, shorthand)
padding-inline:  → priority3   (components, longhand)

The inherit declarations tie with a component's own value, so those do depend on the reset going first.

The declarations the reset now owns are deleted from button, badge, avatar, card, item and menu. Each one still appears exactly once in the emitted CSS.

Two things are deliberately left alone. box.tsx keeps its local plain-object reset and input.tsx keeps its own inherit declarations — both sit on the Emotion path and can't consume a StyleX atom, and MOSAIC_RESET_CSS remains the reset for that tier. Popover.Trigger / Close / Title / Description are pure pass-throughs with no styles at all; giving a raw <button> padding: 0 while leaving its native chrome would look worse than leaving it, and that needs a control atom this PR doesn't introduce.

This is a visual change. <Text> and <Heading> no longer carry the browser's default margins, so they now sit flush with their container. Layouts that leaned on that spacing need to set it explicitly.

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

The injected reset in MosaicProvider is keyed on `data-cl-slot`, which only the slot-recipe components emit. The StyleX components style through `themeProps` + `stylex.props` and never carried it, so they picked up user-agent defaults — most visibly `<Text>` and `<Heading>`, which rendered with the browser's paragraph and heading margins. The StyleX tier also builds through the Emotion-free `styles/index.ts` barrel, so it has no provider to inject anything and needs the reset as a StyleX atom rather than a stylesheet. `reset.base` is composed first in every `stylex.props(...)` call, mirroring how `typography.styles.ts` shares `sizes`/`colors`. `margin`/`padding` stay shorthands so component longhands outrank them by StyleX's own priority layers; the `inherit` declarations rely on the reset going first.

changeset-bot · 2026-08-04T19:19:35Z

🦋 Changeset detected

Latest commit: beb47e9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2026-08-04T19:19:36Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview	Aug 4, 2026 7:23pm
swingset	Ready	Preview	Aug 4, 2026 7:23pm

coderabbitai · 2026-08-04T19:23:05Z

📝 Walkthrough

Walkthrough

Added a shared StyleX reset for spacing, sizing, color, typography, and line height. Applied reset.base across Mosaic components and subcomponents. Removed duplicated reset declarations from component styles. Added tests for reset composition and style precedence. Added an empty Changesets metadata block.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

clerk/javascript#9234: Introduces the Item components updated by this reset.
clerk/javascript#9244: Modifies Mosaic components that receive the shared reset.
clerk/javascript#9252: Introduces the Menu components updated by this reset.

Suggested reviewers: maxyinger

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: adding a minimal CSS reset to Mosaic components.
Description check	✅ Passed	The description explains the StyleX reset, affected components, rationale, visual impact, and validation steps.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

pkg-pr-new · 2026-08-04T19:23:49Z

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@9332

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@9332

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@9332

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@9332

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@9332

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@9332

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@9332

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@9332

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@9332

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@9332

@clerk/express

npm i https://pkg.pr.new/@clerk/express@9332

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@9332

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@9332

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@9332

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@9332

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@9332

@clerk/react

npm i https://pkg.pr.new/@clerk/react@9332

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@9332

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@9332

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@9332

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@9332

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@9332

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@9332

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@9332

commit: beb47e9

github-actions · 2026-08-04T19:24:42Z

API Changes Report

Generated by Break Check on 2026-08-04T19:24:40.260Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	0
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	0

No API Changes Detected

All packages have stable APIs with no detected changes.

Report generated by Break Check

_{Last ran on beb47e9.}

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.changeset/mosaic-component-reset.md:
- Around line 1-2: Replace the empty front matter in mosaic-component-reset.md
with a valid patch changeset for the package owning packages/ui, and add a
concise note describing that the Mosaic reset removes native default margins
from public UI components.

In `@packages/ui/src/mosaic/components/reset.test.tsx`:
- Around line 35-57: Expand the reset coverage in the cases list and its
assertions to include the Button label span and the Menu reset targets:
positioner, popup, item, and separator. Use the existing component patterns and
ensure each added node is independently validated rather than relying on
root-only coverage.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: b4bf9e19-9423-42a5-94a2-3a2412c8c516

📥 Commits

Reviewing files that changed from the base of the PR and between 438f2e5 and beb47e9.

📒 Files selected for processing (19)

.changeset/mosaic-component-reset.md
packages/ui/src/mosaic/components/avatar/avatar.styles.ts
packages/ui/src/mosaic/components/avatar/avatar.tsx
packages/ui/src/mosaic/components/badge/badge.styles.ts
packages/ui/src/mosaic/components/badge/badge.tsx
packages/ui/src/mosaic/components/button/button.styles.ts
packages/ui/src/mosaic/components/button/button.tsx
packages/ui/src/mosaic/components/card/card.styles.ts
packages/ui/src/mosaic/components/card/card.tsx
packages/ui/src/mosaic/components/heading/heading.tsx
packages/ui/src/mosaic/components/icon/icon.tsx
packages/ui/src/mosaic/components/item/item.styles.ts
packages/ui/src/mosaic/components/item/item.tsx
packages/ui/src/mosaic/components/menu/menu.styles.ts
packages/ui/src/mosaic/components/menu/menu.tsx
packages/ui/src/mosaic/components/popover/popover.tsx
packages/ui/src/mosaic/components/reset.styles.ts
packages/ui/src/mosaic/components/reset.test.tsx
packages/ui/src/mosaic/components/text/text.tsx

🔗 Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

clerk/clerk_go (manual)
clerk/dashboard (manual)
clerk/accounts (manual)
clerk/backoffice (manual)
clerk/clerk (manual)
clerk/clerk-docs (manual)
clerk/cloudflare-workers (manual)

💤 Files with no reviewable changes (6)

packages/ui/src/mosaic/components/item/item.styles.ts
packages/ui/src/mosaic/components/button/button.styles.ts
packages/ui/src/mosaic/components/badge/badge.styles.ts
packages/ui/src/mosaic/components/card/card.styles.ts
packages/ui/src/mosaic/components/avatar/avatar.styles.ts
packages/ui/src/mosaic/components/menu/menu.styles.ts

github-actions Bot added the ui label Aug 4, 2026

alexcarpenter commented Aug 4, 2026

View reviewed changes

Comment thread .changeset/mosaic-component-reset.md Outdated

Apply suggestion from @alexcarpenter

beb47e9

vercel Bot deployed to Preview – clerk-js-sandbox August 4, 2026 19:20 View deployment

vercel Bot deployed to Preview – swingset August 4, 2026 19:23 View deployment

coderabbitai Bot reviewed Aug 4, 2026

View reviewed changes

Comment thread .changeset/mosaic-component-reset.md

Comment thread packages/ui/src/mosaic/components/reset.test.tsx

Navigation Menu

Uh oh!

fix(ui): Give each Mosaic component a minimal CSS reset - #9332

fix(ui): Give each Mosaic component a minimal CSS reset#9332
alexcarpenter wants to merge 2 commits into
mainfrom
carp/mosiac-reset-styles

alexcarpenter commented Aug 4, 2026

Uh oh!

changeset-bot Bot commented Aug 4, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Aug 4, 2026 •

edited

Loading

Uh oh!

Uh oh!

coderabbitai Bot commented Aug 4, 2026 •

edited

Loading

Walkthrough

❌ Failed checks (1 warning)

Uh oh!

pkg-pr-new Bot commented Aug 4, 2026

Uh oh!

github-actions Bot commented Aug 4, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

alexcarpenter commented Aug 4, 2026

Description

Checklist

Type of change

Uh oh!

changeset-bot Bot commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel Bot commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

❌ Failed checks (1 warning)

Uh oh!

pkg-pr-new Bot commented Aug 4, 2026

Uh oh!

github-actions Bot commented Aug 4, 2026

API Changes Report

Summary

No API Changes Detected

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

changeset-bot Bot commented Aug 4, 2026 •

edited

Loading

vercel Bot commented Aug 4, 2026 •

edited

Loading

coderabbitai Bot commented Aug 4, 2026 •

edited

Loading