Kozea/CairoSVG

CSS @import broken?

jmmelko opened this issue · 3 comments

jmmelko commented

Hi,

I have used CairoSVG a few years ago and it supported @import CSS directives into the <style> tag.
Now, it does not seem to work anymore.

What I did:

  • Python 3.9.7
  • pillow 9.0.0
  • Latest Cairo '2.6.0'
  • tinycss2 installed, version '1.2.1'
  • cssselect2 installed, '0.7.0'
  • Tried to simplify the CSS file
  • Tried with and without CDATA around the import command
  • Checked that the CSS file worked with a Web Browser
  • Checked that style was used by CairoSVG if instead of using import, I copy-pasted the CSS file inside <defs><style></style></defs> inside the SVG file
  • Put everything in a single folder, used os.chdir, and did a simple command: cairosvg.svg2png(url='C.svg',write_to='C.png')
  • tried silly things such as adding or removing optional attributes in the SVG or XML tags

I am pretty sure it worked at some point ; unfortunately I could not find a test in cairo Github that uses external CSS.

I wish I could run cairoSVG in verbose mode.

---- SVG file -----

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" width="100" height="110" viewBox="0 0 100 110" xmlns="http://www.w3.org/2000/svg">
<defs>
<style type="text/css">
@import url('svg.css');
</style>
</defs>
<circle class="ps-fill" cx="50" cy="55" r="50" />
<circle class="ps" style="fill:none;stroke:white;stroke-width:8.3;" cx="50" cy="55" r="23.5" />
</svg>

---- CSS file ----

svg .ps-fill, svg .ps-fill
{
	fill:rgb(4,80,124);
	filter: brightness(140%);
}

svg .ps-stroke, svg .sw-stroke
{
	stroke:rgb(4,80,124);
	filter: brightness(140%);
}

PNG output:
C

Expected output (obtained by moving manually the content of the CSS file):

C

liZe commented

Hi!

It doesn’t work anymore because of Kozea/tinycss2#33.

A simple workaround is to use @import 'svg.css' or @import url(svg.css) instead.

jmmelko commented

Thank you so much!
I have changed it and it works.

However I have discovered incidentlynthat hsl(h, s, l) directives are not supported, it needs RGB. I have seen that you are working on it in the color4 branch, I will try to see if I can pip install the color4 branch?

liZe commented

However I have discovered incidentlynthat hsl(h, s, l) directives are not supported, it needs RGB. I have seen that you are working on it in the color4 branch, I will try to see if I can pip install the color4 branch?

hsl(…) is already supported by stable versions of tinycss2, you don’t need to use the color4 branch for that.

But CairoSVG doesn’t use tinycss2 to parse colors. Instead, it uses a custom parse(…) function that doesn’t support hsl(). It should be "quite easy" to change this function and use tinycss2’s function instead.