Merge pull request Sub6Resources#544 from tneotia/feature/more-inline-styles

erickok · web-flow · commit cab3533bf9ef · 2021-03-06T19:09:13.000+01:00
Add support for more inline styles
diff --git a/README.md b/README.md
@@ -27,6 +27,8 @@ A Flutter widget for rendering HTML and CSS as Flutter widgets.
 
 - [Currently Supported CSS Attributes](#currently-supported-css-attributes)
 
+- [Currently Supported Inline CSS Attributes](#currently-supported-inline-css-attributes)
+
 - [Why flutter_html?](#why-this-package)
 
 - [API Reference](#api-reference)
@@ -106,6 +108,13 @@ Add the following to your `pubspec.yaml` file:
 |`padding`         | `margin`| `text-align`| `text-decoration`| `text-decoration-color`| `text-decoration-style`| `text-decoration-thickness`|
 |`text-shadow`     | `vertical-align`| `white-space`| `width`  | `word-spacing`|                        |            |
 
+## Currently Supported Inline CSS Attributes:
+|                  |        |            |          |              |                        |            |
+|------------------|--------|------------|----------|--------------|------------------------|------------|
+|`background-color`| `border` | `color`| `direction`| `display`| `font-family`| `font-feature-settings` |
+| `font-size`|`font-style`      | `font-weight`| `line-height` | `list-style-type`  | `list-style-position`|`padding`     |
+| `margin`| `text-align`| `text-decoration`| `text-decoration-color`| `text-decoration-style`| `text-shadow` | |
+
 Don't see a tag or attribute you need? File a feature request or contribute to the project!
 
 ## Why this package?
diff --git a/lib/src/css_parser.dart b/lib/src/css_parser.dart
@@ -3,6 +3,8 @@ import 'dart:ui';
 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/src/utils.dart';
 import 'package:flutter_html/style.dart';
 
 Style declarationsToStyle(Map<String?, List<css.Expression>> declarations) {
@@ -13,6 +15,24 @@ Style declarationsToStyle(Map<String?, List<css.Expression>> declarations) {
         case 'background-color':
           style.backgroundColor = ExpressionMapping.expressionToColor(value.first) ?? style.backgroundColor;
           break;
+        case 'border':
+          List<css.LiteralTerm?>? borderWidths = value.whereType<css.LiteralTerm>().toList();
+          /// List<css.LiteralTerm> might include other values than the ones we want for [BorderSide.width], so make sure to remove those before passing it to [ExpressionMapping]
+          borderWidths.removeWhere((element) => element != null && element.text != "thin" 
+              && element.text != "medium" && element.text != "thick"
+              && !(element is css.LengthTerm) && !(element is css.PercentageTerm) 
+              && !(element is css.EmTerm) && !(element is css.RemTerm) 
+              && !(element is css.NumberTerm)
+          );
+          List<css.Expression?>? borderColors = value.where((element) => ExpressionMapping.expressionToColor(element) != null).toList();
+          List<css.LiteralTerm?>? potentialStyles = value.whereType<css.LiteralTerm>().toList();
+          /// Currently doesn't matter, as Flutter only supports "solid" or "none", but may support more in the future.
+          List<String> possibleBorderValues = ["dotted", "dashed", "solid", "double", "groove", "ridge", "inset", "outset", "none", "hidden"];
+          /// List<css.LiteralTerm> might include other values than the ones we want for [BorderSide.style], so make sure to remove those before passing it to [ExpressionMapping]
+          potentialStyles.removeWhere((element) => element != null && !possibleBorderValues.contains(element.text));
+          List<css.LiteralTerm?>? borderStyles = potentialStyles;
+          style.border = ExpressionMapping.expressionToBorder(borderWidths, borderStyles, borderColors);
+          break;
         case 'color':
           style.color = ExpressionMapping.expressionToColor(value.first) ?? style.color;
           break;
@@ -49,8 +69,15 @@ Style declarationsToStyle(Map<String?, List<css.Expression>> declarations) {
           textDecorationList.removeWhere((element) => element != null && element.text != "none"
               && element.text != "overline" && element.text != "underline" && element.text != "line-through");
           List<css.Expression?>? nullableList = value;
-          css.Expression? textDecorationColor = nullableList.firstWhere(
-                  (css.Expression? element) => element is css.HexColorTerm || element is css.FunctionTerm, orElse: () => null);
+          css.Expression? textDecorationColor;
+          /// orElse: will not allow me to return null (even if the compiler says its okay, it errors on runtime).
+          /// try/catch is a workaround for this.
+          try {
+            textDecorationColor = nullableList.firstWhere(
+                    (css.Expression? element) => element is css.HexColorTerm || element is css.FunctionTerm);
+          } catch (e) {
+            textDecorationColor = null;
+          }
           List<css.LiteralTerm?>? potentialStyles = value.whereType<css.LiteralTerm>().toList();
           /// List<css.LiteralTerm> might include other values than the ones we want for [textDecorationStyle], so make sure to remove those before passing it to [ExpressionMapping]
           potentialStyles.removeWhere((element) => element != null && element.text != "solid"
@@ -112,14 +139,132 @@ class DeclarationVisitor extends css.Visitor {
 
 //Mapping functions
 class ExpressionMapping {
-  static Color? expressionToColor(css.Expression value) {
-    if (value is css.HexColorTerm) {
-      return stringToColor(value.text);
-    } else if (value is css.FunctionTerm) {
-      if (value.text == 'rgba') {
-        return rgbOrRgbaToColor(value.span!.text);
-      } else if (value.text == 'rgb') {
-        return rgbOrRgbaToColor(value.span!.text);
+
+  static Border expressionToBorder(List<css.Expression?>? borderWidths, List<css.LiteralTerm?>? borderStyles, List<css.Expression?>? borderColors) {
+    CustomBorderSide left = CustomBorderSide();
+    CustomBorderSide top = CustomBorderSide();
+    CustomBorderSide right = CustomBorderSide();
+    CustomBorderSide bottom = CustomBorderSide();
+    if (borderWidths != null && borderWidths.isNotEmpty) {
+      top.width = expressionToBorderWidth(borderWidths.first);
+      if (borderWidths.length == 4) {
+        right.width = expressionToBorderWidth(borderWidths[1]);
+        bottom.width = expressionToBorderWidth(borderWidths[2]);
+        left.width = expressionToBorderWidth(borderWidths.last);
+      }
+      if (borderWidths.length == 3) {
+        left.width = expressionToBorderWidth(borderWidths[1]);
+        right.width = expressionToBorderWidth(borderWidths[1]);
+        bottom.width = expressionToBorderWidth(borderWidths.last);
+      }
+      if (borderWidths.length == 2) {
+        bottom.width = expressionToBorderWidth(borderWidths.first);
+        left.width = expressionToBorderWidth(borderWidths.last);
+        right.width = expressionToBorderWidth(borderWidths.last);
+      }
+      if (borderWidths.length == 1) {
+        bottom.width = expressionToBorderWidth(borderWidths.first);
+        left.width = expressionToBorderWidth(borderWidths.first);
+        right.width = expressionToBorderWidth(borderWidths.first);
+      }
+    }
+    if (borderStyles != null && borderStyles.isNotEmpty) {
+      top.style = expressionToBorderStyle(borderStyles.first);
+      if (borderStyles.length == 4) {
+        right.style = expressionToBorderStyle(borderStyles[1]);
+        bottom.style = expressionToBorderStyle(borderStyles[2]);
+        left.style = expressionToBorderStyle(borderStyles.last);
+      }
+      if (borderStyles.length == 3) {
+        left.style = expressionToBorderStyle(borderStyles[1]);
+        right.style = expressionToBorderStyle(borderStyles[1]);
+        bottom.style = expressionToBorderStyle(borderStyles.last);
+      }
+      if (borderStyles.length == 2) {
+        bottom.style = expressionToBorderStyle(borderStyles.first);
+        left.style = expressionToBorderStyle(borderStyles.last);
+        right.style = expressionToBorderStyle(borderStyles.last);
+      }
+      if (borderStyles.length == 1) {
+        bottom.style = expressionToBorderStyle(borderStyles.first);
+        left.style = expressionToBorderStyle(borderStyles.first);
+        right.style = expressionToBorderStyle(borderStyles.first);
+      }
+    }
+    if (borderColors != null && borderColors.isNotEmpty) {
+      top.color = expressionToColor(borderColors.first);
+      if (borderColors.length == 4) {
+        right.color = expressionToColor(borderColors[1]);
+        bottom.color = expressionToColor(borderColors[2]);
+        left.color = expressionToColor(borderColors.last);
+      }
+      if (borderColors.length == 3) {
+        left.color = expressionToColor(borderColors[1]);
+        right.color = expressionToColor(borderColors[1]);
+        bottom.color = expressionToColor(borderColors.last);
+      }
+      if (borderColors.length == 2) {
+        bottom.color = expressionToColor(borderColors.first);
+        left.color = expressionToColor(borderColors.last);
+        right.color = expressionToColor(borderColors.last);
+      }
+      if (borderColors.length == 1) {
+        bottom.color = expressionToColor(borderColors.first);
+        left.color = expressionToColor(borderColors.first);
+        right.color = expressionToColor(borderColors.first);
+      }
+    }
+    return Border(
+        top: BorderSide(width: top.width, color: top.color ?? Colors.black, style: top.style),
+        right: BorderSide(width: right.width, color: right.color ?? Colors.black, style: right.style),
+        bottom: BorderSide(width: bottom.width, color: bottom.color ?? Colors.black, style: bottom.style),
+        left: BorderSide(width: left.width, color: left.color ?? Colors.black, style: left.style)
+    );
+  }
+
+  static double expressionToBorderWidth(css.Expression? value) {
+    if (value is css.NumberTerm) {
+      return double.tryParse(value.text) ?? 1.0;
+    } else if (value is css.PercentageTerm) {
+      return (double.tryParse(value.text) ?? 400) / 100;
+    } else if (value is css.EmTerm) {
+      return double.tryParse(value.text) ?? 1.0;
+    } else if (value is css.RemTerm) {
+      return double.tryParse(value.text) ?? 1.0;
+    } else if (value is css.LengthTerm) {
+      return double.tryParse(value.text.replaceAll(new RegExp(r'\s+(\d+\.\d+)\s+'), '')) ?? 1.0;
+    } else if (value is css.LiteralTerm) {
+      switch (value.text) {
+        case "thin":
+          return 2.0;
+        case "medium":
+          return 4.0;
+        case "thick":
+          return 6.0;
+      }
+    }
+    return 4.0;
+  }
+
+  static BorderStyle expressionToBorderStyle(css.LiteralTerm? value) {
+    if (value != null && value.text != "none" && value.text != "hidden") {
+      return BorderStyle.solid;
+    }
+    return BorderStyle.none;
+  }
+
+  static Color? expressionToColor(css.Expression? value) {
+    if (value != null) {
+      if (value is css.HexColorTerm) {
+        return stringToColor(value.text);
+      } else if (value is css.FunctionTerm) {
+        if (value.text == 'rgba' || value.text == 'rgb') {
+          return rgbOrRgbaToColor(value.span!.text);
+        } else if (value.text == 'hsla' || value.text == 'hsl') {
+          return hslToRgbToColor(value.span!.text);
+        }
+      } else if (value is css.LiteralTerm) {
+        return namedColorToColor(value.text);
       }
     }
     return null;
@@ -359,21 +504,21 @@ class ExpressionMapping {
       css.LiteralTerm? exp4 = list.length > 3 ? list[3] as css.LiteralTerm? : null;
       RegExp nonNumberRegex = RegExp(r'\s+(\d+\.\d+)\s+');
       if (exp is css.LiteralTerm && exp2 is css.LiteralTerm) {
-        if (exp3 != null && (exp3 is css.HexColorTerm || exp3 is css.FunctionTerm)) {
+        if (exp3 != null && ExpressionMapping.expressionToColor(exp3) != null) {
           shadow.add(Shadow(
-              color: expressionToColor(exp3)!, 
+              color: expressionToColor(exp3)!,
               offset: Offset(double.tryParse(exp.text.replaceAll(nonNumberRegex, ''))!, double.tryParse(exp2.text.replaceAll(nonNumberRegex, ''))!)
           ));
         } else if (exp3 != null && exp3 is css.LiteralTerm) {
-          if (exp4 != null && (exp4 is css.HexColorTerm || exp4 is css.FunctionTerm)) {
+          if (exp4 != null && ExpressionMapping.expressionToColor(exp4) != null) {
             shadow.add(Shadow(
-                color: expressionToColor(exp4)!, 
-                offset: Offset(double.tryParse(exp.text.replaceAll(nonNumberRegex, ''))!, double.tryParse(exp2.text.replaceAll(nonNumberRegex, ''))!), 
+                color: expressionToColor(exp4)!,
+                offset: Offset(double.tryParse(exp.text.replaceAll(nonNumberRegex, ''))!, double.tryParse(exp2.text.replaceAll(nonNumberRegex, ''))!),
                 blurRadius: double.tryParse(exp3.text.replaceAll(nonNumberRegex, ''))!
             ));
           } else {
             shadow.add(Shadow(
-                offset: Offset(double.tryParse(exp.text.replaceAll(nonNumberRegex, ''))!, double.tryParse(exp2.text.replaceAll(nonNumberRegex, ''))!), 
+                offset: Offset(double.tryParse(exp.text.replaceAll(nonNumberRegex, ''))!, double.tryParse(exp2.text.replaceAll(nonNumberRegex, ''))!),
                 blurRadius: double.tryParse(exp3.text.replaceAll(nonNumberRegex, ''))!
             ));
           }
@@ -427,4 +572,33 @@ class ExpressionMapping {
       return null;
     }
   }
+
+  static Color hslToRgbToColor(String text) {
+    final hslText = text.replaceAll(')', '').replaceAll(' ', '');
+    final hslValues = hslText.split(',').toList();
+    List<double?> parsedHsl = [];
+    hslValues.forEach((element) {
+      if (element.contains("%") && double.tryParse(element.replaceAll("%", "")) != null) {
+        parsedHsl.add(double.tryParse(element.replaceAll("%", ""))! * 0.01);
+      } else {
+        if (element != hslValues.first && (double.tryParse(element) == null || double.tryParse(element)! > 1)) {
+          parsedHsl.add(null);
+        } else {
+          parsedHsl.add(double.tryParse(element));
+        }
+      }
+    });
+    if (parsedHsl.length == 4 && !parsedHsl.contains(null)) {
+      return HSLColor.fromAHSL(parsedHsl.last!, parsedHsl.first!, parsedHsl[1]!, parsedHsl[2]!).toColor();
+    } else if (parsedHsl.length == 3 && !parsedHsl.contains(null)) {
+      return HSLColor.fromAHSL(1.0, parsedHsl.first!, parsedHsl[1]!, parsedHsl.last!).toColor();
+    } else return Colors.black;
+  }
+
+  static Color? namedColorToColor(String text) {
+     String namedColor = namedColors.keys.firstWhere((element) => element.toLowerCase() == text.toLowerCase(), orElse: () => "");
+     if (namedColor != "") {
+       return stringToColor(namedColors[namedColor]!);
+     } else return null;
+  }
 }
diff --git a/lib/src/utils.dart b/lib/src/utils.dart
@@ -1,7 +1,27 @@
+import 'dart:convert';
+import 'dart:math';
+
 import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
 
-import 'dart:math';
-import 'dart:convert';
+Map<String, String> namedColors = {
+  "White": "#FFFFFF",
+  "Silver": "#C0C0C0",
+  "Gray": "#808080",
+  "Black": "#000000",
+  "Red": "#FF0000",
+  "Maroon": "#800000",
+  "Yellow": "#FFFF00",
+  "Olive": "#808000",
+  "Lime": "#00FF00",
+  "Green": "#008000",
+  "Aqua": "#00FFFF",
+  "Teal": "#008080",
+  "Blue": "#0000FF",
+  "Navy": "#000080",
+  "Fuchsia": "#FF00FF",
+  "Purple": "#800080",
+};
 
 class Context<T> {
   T data;
@@ -47,6 +67,18 @@ class MultipleTapGestureRecognizer extends TapGestureRecognizer {
   }
 }
 
+class CustomBorderSide {
+  CustomBorderSide({
+    this.color = const Color(0xFF000000),
+    this.width = 1.0,
+    this.style = BorderStyle.none,
+  }) : assert(width >= 0.0);
+
+  Color? color;
+  double width;
+  BorderStyle style;
+}
+
 String getRandString(int len) {
   var random = Random.secure();
   var values = List<int>.generate(len, (i) =>  random.nextInt(255));
