flutter_html_css_core

The CSS parsing helpers the flutter_html_css_* extensions share: an inline style splitter, a length reader, and the record of what flutter_html 3.0.0 can render. It renders nothing itself, and it is not an extension. Register it in Html(extensions: [...]) and nothing happens, because there is nothing to register.

Features

  • Splits a style="" attribute into ordered declarations, with !important as a flag rather than as text.
  • Keeps a ; inside url("a;b.png") and a , inside rgb(1, 2, 3) where they are.
  • Rewrites chosen declarations in place and copies the rest byte for byte.
  • Reads px, em, rem, pt and a percentage, with a sign, a bare .5 and an exponent.
  • Resolves a length to logical pixels, or returns null when the anchor it needs is missing.
  • Names the 51 CSS properties flutter_html 3.0.0 maps onto a Style.
  • Names the ten companion extensions of the family and the properties each one renders.

Getting started

dependencies:
  flutter_html_css_core: ^0.1.0

import 'package:flutter_html_css_core/flutter_html_css_core.dart';

The library imports neither flutter_html nor dart:ui, so it adds no version constraint between your app and the next flutter_html release.

Usage

Read an inline style:

final declarations = splitDeclarations('color: red !important; width: 50%');

print(declarations.first.property);  // color
print(declarations.first.value);     // red
print(declarations.first.important); // true
print(declarations.toMap());         // {color: red, width: 50%}

Rewrite one property and leave the rest alone:

final rewritten = rewriteDeclarations(
  'margin:1px;color:  teal  ;background:url("a;b.png")',
  {'color'},
  (property, value) => ' rgba(0, 128, 128, 1.0)',
);
// margin:1px;color: rgba(0, 128, 128, 1.0);background:url("a;b.png")

rewriteDeclarations returns null when nothing changes. That is the signal to leave the element's style attribute alone, and it makes a second pass a no-op.

Resolve a length:

final length = CssLength.parse('1.5em')!;

print(length.unit);               // CssLengthUnit.em
print(length.resolve(em: 20));    // 30.0
print(length.resolve());          // null, because no em anchor was given
print(CssLength.parse('12pt')!.resolve()); // 16.0

A missing anchor gives null rather than a guess. A guessed em renders at the wrong size with no error and no warning.

Ask whether a declaration survives:

isRenderableDeclaration('color', 'red');          // true
isRenderableDeclaration('border-radius', '4px');  // false
isRenderableDeclaration('display', 'flex');       // false

isRenderableDeclaration(
  'display',
  'flex',
  extraSupportedDisplayValues: {'flex'},
);                                                // true

Limitations

  • No colour parsing. That is flutter_html_css_color, which needs dart:ui.
  • No calc(), no var() and no viewport unit. CssLength.parse returns null for each, because resolving them needs a CSS engine this family does not carry.
  • A bare number parses as unitless, not as px. Only zero is valid CSS without a unit. Pass unitlessAsPixels: true to read a hand-written margin: 4 as 4px.
  • The support model is hand-derived from flutter_html 3.0.0 and cannot be read at runtime. Re-derive it when the family moves past 3.0.0.

Additional information

Source and issues: gitlab.com/Chaos02_Flutter/flutter_html_css_core.

The extensions that use it are listed under the chaosworld.cc publisher.

Libraries

flutter_html_css_core
Shared CSS parsing helpers for the flutter_html extension family.