feat: add mix_tailwinds Tailwind utility layer (POC)#839
Open
leoafarias wants to merge 58 commits intomainfrom
Open
feat: add mix_tailwinds Tailwind utility layer (POC)#839leoafarias wants to merge 58 commits intomainfrom
leoafarias wants to merge 58 commits intomainfrom
Conversation
|
To view this pull requests documentation preview, visit the following URL: Documentation is deployed and generated using docs.page. |
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
4 tasks
github-actions
bot
added
documentation
leoafarias
changed the title
- Remove default CrossAxisAlignment.start from flex display/direction to match CSS flexbox stretch behavior - Fix gap edge padding to not add extra space on first/last children - Remove implicit flex:1 wrapping for single children in flex containers - Update tests to verify corrected gap edge padding behavior
- Add shrink/shrink-0 to flex item decorators so they participate in flex layout (was silently ignored) - Make TwConfig maps unmodifiable so InheritedWidget updateShouldNotify identity comparison works correctly - Deduplicate colon-parsing logic by delegating to shared utility - Remove ring/opacity- from box utility prefixes (not yet implemented) - Gate flex > 0 in unbounded contexts to match CSS behavior where flex-grow has no effect in auto main-size containers - Add _TwFlexScope InheritedWidget with hybrid RenderFlex constraints fallback covering both Tailwind and native flex parents - Add golden tests for shrink, ring, opacity, duration, delay utilities - Add regression tests for flex in ScrollView scenarios
leoafarias
force-pushed
the
feature/mix-tailwinds
branch
from
c1e31af to
8066972
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Adds an experimental mix_tailwinds (Tailwind-like utility layer for Mix 2.0) with a parity-focused example app, golden tests, and visual comparison tooling, plus a small set of supporting changes in core Mix and the docs site.
Changes:
- Introduces
packages/mix_tailwinds(config, parsing utils, provider, example app) and extensive docs/tests/goldens for parity validation. - Adds Playwright + pixelmatch-based visual comparison tooling and Tailwind reference HTML samples for side-by-side diffs.
- Updates Mix core with a new
BlurModifier, and adjusts some tests/docs (keyframe API examples, widgetbook workflow disabling, etc).
Reviewed changes
Copilot reviewed 54 out of 77 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| website/src/app/examples/tailwind-plan-card/page.tsx | Adds a Tailwind reference page with a viewport width slider and sample cards. |
| website/screenshots/.gitignore | Ignores generated screenshot PNGs. |
| website/package.json | Adds screenshot/compare scripts and image-diff dependencies for visual testing. |
| packages/mix_tailwinds/tool/visual-comparison/run-visual-comparison.mjs | New CLI script to capture Tailwind + Flutter screenshots and generate pixel diffs. |
| packages/mix_tailwinds/tool/visual-comparison/package.json | Node package definition for the visual comparison tool. |
| packages/mix_tailwinds/tool/visual-comparison/package-lock.json | Lockfile for the visual comparison tool dependencies. |
| packages/mix_tailwinds/test/tw_utils_test.dart | Unit tests for Tailwind token parsing utilities. |
| packages/mix_tailwinds/test/tw_config_test.dart | Tests for TwConfig and TwConfigProvider behavior. |
| packages/mix_tailwinds/test/smoke_test.dart | Basic widget smoke test ensuring supported tokens render without warnings. |
| packages/mix_tailwinds/pubspec.yaml | Defines the new mix_tailwinds Flutter package and its dependencies. |
| packages/mix_tailwinds/lib/src/tw_utils.dart | Adds parsing helpers (colon outside brackets, fraction parsing). |
| packages/mix_tailwinds/lib/src/tw_config.dart | Adds Tailwind-like configuration (scales/colors/breakpoints) and provider. |
| packages/mix_tailwinds/lib/mix_tailwinds.dart | Public exports for the new package. |
| packages/mix_tailwinds/example/test/widget_test.dart | Example app smoke test. |
| packages/mix_tailwinds/example/test/text_rendering_exploration_test.dart | Golden “exploration” suite for text rendering experiments. |
| packages/mix_tailwinds/example/test/shrink_golden_test.dart | Golden test for shrink/shrink-0 utilities. |
| packages/mix_tailwinds/example/test/ring_golden_test.dart | Golden test for ring utilities. |
| packages/mix_tailwinds/example/test/parity_golden_test.dart | Golden tests for plan-card parity at multiple widths. |
| packages/mix_tailwinds/example/test/opacity_golden_test.dart | Golden test for opacity utilities. |
| packages/mix_tailwinds/example/test/goldens/shrink-utilities-360.png | Golden image for shrink utilities. |
| packages/mix_tailwinds/example/test/goldens/ring-utilities-360.png | Golden image for ring utilities. |
| packages/mix_tailwinds/example/test/goldens/opacity-utilities-360.png | Golden image for opacity utilities. |
| packages/mix_tailwinds/example/test/goldens/exploration/mix-tailwinds-current.png | Golden image for current mix_tailwinds text output. |
| packages/mix_tailwinds/example/test/goldens/exploration/exp-e-tight-even.png | Golden image for text rendering experiment E. |
| packages/mix_tailwinds/example/test/goldens/exploration/exp-d2-80pct-height.png | Golden image for text rendering experiment D2. |
| packages/mix_tailwinds/example/test/goldens/exploration/exp-d1-90pct-height.png | Golden image for text rendering experiment D1. |
| packages/mix_tailwinds/example/test/goldens/exploration/exp-c3-even-no-both.png | Golden image for text rendering experiment C3. |
| packages/mix_tailwinds/example/test/goldens/exploration/exp-c2-even-no-last.png | Golden image for text rendering experiment C2. |
| packages/mix_tailwinds/example/test/goldens/exploration/exp-c1-even-no-first.png | Golden image for text rendering experiment C1. |
| packages/mix_tailwinds/example/test/goldens/exploration/exp-b2-tw-even.png | Golden image for text rendering experiment B2. |
| packages/mix_tailwinds/example/test/goldens/exploration/exp-b1-tw-proportional.png | Golden image for text rendering experiment B1. |
| packages/mix_tailwinds/example/test/goldens/exploration/exp-a-flutter-default.png | Golden image for text rendering experiment A. |
| packages/mix_tailwinds/example/test/goldens/duration-utilities-360.png | Golden image for duration utilities. |
| packages/mix_tailwinds/example/test/goldens/delay-utilities-360.png | Golden image for delay utilities. |
| packages/mix_tailwinds/example/test/duration_delay_golden_test.dart | Golden tests for duration/delay timing utilities. |
| packages/mix_tailwinds/example/test/compare_exploration.mjs | Node script to diff text exploration goldens vs Tailwind reference. |
| packages/mix_tailwinds/example/real_tailwind/text_sample.html | Tailwind CDN reference HTML for text rendering comparisons. |
| packages/mix_tailwinds/example/real_tailwind/index.html | Tailwind CDN reference HTML for dashboard parity sample. |
| packages/mix_tailwinds/example/real_tailwind/card-alert.html | Tailwind CDN reference HTML for card-alert parity sample. |
| packages/mix_tailwinds/example/pubspec.yaml | Example app pubspec for mix_tailwinds_example. |
| packages/mix_tailwinds/example/lib/main.dart | Flutter parity app (including screenshot mode for Playwright capture). |
| packages/mix_tailwinds/example/lib/card_alert_preview.dart | Flutter implementation of the card-alert reference. |
| packages/mix_tailwinds/example/analysis_options.yaml | Lints configuration for the example app. |
| packages/mix_tailwinds/example/README.md | Documentation for running parity playground and comparison workflow. |
| packages/mix_tailwinds/example/.metadata | Flutter project metadata for the example app. |
| packages/mix_tailwinds/example/.gitignore | Standard Flutter example ignore rules. |
| packages/mix_tailwinds/README.md | Package README (experimental warning, usage, supported tokens, config). |
| packages/mix_tailwinds/FLUTTER_ADAPTATIONS.md | Documents intentional semantic differences vs Tailwind CSS. |
| packages/mix_tailwinds/COMPARISON_TESTING.md | Guide for running automated Flutter vs Tailwind visual diffing. |
| packages/mix_tailwinds/CLAUDE.md | Agent/workflow guide and intended structure for parity work. |
| packages/mix_tailwinds/AGENTS.md | Points agents to CLAUDE.md. |
| packages/mix_tailwinds/.gitignore | Ignores visual comparison output and node_modules for the tool. |
| packages/mix/test/src/theme/tokens/font_weight_token_integration_test.dart | Removes a redundant/obsolete direct property access assertion. |
| packages/mix/test/src/specs/pressable/pressable_widget_test.dart | Updates semantics assertion API usage. |
| packages/mix/test/src/modifiers/blur_modifier_test.dart | Adds unit tests for new BlurModifier and mix class. |
| packages/mix/lib/src/modifiers/widget_modifier_config.dart | Registers new blur modifier factory in modifier config. |
| packages/mix/lib/src/modifiers/blur_modifier.dart | Adds new BlurModifier + BlurModifierMix. |
| packages/mix/lib/mix.dart | Exports new blur modifier from the public API. |
| examples/lib/docs/guides/animations.dart | Updates keyframe track examples to use inferred generics. |
| examples/lib/api/animation/keyframe.switch.dart | Updates keyframe track examples to use inferred generics. |
| examples/lib/api/animation/keyframe.loop.dart | Updates keyframe track examples to use inferred generics. |
| examples/lib/api/animation/keyframe.icon_selector.dart | Updates keyframe track examples to use inferred generics. |
| examples/lib/api/animation/keyframe.heart.dart | Updates keyframe track examples to use inferred generics. |
| examples/README.md | Updates docs to reflect dot-notation usage and newer widget names/requirements. |
| README.md | Updates top-level docs for dot-notation availability and Flutter version requirement. |
| .gitignore | Ignores root CLAUDE.md while explicitly allowing packages/mix_tailwinds/CLAUDE.md. |
| .github/workflows/widgetbook.yml | Replaces commented-out workflow with an explicitly disabled manual workflow. |
Files not reviewed (1)
- packages/mix_tailwinds/tool/visual-comparison/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/mix_tailwinds/tool/visual-comparison/run-visual-comparison.mjs
Outdated
Show resolved
Hide resolved
…IONS.md Delete FUTURE_WORK.md (internal planning artifact, not needed in package). Update FLUTTER_ADAPTATIONS.md to reflect current code accuracy: - Percent sizing: clarify values are parsed but not applied (not silently dropped) - Short hex colors: warn they silently produce wrong colors - Update summary table to match corrected descriptions
The Format Check job used `channel: 'stable'` which resolved to the latest Flutter release (3.38.9), causing formatter drift from the project's pinned version (3.38.1). Use kuhnroyal/flutter-fvm- config-action to read the version from .fvmrc, matching the pattern already used in the changelog workflow.
- Remove non-existent website/scripts/ npm commands from package.json - Remove unused devDependencies (pixelmatch, playwright, pngjs) from website - Update example README to point to actual tool location - Use fileURLToPath for cross-platform __dirname derivation in mjs files
…ifacts Delete one-off exploration script, test, and goldens that were used for a completed text rendering comparison experiment. The script had no package.json for its deps (pixelmatch, pngjs) and couldn't run.
- Export tw_semantic from mix_tailwinds lib for public API - Refactor TwParser to use factory pattern for cleaner initialization - Add hex color validation (6/8-digit only) with tests for arbitrary colors - Add TwConfig.colorOf() with opacity modifier support (e.g., white/50) - Cache whitespace regex in tw_widget to avoid repeated compilation - Update blur_modifier resolve() to use MixOps.resolve() for consistency - Add blur() method to WidgetModifierConfig fluent API - Register BlurModifier in default modifier order and defaults map - Fix blur_modifier_test to use sync test instead of testWidgets - Update example README repository URL
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.
Related issue
N/A
Description
Adds a Tailwind-inspired utility layer for Mix 2.0 as an experimental proof of concept (mix_tailwinds), plus extensive docs and example app updates.
Changes
Review Checklist
Additional Information (optional)
mix_tailwinds is experimental and intentionally labeled as a POC.