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.