Repository navigation
Issue #33 - css variable are not displayed correctly in inkscape - #40
LudoBroche wants to merge 4 commits into
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
There was a problem hiding this comment.
This is mainly a local test to call inkscape and check if the color of the SVG is going through.
By opening with Inkscape, the svg -> saving as png -> comparing the colors.
Skip if inkscape is not install
There was a problem hiding this comment.
I think testing the CSS variable replacement (in test_svg_css_variables.py) is enough.
We don't really have to test Inkscape itself.
| def _read_theme_values() -> dict[str, str]: | ||
| """Read root.css into {"--link-color": "rgb(176, 147, 255)", ...}.""" | ||
| root_css = ROOT_CSS_PATH.read_text() | ||
| theme_values: dict[str, str] = {} | ||
| for line in root_css.splitlines(): | ||
| declaration = line.strip().removesuffix(";") | ||
| if declaration.startswith("--"): | ||
| name, value = declaration.split(": ") | ||
| theme_values[name] = value | ||
| return theme_values | ||
|
|
||
|
|
||
| def _replace_css_variables(css: str, theme_values: dict[str, str]) -> str: | ||
| """Replace each "var(--link-color)" by its value, e.g. "rgb(176, 147, 255)".""" | ||
| for name, value in theme_values.items(): | ||
| css = css.replace(f"var({name})", value) | ||
| return css |
There was a problem hiding this comment.
I'm pretty sure all of that can be done with a combination of regex/lambda functions and other Python chicanery in 3 lines of code.
This version I understand.
|
Adding @support in the style section to have Inkscape compatibility: Before : <?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" class="ewoksdraw">
<style><![CDATA[
.ewoksdraw {
--bg-color: rgb(0, 0, 0);
--link-color: rgb(176, 147, 255);
--error: rgb(255, 0, 0);
--stroke-color: rgb(255, 255, 255);
--stroke-width: 1;
--text-color: rgb(255, 255, 255);
--transparent: rgba(0, 0, 0, 0);
}
]]></style>
<style><![CDATA[
.task_anchor_link {
fill: var(--link-color);
}
]]></style>
<circle cx="50" cy="50" r="20" class="task_anchor_link"/>
</svg>After: <?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" class="ewoksdraw">
<style><![CDATA[
.ewoksdraw {
--bg-color: rgb(0, 0, 0);
--link-color: rgb(176, 147, 255);
--error: rgb(255, 0, 0);
--stroke-color: rgb(255, 255, 255);
--stroke-width: 1;
--text-color: rgb(255, 255, 255);
--transparent: rgba(0, 0, 0, 0);
}
]]></style>
<style><![CDATA[
.task_anchor_link {
fill: rgb(176, 147, 255);
}
@supports (--css: variables) {
.task_anchor_link {
fill: var(--link-color);
}
}
]]></style>
<circle cx="50" cy="50" r="20" class="task_anchor_link"/>
</svg>In inkscape : After: |
LudoBroche
changed the title
7e4528e to
a0653c0
Compare
There was a problem hiding this comment.
I think testing the CSS variable replacement (in test_svg_css_variables.py) is enough.
We don't really have to test Inkscape itself.
2 participants
PR summary
We add a @support tag in the style description of the css style.
To have support style var and inkscape
AI Disclosure