search

littlebizzy / inline-styles

Automagically loads styles from your active theme and plugins in the site-wide head of your site as internal (embedded) CSS for faster page render.
https://bizzy.in/2wTJk75
GNU General Public License v3.0
9 stars 0 forks source link

Wrong quotes with data:image in url() #1

Open enricobattocchi opened 5 years ago

enricobattocchi commented 5 years ago

Hi, my Duplicate Post plugin includes a CSS file with the following rule:

#wpadminbar #wp-admin-bar-new_draft > .ab-item::before { content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M18.9 4.3c0.6 0 1.1 0.5 1.1 1.1v13.6c0 0.6-0.5 1.1-1.1 1.1h-10.7c-0.6 0-1.1-0.5-1.1-1.1v-3.2h-6.1c-0.6 0-1.1-0.5-1.1-1.1v-7.5c0-0.6 0.3-1.4 0.8-1.8l4.6-4.6c0.4-0.4 1.2-0.8 1.8-0.8h4.6c0.6 0 1.1 0.5 1.1 1.1v3.7c0.4-0.3 1-0.4 1.4-0.4h4.6zM12.9 6.7l-3.3 3.3h3.3v-3.3zM5.7 2.4l-3.3 3.3h3.3v-3.3zM7.9 9.6l3.5-3.5v-4.6h-4.3v4.6c0 0.6-0.5 1.1-1.1 1.1h-4.6v7.1h5.7v-2.9c0-0.6 0.3-1.4 0.8-1.8zM18.6 18.6v-12.9h-4.3v4.6c0 0.6-0.5 1.1-1.1 1.1h-4.6v7.1h10z' fill='rgba(240,245,250,.6)'/></svg>"); top: 2px; }

The Inline Styles plugin imports it in the head section of the page, but gets something wrong with the quotes: #wpadminbar #wp-admin-bar-new_draft > .ab-item::before { content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M18.9 4.3c0.6 0 1.1 0.5 1.1 1.1v13.6c0 0.6-0.5 1.1-1.1 1.1h-10.7c-0.6 0-1.1-0.5-1.1-1.1v-3.2h-6.1c-0.6 0-1.1-0.5-1.1-1.1v-7.5c0-0.6 0.3-1.4 0.8-1.8l4.6-4.6c0.4-0.4 1.2-0.8 1.8-0.8h4.6c0.6 0 1.1 0.5 1.1 1.1v3.7c0.4-0.3 1-0.4 1.4-0.4h4.6zM12.9 6.7l-3.3 3.3h3.3v-3.3zM5.7 2.4l-3.3 3.3h3.3v-3.3zM7.9 9.6l3.5-3.5v-4.6h-4.3v4.6c0 0.6-0.5 1.1-1.1 1.1h-4.6v7.1h5.7v-2.9c0-0.6 0.3-1.4 0.8-1.8zM18.6 18.6v-12.9h-4.3v4.6c0 0.6-0.5 1.1-1.1 1.1h-4.6v7.1h10z' fill='rgba(240,245,250,.6")'/></svg>"); top: 2px; }

Look at the double quote after .6 at the end of the path tag.

This causes the rule to be skipped and not rendered, and even cause some code to be shown on the page when using a HTML minifier (as reported here)

jessuppi commented 5 years ago

Okay thanks Enrico, great plugin BTW.

I think we never got around to cleaning up the "skip" inline rules for WP Admin (backend). Am I understanding correctly that this is happening on the backend?

enricobattocchi commented 5 years ago

Hi Jesse, not really: the CSS is used for the "Copy to a new draft" button on the Admin bar that can be shown in the frontend too, just like WordPress' own "Edit Post" button (so it's happening only when logged and allowed to copy posts, anyway).

Thanks for your appreciation!