flutter_html_css_background #

A flutter_html extension that renders the colour of a CSS background shorthand. flutter_html 3.0.0 has a case for background-color and none for background: <div style="background: #fff"> has no background, <div style="background-color: #fff"> renders white. There is no error and no warning. The image and every other component of the shorthand stay unrendered.

Features #

Every row is measured against flutter_html 3.0.0 and pinned by a test.

The shorthand becomes background-color: <colour> at the preStyling step, in place, so the last declaration wins as in CSS. The colour token is written verbatim and !important is kept.

Getting started #

dependencies:
  flutter_html: ^3.0.0
  flutter_html_css_background: ^0.2.0

Usage #

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

Html(
  data: '''
    <div style="background: #eef; padding: 8px">A card</div>
    <p style="background: url(paper.png) #fffbe6">Colour only. The image is dropped.</p>
  ''',
  extensions: const [CssBackgroundHtmlExtension()],
);

Before you register it #

List this extension after flutter_html_css_stylesheet and before flutter_html_css_color. All three act at the preStyling step, where flutter_html runs every extension that matches in registration order.

Html(
  data: '<style>.card { background: hsl(210 40% 96%) }</style><div class="card">C</div>',
  extensions: const [
    CssStylesheetHtmlExtension(), // must come first
    CssBackgroundHtmlExtension(),
    CssColorHtmlExtension(), // must come last
  ],
);

The stylesheet package writes the rule into the inline style. Measured against its 0.1.0 on .card { background: red }: red in this order, no background with the stylesheet package listed after. The colour package corrects the token in background-color and has no case for background. Measured against its 0.1.0 on background: hsl(0 100% 50%): 0xFFFF0000 in this order, 0xFF000000 with the colour package listed before, because flutter_html reads a space-separated hsl() as black. Without the colour package every colour defect of flutter_html applies to the token: background: #ff000080 renders 0xFF000080 and background: rebeccapurple is dropped.

Order against flutter_html_css_border 0.1.0, flutter_html_bootstrap 0.1.2 and flutter_html_vuetify 0.1.1 does not matter, which is measured. The border package rewrites other declarations of the same attribute. The two utility-class packages expand bg-* into the background-color longhand and never write the shorthand.

Limitations #

• The image, url() and every gradient, the position, the size, the repeat, the attachment, the origin and the clip are dropped. flutter_html 3.0.0 has no case for any of their longhands, and background-image: url(a.png) renders nothing with or without this extension. There is no error and no warning.
• background: none resets an earlier inline background-color. It does not reset a <style> rule's colour unless the colour package is listed after, because flutter_html drops transparent. It never resets Html(style:), which flutter_html applies last.
• !important changes no precedence. flutter_html reads none.
• A value this package cannot read as a shorthand, such as var(--bg), two colours or a colour in a non-final layer, is left as written and dropped.
• Only the inline style attribute is read.

The measurement table records every case and every order.

Additional information #

Issues and merge requests go to the GitLab repository.

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