HTML Content with CSS media queries getting crash the UI.[BUG]

[prabuddaFernando]

Describe the bug: When HTML content with media queries, UI gets crash.

HTML to reproduce the issue:

<div class="large-12 columns">
  <p><b>PUMA WOMENS PUMA X HELLY HANSEN JACKET</b></p>
  <p>
    This season Puma and Helly Hansen are pushing performance running to the pinnacle of winter performance. The AW21 collection explores new materials, fabrics, and designs developed by runners for runners. Out run the elements with Puma x Helly Hansen Run Jacket. Equipped with a bonded secure storage pocket, unique reflective graphics and adjustable hood.
  </p>
  Style code: 521206-76<br>
</div>
<div class="large-12 columns">
  <p><b>THE FINER DETAILS</b></p>
  <ul>
    <li>Pinnacle of winter performance</li>
    <li>Bonded secure storage pocket</li>
    <li>Unique reflective graphics</li>
    <li>Adjustable hood</li>
    <li>Our model Jeanne is 5ft 8" and is wearing a size S</li>
  </ul>
</div>

<style>
@media (max-width: 767px) {
    .desktop-pdp-video {
        display: none !important;
    }
    .mobile-pdp-video {
        display: block !important;
        border: 0px solid green;
        width: 100%;
    }
}

@media(min-width:768px) {
    .mobile-pdp-video {
        display: none !important;
    }
    .desktop-pdp-video {
        display: block !important;
        border: 0px solid red;
        width: 100%;
    }
}
</style>

<script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>

<!-- Mobile code -->
<div class="mobile-pdp-video">
    <!-- START OF EMBED CODE -->
    <script src="https://fast.wistia.com/embed/medias/7dq50v573x.jsonp" async></script>
    <div class="wistia_responsive_padding" style="padding:177.92% 0 0 0;position:relative;">
        <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
            <div class="wistia_embed wistia_async_7dq50v573x videoFoam=true" style="height:100%;position:relative;width:100%">
                <div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%"><img src="https://fast.wistia.com/embed/medias/7dq50v573x/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;"></div>
            </div>
        </div>
    </div>
    <!-- END OF EMBED CODE -->
</div>

<!-- Tablet and above code -->
<div class="desktop-pdp-video">
    <!-- START OF EMBED CODE -->
    <script src="https://fast.wistia.com/embed/medias/otisg6vrls.jsonp" async></script>
    <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
        <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
            <div class="wistia_embed wistia_async_otisg6vrls videoFoam=true" style="height:100%;position:relative;width:100%"></div>
        </div>
    </div>
    <!-- END OF EMBED CODE -->
</div>

<div class="xlarge-24 columns">
    <p>&nbsp;</p>
    <p style="text-align:center"><b>Puma X Helly Hansen</b></p>
    <p style="text-align:center;">You were meant to explore, search and discover – escaping away from routine and into the natural world. That's why Helly Hansen has been developing professional grade gear for over 140 years, designed to brave the world's harshest climates.
    In the latest PUMA x HELLY HANSEN collaboration, pieces utilize technical fabrics and materials to transform PUMA silhouettes in a dynamic collision of street and sport, featuring a neutral color palette and performance-inspired detailing.</p>
    <p style="text-align:center"><img alt="" class="responsive" src="https://development-eu01-lifesports.demandware.net/on/demandware.static/-/Sites-LSS_eCommerce_Master/default/dwaa305a61/womens-jacket.jpg" title=""></p>
    <p>&nbsp;</p>
</div>

Html widget configuration:

Html(
    key: Key('page'),
    data: htmlAbove,
)

Device details and Flutter/Dart/flutter_html versions: Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.10.4, on macOS 12.3.1 21E258 darwin-arm, locale en-LK) [✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1) [✓] Xcode - develop for iOS and macOS (Xcode 13.3.1) [✓] Chrome - develop for the web [✓] Android Studio (version 2021.2) [✓] VS Code (version 1.67.1) [✓] Connected device (2 available) [✓] HTTP Host Availability

Stacktrace/Logcat

LateInitializationError: Field '_currentProperty@978066930' has not been initialized.
The relevant error-causing widget was: 
Html-[<'page'>] Html:file:///Users/prabuddafernando/AndroidStudioProjects/SpeechToText/lib/main.dart:43:20
When the exception was thrown, this was the stack: 
#0      DeclarationVisitor._currentProperty (package:flutter_html/src/css_parser.dart)
#1      DeclarationVisitor.visitExpressions (package:flutter_html/src/css_parser.dart:426:21)
#2      Visitor.visitMediaExpression (package:csslib/visitor.dart:160:5)
#3      Visitor.visitMediaQuery (package:csslib/visitor.dart:166:7)
#4      MediaQuery.visit (package:csslib/src/tree.dart:735:49)
#5      Visitor._visitNodeList (package:csslib/visitor.dart:126:19)
#6      Visitor.visitMediaDirective (package:csslib/visitor.dart:209:5)
#7      MediaDirective.visit (package:csslib/src/tree.dart:758:49)

[Sub6Resources]

Reproduced on latest master branch.

[cosmotek]

Are media queries even supported?

[Sub6Resources]

No, not supported. The Dart css parser library that we use just doesn't gracefully handle the syntax for media queries.

[cosmotek]

No, not supported. The Dart CSS parser library that we use just doesn't gracefully handle the syntax for media queries.

Considering that is a pretty critical piece of CSS functionality, it might be good to drop a note about this in the pub.dev page/README.