Extract inline SVG styles and include them in page head #3
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Add missing closing outer `</svg>` tag. - Set filename (prefixed with `svg-`) as `id` attribute instead of adding it as `class`. The `id` argument to the shortcode has precedence over the prefixed filename, so users can supply a custom `id`. - Add support for `role` attribute via the `role` argument to the shortcode. Defaults to [`role="img"`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/img_role#svg_and_roleimg) if none is provided. - Set `aria-labelledby` to`<title>` elements `id` (or the `ariaLabelledby` shortcode argument, if supplied). - Add support for the [`<desc>` element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/desc) via the `desc` arg to the shortcode and sets the the corresponding `aria-describedby ` to its `id` (or the `ariaDescribedby` shortcode argument, if supplied). - Add `<title>` and `<desc>` elements as first/second (instead of last) child to the outer `<svg>` element for [backwards compatbility with SVG 1.1](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title). - Fix removal of existing attributes (ensure to only remove them from the outer `svg` element and not its children). - Improve other regular expressions to be more precise and avoid unnecessary minification.
salim-b
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR builds upon (i.e. includes) #2. The changes specific to this PR are found in 89c8d13.
Extract styles (
<style>elements) from inline SVGs, write them to page store and finally include them in the page's<head>.The new
head/inline-svg-styles.html]partial must be sourced by the consumer of this Hyas integration, of course:Motivation
Avoid having to set
style-src 'unsafe-inline'CSP when an inlined SVG contains a<style>tag.Caveats
<style>tag (full CSS with selectors etc.) and ones set directly on the HTML elements to be styled (<svg>,<path>, etc.) via thestyleattribute. The latter ones can't be easily extracted (we would need to derive/generate proper selectors for them) and thus are left untouched by this PR..Content(shortcodes, code blocks (we could add a renderhookforsvgcode blocks)), not when the partial is used elsewhere. As long as theme authors are aware of this (i.e. that they can't usepartial "inline-svg" "some.svg"ifsome-svgcontains inline styles), everything should be fine, though.It should probably be mentioned in the documentation of this Hyas integration that for the attribute-based type of inline styles,
style-src 'unsafe-inline'has to be set if CSP is used. However, this holds true regardless of this PR.Checks
npm run test