Add error handling for CSS parsing

Author: tneotia

example/lib/main.dart

@@ -295,6 +295,13 @@ class _MyHomePageState extends State<MyHomePage> {
           onImageError: (exception, stackTrace) {
             print(exception);
           },
+          onCSSParseError: (css, messages) {
+            print("css that errored: $css");
+            print("error messages:");
+            messages.forEach((element) {
+              print(element);
+            });
+          },
         ),
       ),
     );

lib/flutter_html.dart

@@ -53,6 +53,7 @@ class Html extends StatelessWidget {
     this.onLinkTap,
     this.customRender = const {},
     this.customImageRenders = const {},
+    this.onCSSParseError,
     this.onImageError,
     this.onMathError,
     this.shrinkWrap = false,
@@ -71,6 +72,7 @@ class Html extends StatelessWidget {
     this.onLinkTap,
     this.customRender = const {},
     this.customImageRenders = const {},
+    this.onCSSParseError,
     this.onImageError,
     this.onMathError,
     this.shrinkWrap = false,
@@ -99,6 +101,9 @@ class Html extends StatelessWidget {
   /// See the README for more details.
   final Map<ImageSourceMatcher, ImageRender> customImageRenders;
 
+  /// A function that defines what to do when CSS fails to parse
+  final OnCSSParseError? onCSSParseError;
+
   /// A function that defines what to do when an image errors
   final ImageErrorListener? onImageError;
 
@@ -148,6 +153,7 @@ class Html extends StatelessWidget {
         htmlData: doc,
         onLinkTap: onLinkTap,
         onImageTap: onImageTap,
+        onCSSParseError: onCSSParseError,
         onImageError: onImageError,
         onMathError: onMathError,
         shrinkWrap: shrinkWrap,

lib/html_parser.dart

@@ -28,6 +28,10 @@ typedef OnMathError = Widget Function(
     String exception,
     String exceptionWithType,
 );
+typedef OnCSSParseError = String? Function(
+  String css,
+  List<cssparser.Message> errors,
+);
 typedef CustomRender = dynamic Function(
   RenderContext context,
   Widget parsedChild,
@@ -38,6 +42,7 @@ class HtmlParser extends StatelessWidget {
   final dom.Document htmlData;
   final OnTap? onLinkTap;
   final OnTap? onImageTap;
+  final OnCSSParseError? onCSSParseError;
   final ImageErrorListener? onImageError;
   final OnMathError? onMathError;
   final bool shrinkWrap;
@@ -54,6 +59,7 @@ class HtmlParser extends StatelessWidget {
     required this.htmlData,
     required this.onLinkTap,
     required this.onImageTap,
+    required this.onCSSParseError,
     required this.onImageError,
     required this.onMathError,
     required this.shrinkWrap,
@@ -66,7 +72,7 @@ class HtmlParser extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    Map<String, Map<String, List<css.Expression>>> declarations = _getExternalCSSDeclarations(htmlData.getElementsByTagName("style"));
+    Map<String, Map<String, List<css.Expression>>> declarations = _getExternalCSSDeclarations(htmlData.getElementsByTagName("style"), onCSSParseError);
     StyledElement lexedTree = lexDomTree(
       htmlData,
       customRender.keys.toList(),
@@ -77,7 +83,7 @@ class HtmlParser extends StatelessWidget {
     if (declarations.isNotEmpty) {
       externalCSSStyledTree = _applyExternalCSS(declarations, lexedTree);
     }
-    StyledElement inlineStyledTree = _applyInlineStyles(externalCSSStyledTree ?? lexedTree);
+    StyledElement inlineStyledTree = _applyInlineStyles(externalCSSStyledTree ?? lexedTree, onCSSParseError);
     StyledElement customStyledTree = _applyCustomStyles(style, inlineStyledTree);
     StyledElement cascadedStyledTree = _cascadeStyles(style, customStyledTree);
     StyledElement cleanedTree = cleanTree(cascadedStyledTree);
@@ -194,13 +200,13 @@ class HtmlParser extends StatelessWidget {
     }
   }
 
-  static Map<String, Map<String, List<css.Expression>>> _getExternalCSSDeclarations(List<dom.Element> styles) {
+  static Map<String, Map<String, List<css.Expression>>> _getExternalCSSDeclarations(List<dom.Element> styles, OnCSSParseError? errorHandler) {
     String fullCSS = "";
     for (final e in styles) {
       fullCSS = fullCSS + e.innerHtml;
     }
     if (fullCSS.isNotEmpty) {
-      final declarations = parseExternalCSS(fullCSS);
+      final declarations = parseExternalCSS(fullCSS, errorHandler);
       return declarations;
     } else {
       return {};
@@ -219,12 +225,15 @@ class HtmlParser extends StatelessWidget {
     return tree;
   }
 
-  static StyledElement _applyInlineStyles(StyledElement tree) {
+  static StyledElement _applyInlineStyles(StyledElement tree, OnCSSParseError? errorHandler) {
     if (tree.attributes.containsKey("style")) {
-      tree.style = tree.style.merge(inlineCSSToStyle(tree.attributes['style']));
+      final newStyle = inlineCSSToStyle(tree.attributes['style'], errorHandler);
+      if (newStyle != null) {
+        tree.style = tree.style.merge(newStyle);
+      }
     }
 
-    tree.children.forEach(_applyInlineStyles);
+    tree.children.forEach((e) => _applyInlineStyles(e, errorHandler));
     return tree;
   }
 

lib/src/css_parser.dart

@@ -5,6 +5,7 @@ import 'package:csslib/visitor.dart' as css;
 import 'package:csslib/parser.dart' as cssparser;
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_html/flutter_html.dart';
 import 'package:flutter_html/src/utils.dart';
 import 'package:flutter_html/style.dart';
 
@@ -102,15 +103,33 @@ Style declarationsToStyle(Map<String, List<css.Expression>> declarations) {
   return style;
 }
 
-Style inlineCSSToStyle(String? inlineStyle) {
-  final sheet = cssparser.parse("*{$inlineStyle}");
-  final declarations = DeclarationVisitor().getDeclarations(sheet);
-  return declarationsToStyle(declarations["*"]!);
+Style? inlineCSSToStyle(String? inlineStyle, OnCSSParseError? errorHandler) {
+  var errors = <cssparser.Message>[];
+  final sheet = cssparser.parse("*{$inlineStyle}", errors: errors);
+  if (errors.isEmpty) {
+    final declarations = DeclarationVisitor().getDeclarations(sheet);
+    return declarationsToStyle(declarations["*"]!);
+  } else if (errorHandler != null) {
+    String? newCSS = errorHandler.call(inlineStyle ?? "", errors);
+    if (newCSS != null) {
+      return inlineCSSToStyle(newCSS, errorHandler);
+    }
+  }
+  return null;
 }
 
-Map<String, Map<String, List<css.Expression>>> parseExternalCSS(String css) {
-  final sheet = cssparser.parse(css);
-  return DeclarationVisitor().getDeclarations(sheet);
+Map<String, Map<String, List<css.Expression>>> parseExternalCSS(String css, OnCSSParseError? errorHandler) {
+  var errors = <cssparser.Message>[];
+  final sheet = cssparser.parse(css, errors: errors);
+  if (errors.isEmpty) {
+    return DeclarationVisitor().getDeclarations(sheet);
+  } else if (errorHandler != null) {
+    String? newCSS = errorHandler.call(css, errors);
+    if (newCSS != null) {
+      return parseExternalCSS(newCSS, errorHandler);
+    }
+  }
+  return {};
 }
 
 class DeclarationVisitor extends css.Visitor {

lib/style.dart

@@ -1,6 +1,7 @@
 import 'dart:ui';
 
 import 'package:flutter/material.dart';
+import 'package:flutter_html/flutter_html.dart';
 import 'package:flutter_html/src/css_parser.dart';
 
 ///This class represents all the available CSS attributes
@@ -215,8 +216,8 @@ class Style {
     }
   }
 
-  static Map<String, Style> fromCSS(String css) {
-    final declarations = parseExternalCSS(css);
+  static Map<String, Style> fromCSS(String css, OnCSSParseError? onCSSParseError) {
+    final declarations = parseExternalCSS(css, onCSSParseError);
     Map<String, Style> styleMap = {};
     declarations.forEach((key, value) {
       styleMap[key] = declarationsToStyle(value);