Move Style to new file and prep for css parsing. Update README.md

README.md

@@ -2,57 +2,35 @@
 [![pub package](https://img.shields.io/pub/v/flutter_html.svg)](https://pub.dev/packages/flutter_html)
 [![CircleCI](https://circleci.com/gh/Sub6Resources/flutter_html.svg?style=svg)](https://circleci.com/gh/Sub6Resources/flutter_html)
 
-A Flutter widget for rendering static html tags as Flutter widgets. (Will render over 70 different html tags!)
+A Flutter widget for rendering html and css as Flutter widgets.
 
 ## Installing:
 
 Add the following to your `pubspec.yaml` file:
 
     dependencies:
-      flutter_html: ^0.10.1+hotfix.1
+      flutter_html: ^1.0.0-pre.1
 
 ## Currently Supported HTML Tags:
 `a`, `abbr`, `acronym`, `address`, `article`, `aside`, `b`, `bdi`, `bdo`, `big`, `blockquote`, `body`, `br`, `caption`, `cite`, `code`, `data`, `dd`, `del`, `dfn`, `div`, `dl`, `dt`, `em`, `figcaption`, `figure`, `footer`, `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `header`, `hr`, `i`, `img`, `ins`, `kbd`, `li`, `main`, `mark`, `nav`, `noscript`, `ol`, `p`, `pre`, `q`, `rp`, `rt`, `ruby`, `s`, `samp`, `section`, `small`, `span`, `strike`, `strong`, `sub`, `sup`, `table`, `tbody`, `td`, `template`, `tfoot`, `th`, `thead`, `time`, `tr`, `tt`, `u`, `ul`, `var`
 
-### Partially supported elements:
-> These are common elements that aren't yet fully supported, but won't be ignored and will still render somewhat correctly.
+## Currently Supported CSS Attributes:
 
-`center`, `font`
 
-### List of _planned_ supported elements:
-> These are elements that are planned, but present a specific challenge that makes them somewhat difficult to implement.
+### Elements with planned support:
 
-`audio`, `source`, `svg`, `track`, `video`, `wbr`
-
-### List of elements that I don't plan on implementing:
-
-> Feel free to open an issue if you have a good reason and feel like you can convince me to implement
- them. A _well written_ and _complete_ pull request implementing one of these is always welcome,
- though I cannot promise I will merge them.
-
-> Note: These unsupported tags will just be ignored.
-
-`applet`, `area`, `base`, `basefont`, `button`, `canvas`, `col`, `colgroup`, `datalist`, `details`, `dialog`, `dir`, `embed`, `fieldset`, `form`, `frame`, `frameset`, `head`, `iframe`, `input`, `label`, `legend`, `link`, `map`, `meta`, `meter`, `noframe`, `object`, `optgroup`, `option`, `output`, `param`, `picture`, `progress`, `script`, `select`, `style`, `summary`, `textarea`, `title`
-
+See the [development roadmap](https://github.com/Sub6Resources/flutter_html/wiki/Roadmap) for the list of elements and css attributes I plan on supporting.
 
 ## Why this package?
 
-This package is designed with simplicity in mind. Flutter currently does not support rendering of web content
-into the widget tree. This package is designed to be a reasonable alternative for rendering static web content
-until official support is added.
-
-### Update:
-The official Flutter WebView package has been created and is in a developer preview. It's not stable yet, so I'll continue to support this project at least until webview_flutter hits 1.0.0.
-
-Check out the official Flutter WebView package here: https://pub.dartlang.org/packages/webview_flutter
-
+This package is designed with simplicity in mind. Originally created to allow basic rendering of HTML content into the Flutter widget tree,
+this project has expanded to include support for basic CSS styling (both inline and in the `<style>` tag).
 
 ## Example Usage:
 (For a much more extensive example, look at example/main.dart).
 ```dart
     Widget html = Html(
       data: """
-        <!--For a much more extensive example, look at example/main.dart-->
         <div>
           <h1>Demo Page</h1>
           <p>This is a fantastic product that you should buy!</p>
@@ -83,10 +61,4 @@ Check out the official Flutter WebView package here: https://pub.dartlang.org/pa
         ),
       },
     );
-```
-
-## `useRichText` parameter
-
-This package has a known issue where text does not wrap correctly. Setting `useRichText` to true fixes the issue
-by using an alternate parser. The alternate parser, however, does not support the `customRender` callback, and several elements
-supported by the default parser are not supported by the alternate parser (see [#61](https://github.com/Sub6Resources/flutter_html/issues/61) for a list).
+```

example/main.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_html/block_element.dart';
 import 'package:flutter_html/flutter_html.dart';
+import 'package:flutter_html/style.dart';
 import 'package:flutter_html/styled_element.dart';
 import 'package:html/dom.dart' as dom;
 

lib/block_element.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_html/html_elements.dart';
+import 'package:flutter_html/style.dart';
 import 'package:html/dom.dart' as dom;
 
 /// A [Block] contains information about a [BlockElement] (width, height, padding, margins)

lib/content_element.dart

@@ -3,6 +3,7 @@ import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_html/html_elements.dart';
+import 'package:flutter_html/style.dart';
 import 'package:html/dom.dart' as dom;
 
 /// A [ContentElement] is a type of [StyledElement] that renders none of its [children].

lib/flutter_html.dart

@@ -3,12 +3,14 @@ library flutter_html;
 import 'package:flutter/material.dart';
 import 'package:flutter_html/html_elements.dart';
 import 'package:flutter_html/html_parser.dart';
+import 'package:flutter_html/style.dart';
 import 'image_properties.dart';
 
 class Html extends StatelessWidget {
   Html({
     Key key,
     @required this.data,
+    this.css,
     @deprecated this.padding,
     this.backgroundColor,
     @deprecated this.defaultTextStyle,
@@ -31,6 +33,7 @@ class Html extends StatelessWidget {
   }) : super(key: key);
 
   final String data;
+  final String css;
   final EdgeInsetsGeometry padding;
   final Color backgroundColor;
   final TextStyle defaultTextStyle;
@@ -88,6 +91,7 @@ class Html extends StatelessWidget {
       width: width,
       child: HtmlParser(
         html: data,
+        css: css,
         onLinkTap: onLinkTap,
         style: style,
       )

lib/html_parser.dart

@@ -1,4 +1,6 @@
 import 'dart:convert';
+import 'package:flutter_html/style.dart';
+
 import 'image_properties.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
@@ -955,11 +957,13 @@ class HtmlRichTextParser extends StatelessWidget {
 
 class HtmlParser extends StatelessWidget {
   final String html;
+  final String css;
   final OnLinkTap onLinkTap;
   final Map<String, Style> style;
 
   HtmlParser({
     this.html,
+    this.css,
     this.onLinkTap,
     this.style,
   });

lib/interactable_element.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_html/html_elements.dart';
+import 'package:flutter_html/style.dart';
 import 'package:html/dom.dart' as dom;
 
 /// An [InteractableElement] is a [StyledElement] that takes user gestures (e.g. tap).

lib/style.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_html/block_element.dart';
+
+class Style {
+  TextStyle textStyle;
+  bool preserveWhitespace;
+  int baselineOffset;
+  String before;
+  String after;
+  TextDirection textDirection;
+  Block block;
+
+  Style({
+    this.textStyle,
+    this.preserveWhitespace,
+    this.baselineOffset,
+    this.before,
+    this.after,
+    this.textDirection,
+    this.block,
+  });
+
+  @override
+  String toString() {
+    return "(Text Style: ($textStyle}),)";
+  }
+
+  Style merge(Style other) {
+    if (other == null) return this;
+
+    TextStyle mergedTextStyle = textStyle?.merge(other.textStyle);
+    Block mergedBlock = block?.merge(other.block);
+
+    return copyWith(
+      textStyle: mergedTextStyle,
+      preserveWhitespace: other.preserveWhitespace,
+      baselineOffset: other.baselineOffset,
+      before: other.before,
+      after: other.after,
+      textDirection: other.textDirection,
+      block: mergedBlock,
+    );
+  }
+
+  Style copyWith({
+    TextStyle textStyle,
+    bool preserveWhitespace,
+    int baselineOffset,
+    String before,
+    String after,
+    TextDirection textDirection,
+    Block block,
+  }) {
+    return Style(
+      textStyle: textStyle ?? this.textStyle,
+      preserveWhitespace: preserveWhitespace ?? this.preserveWhitespace,
+      baselineOffset: baselineOffset ?? this.baselineOffset,
+      before: before ?? this.before,
+      after: after ?? this.after,
+      textDirection: textDirection ?? this.textDirection,
+      block: block ?? this.block,
+    );
+  }
+}

lib/styled_element.dart

@@ -1,8 +1,7 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_html/style.dart';
 import 'package:html/dom.dart' as dom;
 
-import 'block_element.dart';
-
 /// A [StyledElement] applies a style to all of its children.
 class StyledElement {
   final String name;
@@ -150,65 +149,4 @@ StyledElement parseStyledElement(
   return styledElement;
 }
 
-typedef ListCharacter = String Function(int i);
-
-class Style {
-  TextStyle textStyle;
-  bool preserveWhitespace;
-  int baselineOffset;
-  String before;
-  String after;
-  TextDirection textDirection;
-  Block block;
-
-  Style({
-    this.textStyle,
-    this.preserveWhitespace,
-    this.baselineOffset,
-    this.before,
-    this.after,
-    this.textDirection,
-    this.block,
-  });
-
-  @override
-  String toString() {
-    return "(Text Style: ($textStyle}),)";
-  }
-
-  Style merge(Style other) {
-    if (other == null) return this;
-
-    Block mergedBlock = block?.merge(other.block);
-
-    return copyWith(
-      textStyle: other.textStyle,
-      preserveWhitespace: other.preserveWhitespace,
-      baselineOffset: other.baselineOffset,
-      before: other.before,
-      after: other.after,
-      textDirection: other.textDirection,
-      block: mergedBlock,
-    );
-  }
-
-  Style copyWith({
-    TextStyle textStyle,
-    bool preserveWhitespace,
-    int baselineOffset,
-    String before,
-    String after,
-    TextDirection textDirection,
-    Block block,
-  }) {
-    return Style(
-      textStyle: textStyle ?? this.textStyle,
-      preserveWhitespace: preserveWhitespace ?? this.preserveWhitespace,
-      baselineOffset: baselineOffset ?? this.baselineOffset,
-      before: before ?? this.before,
-      after: after ?? this.after,
-      textDirection: textDirection ?? this.textDirection,
-      block: block ?? this.block,
-    );
-  }
-}
+typedef ListCharacter = String Function(int i);

pubspec.lock

@@ -1,13 +1,6 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
-  args:
-    dependency: transitive
-    description:
-      name: args
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "1.5.0"
   async:
     dependency: transitive
     description:
@@ -36,13 +29,20 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.14.11"
+  css_colors:
+    dependency: "direct main"
+    description:
+      name: css_colors
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.2"
   csslib:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: csslib
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.14.5"
+    version: "0.16.0"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -60,13 +60,6 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.14.0+2"
-  logging:
-    dependency: transitive
-    description:
-      name: logging
-      url: "https://pub.dartlang.org"
-    source: hosted
-    version: "0.11.3+2"
   matcher:
     dependency: transitive
     description:
@@ -164,5 +157,5 @@ packages:
     source: hosted
     version: "2.0.8"
 sdks:
-  dart: ">=2.2.0 <3.0.0"
-  flutter: ">=0.7.3-pre.38"
+  dart: ">=2.2.2 <3.0.0"
+  flutter: ">=0.7.3-pre.38 <2.0.0"

pubspec.yaml

@@ -10,6 +10,8 @@ environment:
 
 dependencies:
   html: ^0.14.0
+  csslib: ^0.16.0
+  css_colors: ^1.0.2
   flutter:
     sdk: flutter