Tag attributes change case after juicing.

[kevindecapite]

I'm trying to use juice to inline CSS into a dynamically generated SVG drawing. It works great, but is changing the case of the viewBox attribute to all lowercase: viewbox. Since SVGs are XML, the attributes are case-sensitive. Thus viewbox isn't recognized and the SVG does not render correctly.

Here's the example: https://runkit.com/embed/9wkrxfqmgkf1

If you open the source SVG code in a viewer, you should see a 100px circle that fills the viewBox completely.

Then look at the "Full Text" drop down option after juicing and you'll notice that there's now a lowercase b in that attribute. Copy and paste that SVG code into your viewer and the circle will be clipped.

Can we pass an option to preserve all tag and attribute casing?

[jrit]

I don't remember where that might be getting modified, but I suspect it is in a dependency. If you can track down where that needs to be changed, I'd fully support fixing this. I don't think the case should ever be getting changed, and don't even feel like an option is necessary, the behavior you propose should be the behavior.

[kevindecapite]

I was able to find some calls to toLowerCase() in the css-what dependency:

• https://github.com/fb55/css-what/blob/master/index.js#L171
• https://github.com/fb55/css-what/blob/master/index.js#L185
• https://github.com/fb55/css-what/blob/master/index.js#L191
• https://github.com/fb55/css-what/blob/master/index.js#L249

I agree an option for this doesn't make much sense. I was mostly checking to make sure I didn't miss anything.

FYI, for anyone else dealing with this issue: I resolved it for the time being with .replace(/viewbox/g, 'viewBox') on juice's return string.

[kevindecapite]

Juice's dependency graph, in case that's needed:

├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ ├── [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├── [email protected] deduped
│ │ │ │ └── [email protected] deduped
│ │ │ └─┬ [email protected]
│ │ │   └── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected] deduped
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected] deduped
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected] deduped
│ │ │ ├── [email protected] deduped
│ │ │ ├── [email protected] deduped
│ │ │ ├── [email protected] deduped
│ │ │ └─┬ [email protected]
│ │ │   ├── [email protected] deduped
│ │ │   ├── [email protected] deduped
│ │ │   └── [email protected] deduped

[sermunar]

I was facing the same issue, since I have some attribute manipulations after juice is getting called. I found a solution for this problem based on this issue post for cheeriojs.

So just try to enable the xmlMode in your options.

const juicedSvg = juice(svg, { xmlMode:true });