[JEWEL-1072] Support CSS class references in SVG rendering #3335

nebojsa-vuksic · 2025-12-04T22:18:26Z

Summary

This PR adds EmbeddedToInlineCssStyleSvgPatchHint - a new painter hint that enables rendering of SVG files exported from vector graphics editors that use embedded CSS <style> blocks with class selector references instead of inline styles.

Problem

Design tools like Adobe Illustrator, Inkscape, and Figma commonly export SVGs using CSS class references:

<style>.st0 { fill: #FF0000; }</style>
<circle class="st0" cx="10" cy="10" r="5"/>

Many design tools export SVGs with CSS class references like .st0, .st1. Since Skiko does not support CSS class selector references, these icons render incorrectly or not at all.

Solution

This hint transforms class-based styles into inline style attributes during SVG loading. The hint acts as a preprocessing step:

Parses all <style type="text/css"> blocks
Extracts class selector rules (.className { ... })
Applies styles to elements with matching class attributes
Respects CSS cascade rules (multiple classes, inline precedence)
Removes <style> blocks and class attributes
Returns processed SVG ready for rendering

Before & After

Before change ('sun' icon was rendered without color)

After change

Transformation Example

Input SVG (from design tool):

<svg xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">
    .st0 { fill: red; opacity: 0.5; }
  </style>
  <circle class="st0" cx="10" cy="10" r="5"/>
</svg>

Output (after hint processing):

<svg xmlns="http://www.w3.org/2000/svg">
  <circle style="fill:red;opacity:0.5" cx="10" cy="10" r="5"/>
</svg>

Implementation Details

What Changed

New class: EmbeddedToInlineCssStyleSvgPatchHint implementing PainterSvgPatchHint
CSS Parser: Parses <style type="text/css"> blocks, supporting minified CSS, comments, and CDATA
CSS Inliner: Applies class styles to elements with proper cascade support
Processing: Removes <style> blocks and class attributes after inlining

CSS Feature Support

✅ Supported Features

Feature	Description	Example
Class Selectors	Basic `.className` selectors	`.st0 { fill: red; }`
Multiple Selectors	Comma-separated selectors in one rule	`.st0, .st1 { fill: red; }`
Multiple Classes	Elements with multiple classes (cascade supported)	`<circle class="base override">`
Inline Style Precedence	Inline styles override class styles	`<circle class="st0" style="fill: blue">`
CSS Cascade	Later classes override earlier properties	Class order: `base override`
Minified CSS	CSS without whitespace/newlines	`.st0{fill:red;opacity:0.5;}`
CSS Comments	Both block `/* */` and inline comments	`/* comment */ .st0 { fill: red; }`
CDATA Sections	XML CDATA wrapping	`<![CDATA[ .st0 { ... } ]]>`
URL References	`url()` for gradients, patterns, filters	`fill: url(#gradient1);`
Multiple Style Blocks	Multiple `<style>` elements in one SVG	Two or more `<style>` blocks
All CSS Properties	Any valid CSS property	`fill`, `stroke`, `opacity`, `clip-rule`, etc.

❌ Not Supported (Intentionally)

Feature	Behavior
ID Selectors (`#id`)	Ignored - not processed
Element Selectors (`circle`, `rect`)	Ignored - not processed
Attribute Selectors (`[attr="value"]`)	Ignored - not processed
Pseudo-classes (`:hover`, `:focus`)	Ignored - not processed
Combinators (`.parent .child`, `.parent > .child`)	Ignored - not processed
At-rules (`@media`, `@keyframes`)	Ignored - not processed

The hint focuses on static rendering scenarios with class selectors only, which covers the vast majority of SVG exports from design tools.

CSS Cascade & Conflict Resolution

When the same CSS property is defined in multiple places, the hint resolves conflicts according to standard CSS cascade rules:

Priority	Source	Behavior
Highest	Inline `style` attribute	Overrides all class-based properties
Medium	Later classes (rightmost)	Override earlier classes for the same property
Lowest	Earlier classes (leftmost)	Used only when property not defined elsewhere

How It Works

Given: <circle class="A B C" style="x: 1">

For any CSS property:

Check inline style → if defined, use it ✅
Check class C → if defined and no inline, use it ✅
Check class B → if defined and not in C or inline, use it ✅
Check class A → if defined and not in B, C, or inline, use it ✅

Example

  .base { fill: green; opacity: 0.5; stroke: purple; }
  .override { opacity: 0.9; }

  <circle class="base override" style="stroke: black">

Property resolution:

fill: ✅ .base (no conflict, only source)
opacity: ✅ .override (conflicts with .base, later class wins)
stroke: ✅ inline style (conflicts with .base, inline wins)

Result: style="fill:green;opacity:0.9;stroke:black"

Usage

// Apply hint when loading SVG with embedded CSS
Icon(
    key = iconKey,
    contentDescription = "Icon with embedded CSS",
    hints = arrayOf(EmbeddedToInlineCssStyleSvgPatchHint),
    modifier = Modifier.size(96.dp),
)

// Or conditionally
Icon(
    key = iconKey,
    contentDescription = "Icon",
    hints = if (needsCssInlining) {
        arrayOf(EmbeddedToInlineCssStyleSvgPatchHint)
    } else {
        emptyArray()
    },
)

Showcase Demo

Added interactive demo in Icons showcase with checkbox toggle
Uses ShowcaseIcons.sunny SVG with embedded CSS styles
Demonstrates the hint's effect on rendering

Release notes

New features

Added EmbeddedToInlineCssStyleSvgPatchHint painter hint to support rendering SVG files with embedded CSS class selectors exported from vector graphics editors
Converts CSS <style> blocks with .className selectors to inline style attributes during SVG loading
Supports CSS cascade (multiple classes, inline style precedence), minified CSS, comments, CDATA sections, and URL references for gradients/patterns
Interactive showcase demo added to Icons panel demonstrating the feature

Note

Adds EmbeddedToInlineCssStyleSvgPatchHint to inline CSS class styles in SVGs, plus a showcase toggle and new sunny icon, with comprehensive tests.

UI Painter (experimental):
- Introduces EmbeddedToInlineCssStyleSvgPatchHint implementing PainterSvgPatchHint to convert embedded CSS <style> rules (class selectors) into inline style attributes and remove class/style blocks.
- Supports multiple selectors/classes, inline precedence, comments, CDATA, minified CSS, and URL refs; ignores non-class selectors.
- API surface updated in platform/jewel/ui/api-dump-experimental.txt.
Tests:
- Adds EmbeddedToInlineCssStyleSvgPatchHintTest with extensive cases covering parsing, cascade, multiple blocks, and no-op scenarios.
Showcase:
- Adds ShowcaseIcons.sunny and SVG asset platform/jewel/samples/showcase/src/main/resources/icons/sunny.svg.
- Updates components/Icons.kt to include a checkbox to enable the hint and render the sunny icon with EmbeddedToInlineCssStyleSvgPatchHint.
- API dump updated to include getSunny().

^{Written by Cursor Bugbot for commit fcba5c1. This will update automatically on new commits. Configure here.}