flutter_html_css_color #

A flutter_html extension that corrects the CSS colours flutter_html 3.0.0 reads wrong. An 8-digit hex renders a different colour, space-separated hsl() renders black, and rgb(255 0 0), hwb(), rebeccapurple and transparent are dropped. There is no error and no warning.

Features #

Every number is measured against flutter_html 3.0.0 and pinned by a test. csslib 1.0.2 holds aliceblue as five hex digits.

One rewrite of the style attribute covers color, background-color, border and its four sides, text-decoration, text-decoration-color and text-shadow, plus border-color, the border-*-color longhands and outline for the sibling that renders them.

Getting started #

dependencies:
  flutter_html: ^3.0.0
  flutter_html_css_color: ^0.2.0

Usage #

import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html_css_color/flutter_html_css_color.dart';

Html(
  data: '''
    <div style="background-color: hsl(210 40% 96%);
                color: rebeccapurple;">
      A card flutter_html cannot colour
    </div>
  ''',
  extensions: const [CssColorHtmlExtension()],
);

parseCssColorValue reads one colour value without an Html widget. Pass its currentColor argument when the value can be currentcolor.

Before you register it #

List this extension before flutter_html_css_border_radius. Both act at the preStyling step, where flutter_html runs every extension that matches in registration order. That package reads border from the inline style with a colour parser of its own, which knows six colour names and no hsl().

Html(
  data: '<div style="border: 2px solid hsl(0 100% 50%); border-radius: 8px">C</div>',
  extensions: const [
    CssColorHtmlExtension(), // must come first
    CssBorderRadiusHtmlExtension(),
  ],
);

Measured on that snippet against its version 0.1.1: listed first the clip's border is 0xFFFF0000, listed second 0xFF000000.

Order against flutter_html_css_border does not matter. It folds border-color into a border shorthand at the same step, passing the colour token through, so either order hands flutter_html an rgba(). Measured on border-color: hsl(0 100% 50%): 0xFFFF0000 both ways. Without it those longhands stay dropped.

Order against a TagExtension does not matter, which is measured. It builds its own widget, which reads no Style.

flutter_html_bootstrap 0.1.1 and flutter_html_vuetify 0.1.0 need no entry for this extension: neither suppresses a colour declaration, and both write the legacy rgba(r, g, b, a) form. Bootstrap is measured, Vuetify read from its source.

Limitations #

• lab(), lch(), oklab(), oklch(), color(), color-mix(), calc() and var() stay dropped. This package carries no colour engine beyond sRGB.
• border: 2px solid with no colour renders black. CSS asks for the element's own colour. This extension replaces a colour token and never adds one.
• currentColor resolves against the nearest inline color on the element or an ancestor, and is left alone when there is none. In color itself it is always left alone.
• text-shadow whose colour is a word that is not a CSS colour name still throws inside flutter_html. Only a value this package parses reaches the parser corrected.
• A <style> block and an external stylesheet are not read. flutter_html_css_stylesheet writes those declarations into the inline style first.

The measurement table records every case.

Additional information #

Issues and merge requests go to the GitLab repository.

CI, publishing and Renovate are described in CONTRIBUTING.md.