feat: complete mix_tailwinds with visual parity testing #792
Conversation
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
Implements Tailwind-inspired utility layer for Mix 2.0 as standalone proof-of-concept package with comprehensive review documentation. Core Implementation: - TwConfig: Standard Tailwind token maps (spacing, colors, breakpoints, etc.) - TwParserV2: Token parser with prefix recursion and atomic handlers - Div/Span widgets: Bridge Tailwind classes to Mix FlexBox/Box/Text - Basic test coverage validating core functionality Documentation: - decisions.md: Review findings, architectural decisions, P1/P2/P3 priorities - plan.md: Detailed implementation roadmap with 32 tracked P1 tasks Status: Phase 1 ✅ Complete | Phase 2 Ready (0/5 P1 fixes pending)
Tailwind CSS behavior: - `flex` = horizontal row layout immediately - `md:flex` = vertical block below md, horizontal row at md+ - Our previous implementation defaulted to row in both cases Fix: - FlexBox now defaults to column (block-like) when ONLY prefixed flex tokens present (e.g., md:flex, lg:flex-row) - Preserves row default when base flex token exists (flex, flex-row) - Matches Tailwind: responsive flex acts like block until breakpoint Changes: - parseFlex() checks for base (non-prefixed) flex tokens - Defaults to column() if only prefixed tokens found - Added test verifying parser behavior - Updated documentation status (Phase 2 complete markers) Tests: 17/17 passing (all P1 fixes + Tailwind semantics)
Remove verbose working documentation (plan.md, decisions.md, diagnostic guides, deep analysis) that has been superseded by the final implementation. Keep only operational guides (COMPARISON_TESTING.md) and exploration test infrastructure for visual parity validation. - Remove plan.md (executed implementation plan) - Remove decisions.md (verbose decisions log) - Remove DIAGNOSTIC_GUIDE.md (fixed issues) - Remove DEEP_ANALYSIS.md (analysis conclusions implemented) - Keep COMPARISON_TESTING.md for visual parity workflows - All tests passing (42/42)
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
To view this pull requests documentation preview, visit the following URL: Documentation is deployed and generated using docs.page. |
github-actions
bot
added
documentation
- Update widget_test.dart to use TailwindParityApp instead of non-existent MyApp - Remove unused imports (dart:ui, mix) from text_rendering_exploration_test.dart - Replace deprecated tester.binding.window API with tester.view in parity_golden_test.dart
Adds an extension method that wraps TextStyleMix with the existing WidgetModifierConfig.defaultTextStyle API to fix undefined method errors.
Clearly documents that mix_tailwinds is highly experimental and should be considered a proof of concept with an unstable API.
wantsFlex() now returns true for items-*, justify-*, and gap-* tokens, eliminating the need for explicit 'flex' when using flex-only properties.
Implement parseAnimation() method to parse Tailwind transition tokens and apply CurveAnimationConfig to styles. Supports transition triggers, duration, delay, and easing curves with Tailwind defaults (150ms, easeOut).
Replace arbitrary numeric parsing for duration-* and delay-* tokens with config-based lookup against predefined Tailwind values. This ensures only standard values (0, 75, 100, 150, 200, 300, 500, 700, 1000) are accepted, with unsupported values triggering warnings. - Add durations/delays maps to TwConfig - Add validation sets in TwParser for valid keys - Update tests to verify warnings for non-standard values
leoafarias
force-pushed
the
feature/mix_tailwinds
branch
from
6f691e3 to
a291f07
Compare
Changes: - Fix flex-none/shrink-0 to use FlexFit.loose for proper intrinsic sizing - Add textBaseline to items-baseline for Flutter requirement - Add softWrap(false) to truncate token - Add border-0 support to borderWidths config - Document flex item token behavior in README (basis-1/2 no-op, etc.) - Clarify onUnsupported callback behavior for widget-layer tokens - Refactor padding/margin parsing into shared _SpacingToken helpers - Update transform token comments to reflect grouped transform handling - Add tests for flex-none and items-baseline behavior
…dings Fixes Vercel deployment failure caused by missing platform-specific native bindings for @napi-rs/simple-git (nextra dependency). The npm CLI has a known bug (#4828) where package-lock.json generated on one platform may not include correct bindings for other platforms. Regenerating yarn.lock from scratch resolves this by including all platform-specific optional dependencies.
Refactor directional border and radius parsing to use unified token types (_BorderToken, _RadiusToken) with kind enums, eliminating duplicate Box/FlexBox application functions. Rename Warn typedef to TokenWarningCallback for clarity.
- Convert 9 traditional switch statements to Dart 3.0+ switch expressions - Rename `Warn` typedef to `TokenWarningCallback` for clarity - Apply dart format to affected files Switch expression conversions: - tw_parser.dart: _applySpacingToFlex, _applySpacingToBox, _applyBorderToFlex, _applyBorderToBox, _applyRadiusToFlex, _applyRadiusToBox - tw_widget.dart: _resolveFlexBehavior, _resolveSelfAlignment, _applySelfAlignment Net reduction: ~54 lines (182 insertions, 236 deletions)
In CSS, margin is outside the hit-test area - hover/press only triggers on the border-box (content + padding + border). This change ensures mix_tailwinds follows the same behavior. Changes: - Add _CssSemanticBox widget that extracts margin and applies it OUTSIDE the MixInteractionDetector - Add _CssSemanticFlexBox widget with same pattern for flex layouts - Update _buildResponsiveBox and _buildResponsiveFlex to use new widgets - Update tests to check for Flex/Container instead of FlexBox/Box Widget tree before (wrong): MixInteractionDetector → Container(margin: 16px) Widget tree after (correct): Padding(16px) → MixInteractionDetector → Container(no margin)
- Added _BorderAccum and _PrefixedBorders classes to manage border properties and variants. - Updated TwParser to support grouped border tokens and apply them correctly to FlexBoxStyler and BoxStyler. - Introduced new P component as a block-level text element, replacing Span for better semantic structure. - Implemented TruncatedP for automatic text truncation in flex containers. - Updated tests to cover new border behaviors, min-width constraints, and component changes. - Modified README to clarify line-height control and added examples for new components.
leoafarias
force-pushed
the
feature/mix_tailwinds
branch
from
4f28551 to
b691631
Compare
…spec.yaml for SDK compatibility - Added a new P widget for rendering paragraphs with Tailwind styles. - Introduced Span widget for inline text elements styled with Tailwind. - Updated the _buildResponsiveFlex function to handle flex children more effectively. - Modified pubspec.yaml to require Dart SDK version >=3.10.0 and Flutter version >=3.38.1. - Cleaned up smoke tests to reflect changes in P widget usage.
- Deleted unused image files from .playwright-mcp directory. - Added .gitignore to exclude visual comparison artifacts. - Introduced CLAUDE.md for agent guide and updated COMPARISON_TESTING.md for improved visual comparison instructions. - Refactored example Flutter app to utilize new heading components (H1, H2, etc.) for better semantic structure. - Enhanced tw_parser.dart to support default text styles and line heights consistent with Tailwind CSS. - Added new heading components (H1, H2, H3, H4, H5, H6) to tw_widget.dart for better alignment with Tailwind's structure. - Updated package.json scripts for streamlined visual comparison processes. - Removed outdated screenshot capture and comparison scripts.
- Implemented CardAlertPreview widget to match Tailwind reference for card alerts. - Updated main.dart to support screenshot mode for the new card alert example. - Added real_tailwind/card-alert.html for visual reference. - Enhanced TwConfig to handle opacity modifiers in color definitions. - Introduced gradient support in TwParser for Tailwind gradient tokens. - Updated tests to validate animation parsing and gradient handling. - Removed deprecated transform parsing tests to streamline codebase.
…properties - Introduced value types for Tailwind CSS including TwUnit, TwValue, TwLengthValue, TwColorValue, TwEnumValue, TwFractionValue, TwMatrixValue, TwGradientValue, TwDurationValue, and TwCurveValue. - Defined Tailwind properties as an enum (TwProperty) covering spacing, sizing, layout, background, border, typography, effects, transform, animation, and miscellaneous properties. - Created variant types for interaction, breakpoint, and theme variants. - Implemented TwParsedClass to represent parsed Tailwind classes with resolved values and variants. - Added functional and named plugin types for Tailwind properties with corresponding mappings. - Established helper functions for variant key generation and root prefix finding. - Included gradient direction mappings and default line heights for Tailwind CSS.
… improved parsing logic
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 - New feature package
Description
Complete implementation of mix_tailwinds Flutter package with visual parity testing infrastructure. Package provides Tailwind CSS utility class support for Flutter apps using the Mix styling library.
Changes
Review Checklist
Additional Information (optional)
The 11.53% visual diff from Tailwind CSS is the realistic floor given platform rendering differences (text metrics, shadow rendering, anti-aliasing). Layout structure matches exactly.