Style Parser

• Introduction
• The wStyle Helper
• WindParser Engine
• Performance & Caching
• Context Extensions

Introduction

While Wind widgets like WDiv and WText are the primary way to use utility classes, you may sometimes need to parse utility strings programmatically. The Style Parser API allows you to convert any className string into a structured WindStyle object that can be applied to standard Flutter widgets.

The wStyle Helper

The wStyle function is a global helper that provides the simplest way to parse utility classes on the fly.

WindStyle wStyle(BuildContext context, String className)

Usage Example

This is particularly useful when building custom widgets that need to accept Wind utilities for styling:

Widget buildCustomCard(BuildContext context, {String? className}) {
  final style = wStyle(context, className ?? 'bg-white p-4 shadow-md');
  
  return Container(
    decoration: style.decoration,
    padding: style.padding,
    child: Text('Styled with WindStyle'),
  );
}

WindParser Engine

For more advanced scenarios, you can interface directly with WindParser.parse. This method allows for base style merging and manual state injection.

static WindStyle parse(
  String className,
  BuildContext context, {
  WindStyle? baseStyle,
  Set? states,
})

Parameters

Accessing Parsed Values

The resulting WindStyle object contains resolved Flutter properties:

final style = wStyle(context, 'bg-red-500 text-lg font-bold');

Color? color = style.decoration?.color; // Resolved bg-red-500
TextStyle? textStyle = style.textStyle;  // Resolved text-lg and font-bold
EdgeInsets? padding = style.padding;     // resolved p-* classes

Performance & Caching

Wind uses an internal memoization system to ensure that parsing is extremely fast. The WindParser maintains a static cache keyed by a combination of:

1. The raw className string.
2. The current active breakpoint (sm, md, etc.).
3. The current brightness (Light/Dark mode).
4. The target platform (iOS/Android/Web).
5. The active interaction states (hover, focus, etc.).

[!NOTE] Because of this caching, calling wStyle multiple times with the same parameters in a build method has negligible performance impact.

Context Extensions

For cleaner syntax, Wind provides a BuildContext extension that mirrors the global helper:

// Using global helper
final style = wStyle(context, 'p-4');

// Using extension
final style = context.wStyleExt('p-4');

Related Documentation

• Context Extensions
• Color Helpers
• Theming Concepts