example/example.md

Example #

This package renders nothing. It is the CSS parsing code the flutter_html_css_* extensions share, so the example is what an extension does with it rather than a widget tree.

import 'package:flutter_html_css_core/flutter_html_css_core.dart';

void main() {
  // Read an inline style. The result is ordered, because `overflow` and
  // `overflow-x` write the same axis and the later one wins.
  final declarations = splitDeclarations(
    'overflow: hidden; overflow-x: visible; font-size: 1.5rem !important',
  );
  for (final declaration in declarations) {
    print('${declaration.property} = ${declaration.value} '
        '(important: ${declaration.important})');
  }

  // Read a length and resolve it against the anchors the caller holds.
  final size = CssLength.parse('1.5rem')!;
  print(size.resolve());            // 21.0, against kFlutterHtmlRootFontSize
  print(size.resolve(rem: 16));     // 24.0
  print(CssLength.parse('1.5em')!.resolve()); // null, no em anchor

  // Ask whether flutter_html renders a declaration on its own.
  print(isRenderableDeclaration('font-size', '1.5rem')); // false
  print(isRenderableDeclaration('font-size', '24px'));   // true

  // Rewrite one property and leave the rest byte for byte.
  final rewritten = rewriteDeclarations(
    'margin:1px;font-size:  1.5rem  ;background:url("a;b.png")',
    {'font-size'},
    (property, value) {
      final length = CssLength.parse(value);
      final px = length?.resolve();
      return px == null ? null : ' ${formatPx(px)}';
    },
  );
  print(rewritten);
  // margin:1px;font-size: 21px;background:url("a;b.png")
}

What each group is for #

splitDeclarations gives an ordered list, not a map, so a property declared twice keeps both positions. Call toMap() where only the cascade inside the block matters.

rewriteDeclarations returns null when nothing changes. An extension uses that to leave the style attribute untouched, which also makes the rewrite idempotent.

CssLength.resolve returns null when the anchor it needs is missing. An em needs the element's own font size, which the preStyling step does not have, and a percentage needs a basis. Dropping the declaration is what CSS does with a length it cannot resolve.

isRenderableDeclaration answers for bare flutter_html 3.0.0. A registered companion widens it: pass the unions from detectRegisteredCompanions through extraSupportedProperties, extraSupportedDisplayValues and extraSupportedFontSizeUnits. display and font-size are widened by value, never by property.