Bug: "class" attribute on SVG is incorrectly output as "className" about surplus

[matthew-dean]

I was able to workaround this for my Surplus demo tomorrow with:

            const svgClass = { class: $style.callout__quotation } //...
            <svg
                version="1.1"
                {...svgClass}
                x="0px"
                y="0px"
                viewBox="0 0 48 42.1"
            >

😄

[adamhaile]

Hmm, good catch. Looks like the HTML-friendly property aliases, which translate class -> className, are firing for SVG too, which they shouldn't. In fact, they should probably fire in reverse, translating className -> class, since we set attributes, not properties, on SVG nodes.

Have to think about this one. There's a quick fix which will get almost all the SVG tags but not all. The ones it would miss would be the tags which are common to both SVG and HTML, like , <title>, etc. To get them, I have to add a little more context to the translation layer. I'd like to make a 100% fix for this.

[matthew-dean]

@adamhaile No worries, there's no hurry, I can use the workaround for now.

[adamhaile]

Whaa? I tried to reply to your workaround and ended up editing it.

Was trying to say that you can also use a small fn to set the class for the time being:

            <svg
                version="1.1"
                fn={el => el.setAttribute("class", $style.callout__quotation)}
                x="0px"
                y="0px"
                viewBox="0 0 48 42.1"
            >

[matthew-dean]

@adamhaile Ah, that's also cool. I'll save that for next time!

[adamhaile]

Should be fixed with 5ceff5b .

[adamhaile]

Unit tests are passing now, so closing this issue. Let me know if you have any other problems with it!