[BUG]css_parser throws null error #733
Description
Describe the bug:
inline css fails at:
@media (min-width:576px){.container{max-width:540px}}
The call to :
@override
void visitExpressions(css.Expressions node) {
_properties[_currentProperty]!.addAll(node.expressions);
}
returns null when _currentProperty == box-sizing
HTML to reproduce the issue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>${siteName} - ${locationName}</title>
<style>
*,::after,::before{box-sizing:border-box}
@media (min-width:576px){.container{max-width:540px}}
@media (min-width:1200px){.container{max-width:1140px}}.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.col-md-6{position:relative;width:100%;min-height:1px;padding-right:0;padding-left:45px}
@media (min-width:576px){.col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}}
html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-image:linear-gradient(to right,#386cfc ,#18a8fc,#18e6b9)}
h5{margin-top:0;margin-bottom:.5rem}
blockquote{margin:0 0 1rem}
svg:not(:root){overflow:hidden}
h5{margin-top:40px;margin-bottom:.6rem;font-family:inherit;font-weight:500;line-height:1.9;color:inherit}
h5{font-size:1.25rem}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
body{min-width:992px!important}
.container .img{text-align:center}
.container .details{border-left:3px solid #ffffffb9}
#copyright{font:inherit;min-width:510px;font-weight:700;position:relative;bottom:0;text-align:center;margin-top:20px}
.detailsAlignment{margin-top:30px;margin-left:35px}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 img">
${qrCodeSvg}
</div>
<div class="col-md-6 details">
<div class = "detailsAlignment">
<blockquote>
<h5>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 384 512">
<path
d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"/>
</svg> ${locationName}
</h5>
<h5>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 448 512">
<path
d="M0 224h192V32H0v192zM64 96h64v64H64V96zm192-64v192h192V32H256zm128 128h-64V96h64v64zM0 480h192V288H0v192zm64-128h64v64H64v-64zm352-64h32v128h-96v-32h-32v96h-64V288h96v32h64v-32zm0 160h32v32h-32v-32zm-64 0h32v32h-32v-32z"/>
</svg> ${shortCode}
</h5>
<h5>
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 640 512">
<path
d="M634.91 154.88C457.74-8.99 182.19-8.93 5.09 154.88c-6.66 6.16-6.79 16.59-.35 22.98l34.24 33.97c6.14 6.1 16.02 6.23 22.4.38 145.92-133.68 371.3-133.71 517.25 0 6.38 5.85 16.26 5.71 22.4-.38l34.24-33.97c6.43-6.39 6.3-16.82-.36-22.98zM320 352c-35.35 0-64 28.65-64 64s28.65 64 64 64 64-28.65 64-64-28.65-64-64-64zm202.67-83.59c-115.26-101.93-290.21-101.82-405.34 0-6.9 6.1-7.12 16.69-.57 23.15l34.44 33.99c6 5.92 15.66 6.32 22.05.8 83.95-72.57 209.74-72.41 293.49 0 6.39 5.52 16.05 5.13 22.05-.8l34.44-33.99c6.56-6.46 6.33-17.06-.56-23.15z"/>
</svg>
${wifiSid!"---"}<br>${wifiPassword!"---"}
</h5>
</blockquote>
</div>
</div>
</div>
<div id="copyright">
<p>
${siteName} <br>
${shortCode}
</p>
</div>
</div>
</body>
</html>
Html widget configuration:
Html htmlView = Html(data: this.htmlPage);
flutter_html: 2.1.0
Expected behavior:
The HTML page should render
Screenshots:
None, the exception causes the render to fail
Device details and Flutter/Dart/flutter_html versions:
[√] Flutter (Channel stable, 2.2.1, on Microsoft Windows [Version 10.0.19042.1052], locale en-GB)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[√] Chrome - develop for the web
flutter_html: 2.1.0
Stacktrace/Logcat
======== Exception caught by widgets library =======================================================
The following _CastError was thrown building HtmlParser-[GlobalKey#fe526](dirty):
Null check operator used on a null value
The relevant error-causing widget was:
Html file:
When the exception was thrown, this was the stack:
#0 DeclarationVisitor.visitExpressions (package:flutter_html/src/css_parser.dart:373:34)
#1 Visitor.visitMediaExpression (package:csslib/visitor.dart:160:5)
#2 Visitor.visitMediaQuery (package:csslib/visitor.dart:166:7)
#3 MediaQuery.visit (package:csslib/src/tree.dart:735:49)
#4 Visitor._visitNodeList (package:csslib/visitor.dart:126:19)
...
====================================================================================================
UPDATE
Making the following change to the method allows the above page to render ok:
@override
void visitExpressions(css.Expressions node) {
if (_properties[_currentProperty] != null) {
_properties[_currentProperty]!.addAll(node.expressions);
}
}