Add support for the style tag

tneotia · tneotia · commit e7224218682b · 2021-05-02T17:25:24.000-04:00
diff --git a/lib/html_parser.dart b/lib/html_parser.dart
@@ -66,15 +66,20 @@ class HtmlParser extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    Map<String, Map<String, List<css.Expression>>> declarations = _getExternalCSSDeclarations(htmlData.getElementsByTagName("style"));
     StyledElement lexedTree = lexDomTree(
       htmlData,
       customRender.keys.toList(),
       tagsList,
       navigationDelegateForIframe,
     );
-    StyledElement inlineStyledTree = applyInlineStyles(lexedTree);
-    StyledElement customStyledTree = _applyCustomStyles(inlineStyledTree);
-    StyledElement cascadedStyledTree = _cascadeStyles(customStyledTree);
+    StyledElement? externalCSSStyledTree;
+    if (declarations.isNotEmpty) {
+      externalCSSStyledTree = _applyExternalCSS(declarations, lexedTree);
+    }
+    StyledElement inlineStyledTree = _applyInlineStyles(externalCSSStyledTree ?? lexedTree);
+    StyledElement customStyledTree = _applyCustomStyles(style, inlineStyledTree);
+    StyledElement cascadedStyledTree = _cascadeStyles(style, customStyledTree);
     StyledElement cleanedTree = cleanTree(cascadedStyledTree);
     InlineSpan parsedTree = parseTree(
       RenderContext(
@@ -189,34 +194,59 @@ class HtmlParser extends StatelessWidget {
     }
   }
 
-  static StyledElement applyInlineStyles(StyledElement tree) {
+  static Map<String, Map<String, List<css.Expression>>> _getExternalCSSDeclarations(List<dom.Element> styles) {
+    String fullCSS = "";
+    for (final e in styles) {
+      fullCSS = fullCSS + e.innerHtml;
+    }
+    if (fullCSS.isNotEmpty) {
+      final declarations = parseExternalCSS(fullCSS);
+      return declarations;
+    } else {
+      return {};
+    }
+  }
+
+  static StyledElement _applyExternalCSS(Map<String, Map<String, List<css.Expression>>> declarations, StyledElement tree) {
+    declarations.forEach((key, style) {
+      if (tree.matchesSelector(key)) {
+        tree.style = tree.style.merge(declarationsToStyle(style));
+      }
+    });
+
+    tree.children.forEach((e) => _applyExternalCSS(declarations, e));
+
+    return tree;
+  }
+
+  static StyledElement _applyInlineStyles(StyledElement tree) {
     if (tree.attributes.containsKey("style")) {
       tree.style = tree.style.merge(inlineCSSToStyle(tree.attributes['style']));
     }
 
-    tree.children.forEach(applyInlineStyles);
+    tree.children.forEach(_applyInlineStyles);
     return tree;
   }
 
   /// [applyCustomStyles] applies the [Style] objects passed into the [Html]
   /// widget onto the [StyledElement] tree, no cascading of styles is done at this point.
-  StyledElement _applyCustomStyles(StyledElement tree) {
+  static StyledElement _applyCustomStyles(Map<String, Style> style, StyledElement tree) {
     style.forEach((key, style) {
       if (tree.matchesSelector(key)) {
         tree.style = tree.style.merge(style);
       }
     });
-    tree.children.forEach(_applyCustomStyles);
+    tree.children.forEach((e) => _applyCustomStyles(style, e));
 
     return tree;
   }
 
   /// [_cascadeStyles] cascades all of the inherited styles down the tree, applying them to each
   /// child that doesn't specify a different style.
-  StyledElement _cascadeStyles(StyledElement tree) {
+  static StyledElement _cascadeStyles(Map<String, Style> style, StyledElement tree) {
     tree.children.forEach((child) {
       child.style = tree.style.copyOnlyInherited(child.style);
-      _cascadeStyles(child);
+      _cascadeStyles(style, child);
     });
 
     return tree;
diff --git a/lib/src/css_parser.dart b/lib/src/css_parser.dart
@@ -8,7 +8,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_html/src/utils.dart';
 import 'package:flutter_html/style.dart';
 
-Style declarationsToStyle(Map<String?, List<css.Expression>> declarations) {
+Style declarationsToStyle(Map<String, List<css.Expression>> declarations) {
   Style style = new Style();
   declarations.forEach((property, value) {
     if (value.isNotEmpty) {
@@ -104,31 +104,54 @@ Style declarationsToStyle(Map<String?, List<css.Expression>> declarations) {
 
 Style inlineCSSToStyle(String? inlineStyle) {
   final sheet = cssparser.parse("*{$inlineStyle}");
-  final declarations = DeclarationVisitor().getDeclarations(sheet)!;
-  return declarationsToStyle(declarations);
+  final declarations = DeclarationVisitor().getDeclarations(sheet);
+  return declarationsToStyle(declarations["*"]!);
+}
+
+Map<String, Map<String, List<css.Expression>>> parseExternalCSS(String css) {
+  final sheet = cssparser.parse(css);
+  return DeclarationVisitor().getDeclarations(sheet);
 }
 
 class DeclarationVisitor extends css.Visitor {
-  Map<String?, List<css.Expression>>? _result;
-  String? _currentProperty;
+  Map<String, Map<String, List<css.Expression>>> _result = {};
+  Map<String, List<css.Expression>> _properties = {};
+  late String _selector;
+  late String _currentProperty;
 
-  Map<String?, List<css.Expression>>? getDeclarations(css.StyleSheet sheet) {
-    _result = new Map<String?, List<css.Expression>>();
-    sheet.visit(this);
+  Map<String, Map<String, List<css.Expression>>> getDeclarations(css.StyleSheet sheet) {
+    sheet.topLevels.forEach((element) {
+      if (element.span != null) {
+        _selector = element.span!.text;
+        element.visit(this);
+        if (_result[_selector] != null) {
+          _properties.forEach((key, value) {
+            if (_result[_selector]![key] != null) {
+              _result[_selector]![key]!.addAll(new List<css.Expression>.from(value));
+            } else {
+              _result[_selector]![key] = new List<css.Expression>.from(value);
+            }
+          });
+        } else {
+          _result[_selector] = new Map<String, List<css.Expression>>.from(_properties);
+        }
+        _properties.clear();
+      }
+    });
     return _result;
   }
 
   @override
   void visitDeclaration(css.Declaration node) {
     _currentProperty = node.property;
-    _result![_currentProperty] = <css.Expression>[];
+    _properties[_currentProperty] = <css.Expression>[];
     node.expression!.visit(this);
   }
 
   @override
   void visitExpressions(css.Expressions node) {
     node.expressions.forEach((expression) {
-      _result![_currentProperty]!.add(expression);
+      _properties[_currentProperty]!.add(expression);
     });
   }
 }
