flutter_widget_from_html icon indicating copy to clipboard operation
flutter_widget_from_html copied to clipboard

Add support for string literals in CSS list-style-type property

Open Copilot opened this issue 6 months ago • 2 comments

Fixes #1504

This PR implements support for CSS string literals as list-style-type values, allowing developers to use custom text markers for HTML lists.

What's Changed

Previously, the list-style-type property only supported predefined CSS keywords like disc, circle, decimal, etc. This implementation adds support for quoted string literals as specified in the CSS specification.

Examples

<!-- Custom numbered markers -->
<ul style="list-style-type: '① '">
  <li>First item</li>
  <li>Second item</li>
</ul>

<!-- Custom text markers -->
<ol style="list-style-type: 'Step '">
  <li>Initialize</li>
  <li>Process</li>
</ol>

<!-- Empty string (no marker) -->
<ul style="list-style-type: ''">
  <li>Item without marker</li>
</ul>

Implementation Details

  • String Detection: Modified getListMarkerText() to treat any unrecognized list-style-type value as a string literal
  • Quote Handling: The CSS parser already handles quote extraction and HTML entity decoding (&quot;")
  • Empty Strings: Empty string literals properly render without markers (like list-style-type: none)
  • Compatibility: All existing functionality preserved - geometric markers (disc, circle, square) and serial markers (decimal, roman, alpha) work unchanged

Technical Changes

  • Updated getListMarkerText() in core_widget_factory.dart to return unrecognized types as-is
  • Modified buildListMarker() to handle empty string literals by returning null (no marker)
  • Added _isPredefinedListStyleType() helper to distinguish between CSS keywords and string literals
  • Enhanced test coverage with comprehensive string literal test cases

Test Results

  • ✅ All existing tests pass (70/70 core package tests)
  • ✅ All integration tests pass (46/46 enhanced package tests)
  • ✅ Full test suite passes (233/233 total tests)
  • ✅ End-to-end verification confirms custom markers render correctly

This change maintains full backward compatibility while enabling the flexible list styling requested in the original issue.


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Copilot avatar Aug 31 '25 14:08 Copilot

Demo app

73e33b9beaae9ee560824b8b7f3483462078a495 APKs:

Web build has been deployed to https://demo-5sgtf4mtg-fwfh.vercel.app. Quick links:

github-actions[bot] avatar Aug 31 '25 15:08 github-actions[bot]