Skip to content

P6 — Responsive object syntax (breakpoint shorthand in style values)#121

Merged
dbanksdesign merged 5 commits into
mainfrom
feat/responsive-object-syntax
Jul 5, 2026
Merged

P6 — Responsive object syntax (breakpoint shorthand in style values)#121
dbanksdesign merged 5 commits into
mainfrom
feat/responsive-object-syntax

Conversation

@dbanksdesign

Copy link
Copy Markdown
Collaborator

Summary

  • Adds breakpoints option to createStyles / createTypeStyles so authors can register media query conditions once (sm, md, lg, …)
  • Enables responsive property values like padding: { base: '8px', md: '16px' } that expand to plain @media blocks at serialization time (semantic, hashed, compact, and atomic modes)
  • Includes breakpoints.fromTokens sugar, dev-time validation, comprehensive tests, and Components docs

Test plan

  • pnpm test in packages/typestyles (424 tests pass)
  • pnpm run typecheck across monorepo
  • Bundle size budget updated for ~1.2 KB gzip increase
  • Verify docs "Responsive property values" section renders in Components page

Made with Cursor

dbanksdesign and others added 5 commits July 4, 2026 19:00
Registers breakpoints once on createStyles/createTypeStyles and expands { base, md, lg } property values into @media blocks at serialization time, with tests and docs.

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
@dbanksdesign dbanksdesign merged commit 4be825a into main Jul 5, 2026
7 checks passed
@dbanksdesign dbanksdesign deleted the feat/responsive-object-syntax branch July 5, 2026 02:20
@github-actions github-actions Bot mentioned this pull request Jul 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant