css-inline icon indicating copy to clipboard operation
css-inline copied to clipboard

Support for converting style attributes to HTML attributes

Open yisibl opened this issue 3 years ago • 8 comments

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <path d="M2,2 v6 h6 v-6 h-6 z" style="stroke:#FF0000;stroke-width:0.5;fill:none;"/>
</svg>

To

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
  <path d="M2,2 v6 h6 v-6 h-6 z" stroke="#FF0000" stroke-width="0.5" fill="none"/>
</svg>

This is useful for font tools, e.g. https://github.com/googlefonts/picosvg/pull/60

yisibl avatar Jan 17 '22 10:01 yisibl

Hi! Thank you for reporting! :)

Interesting feature - implementation-wise it should be relatively straightforward:

  • Config flag
  • If enabled, then insert collected styles as attributes

Though the underlying library does not provide a way to attach an XML parser / serializer, therefore I am concerned about the use case you provided would not be supported out of the box. However, implementing such a thing is feasible even without kuchiki-rs as there is a standalone XML parser available for Rust.

Stranger6667 avatar Jan 17 '22 10:01 Stranger6667

Any plans to implement this feature this year?

yisibl avatar Mar 04 '24 16:03 yisibl

I'd like to have it in css-inline and this year sounds realistic to me :) Non-blocking resolving is at the top of my to-do list, but after that, I'd be able to work on this.

@caseyjhol, as you commented on #139 - are you still interested in moving this forward? I'd be glad to assist in the implementation or provide a more detailed plan.

Stranger6667 avatar Mar 04 '24 17:03 Stranger6667

Forgot about the XML part :(

Maybe a better way to solve the task described in the original message would be:

  • A way to configure the underlying parser, currently, we only have HTML via html5ever
  • Add an XML parser that will parse input into the same Document struct
  • Bind different serializers for each parser, the current one is for HTML only.
  • Add a different method on CSSInliner which will look for "style" attributes, parse them, and insert individual styles as separate attributes. Some inline_styles_as_attributes or something better

I think that it also will be much faster & simpler as there is no need for selectors at all, just check the nodes for the style attributes.

Stranger6667 avatar Mar 04 '24 17:03 Stranger6667

So, for HTML it would be a different thing that should be integrated into the current inlining process

Stranger6667 avatar Mar 04 '24 17:03 Stranger6667