jaspr_class_scope_builder 0.1.0

Build-time generator for jaspr_class_scope: gives every Jaspr component locally scoped CSS class names, so one component's styles cannot reach another.

jaspr_class_scope_builder

Build-time generator for jaspr_class_scope: gives every Jaspr component locally scoped CSS class names, so one component's styles cannot reach another.

Usage

dependencies:
  jaspr_class_scope: ^0.1.0

dev_dependencies:
  build_runner: ^2.4.0
  jaspr_class_scope_builder: ^0.1.0

import 'package:jaspr_class_scope/jaspr_class_scope.dart';

part 'hero.scopes.dart';

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

  static final _grid = _class('grid');
}

Run dart run build_runner build. It writes hero.scopes.dart next to hero.dart:

part of 'hero.dart';

const _$HeroScope = ClassScope('Hero', '7en7oj');

The suffix is derived from the package name, the file path and the class name, so _grid renders as grid-7en7oj, and two components with the same name get different suffixes. Renaming or moving Hero changes its suffix.

Every @scopedCss class in the file gets a constant named after it, so CardGrid gives _$CardGridScope. A file without the part directive is skipped.

The check phase

Two components can end up with the same suffix, rarely. A second builder checks for that, so it fails the build instead of a page:

[SEVERE] jaspr_class_scope_builder:class_scope_check on $package$:
Hero (site|lib/marketing/hero.dart) and Hero (site|lib/components/hero.dart)
both scope to the same suffix. Rename or move one of them.

It covers the whole build, not just your own package: every package lists its scopes for the check to read, so a component of a dependency is checked against yours. Fixing such a pair means renaming or moving your own component, since the other one is not yours to move.

---

🛠️ 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.

Need help with your Flutter project?

👉 Hire our team   •   Check our other packages