Skip to content

feat(theme): extend _flex: namespace to route direction and wrap keywords#281

Merged
alexgrozav merged 1 commit into
mainfrom
alexgrozav/utility-class-preset
Jul 5, 2026
Merged

feat(theme): extend _flex: namespace to route direction and wrap keywords#281
alexgrozav merged 1 commit into
mainfrom
alexgrozav/utility-class-preset

Conversation

@alexgrozav

Copy link
Copy Markdown
Contributor

Description

Extends the _flex: utility namespace to mirror Tailwind's flex-* family. Direction keywords (row, col, column, and their reverses) now route to flex-direction, wrap keywords (wrap, nowrap, wrap-reverse) route to flex-wrap, and shorthand values (1, auto, initial, none) continue to map to flex. Also adds column/column-reverse as full-word aliases to flexDirectionValues and column/column-dense aliases to grid auto-flow values.

Related issue

Type of change

  • 🐞 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that changes existing behavior)
  • 📖 Documentation
  • ♻️ Refactor / internal (no functional change)
  • 🔧 Build / tooling / CI

Checklist

  • My commits follow Conventional Commits with a package scope (e.g. feat(theme): …)
  • I ran pnpm build:nodocs && pnpm lint && pnpm typecheck && pnpm test and everything passes
  • I added a changeset (pnpm changeset) for changes to publishable packages, or this change only touches docs/storybook/app/playground/tests
  • I added or updated tests where relevant
  • I updated documentation where relevant
  • I did not edit generated files (dist/, .styleframe/)
  • My PR targets main and stays focused in scope

Notes / screenshots

The _flex: namespace now works like Tailwind's unified flex-* classes — you can write _flex:column, _flex:wrap, _flex:row-reverse directly without needing separate _flex-direction: or _flex-wrap: utilities.

…ords

The _flex: utility now mirrors Tailwind's flex-* family: direction keywords
(row/col/column and reverses) route to flex-direction, wrap keywords
(wrap/nowrap/wrap-reverse) route to flex-wrap, and shorthand values
(1/auto/initial/none) map to flex. Adds column/column-reverse full-word
aliases to flex-direction and column/column-dense aliases to grid-auto-flow.
@changeset-bot

changeset-bot Bot commented Jul 5, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 48a9fc6

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

This PR includes changesets to release 2 packages
Name Type
@styleframe/theme Minor
@styleframe/playground Patch

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

vercel Bot commented Jul 5, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
storybook-styleframe-dev Ready Ready Preview, Comment Jul 5, 2026 1:03pm
styleframe-dev Ready Ready Preview, Comment Jul 5, 2026 1:03pm

Request Review

@codecov

codecov Bot commented Jul 5, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

@alexgrozav alexgrozav merged commit db48cd6 into main Jul 5, 2026
15 checks passed
@alexgrozav alexgrozav deleted the alexgrozav/utility-class-preset branch July 5, 2026 13:07
@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