jaspr_class_scope

Locally scoped CSS class names for Jaspr components: a name written in one component cannot style another component's markup.

Usage

dart pub add jaspr_class_scope
dart pub add --dev jaspr_class_scope_builder build_runner

part 'hero.scopes.dart';

@scopedCss
class Hero extends StatelessComponent {
  static const _class = _$HeroScope;

  static final _grid = _class('grid');
  static final _title = _class('title');

  @css
  static List<StyleRule> get styles => [
    css(_grid.selector).styles(display: Display.grid),
    css(_title.selector).styles(fontSize: 3.rem),
  ];

  @override
  Component build(BuildContext context) =>
      div(classes: _grid.name, [h1(classes: _title.name, [text('Hero')])]);
}

After dart run build_runner build, _grid and _title render as grid and title with a suffix belonging to Hero, and another component's _class('grid') gets a different one. A raw 'grid' string elsewhere matches neither. The scope itself comes from jaspr_class_scope_builder.

Classes another file knows by name

A class a script looks up or a hand-written stylesheet styles renders as written:

static const copyButton = ClassName.shared('js-copy');

Two classes on one element

final primary = _class('button') + _class('primary');

primary.name; // the two classes, space-separated
primary.selector; // the two classes, for an element carrying both

🛠️ Maintained by LeanCode

This package is built with 💙 by LeanCode. We are top-tier experts focused on Flutter Enterprise solutions.

Why LeanCode?

• Creators of Patrol – the next-gen testing framework for Flutter.

• Production-Ready – We use this package in apps with millions of users.

• Full-Cycle Product Development – We take your product from scratch to long-term maintenance.