container-query-polyfill
container-query-polyfill copied to clipboard
Update `url()` regex to ignore SVG fragment IDs
This PR updates the regex that rewrites CSS url() functions so that instances of SVG fragment identifiers are ignored.
We recently noticed that clip-path rules on our site were broken. Rules that looked like clip-path: url(#fragmentID); were being rewritten to include the CSS filename, like so: clip-path: url('https://website.com/styles.css#fragmentID');. Since CSS files do not support document fragment identifiers, the only reasonable application of the url() function where the parameter starts with a # is to reference a fragment of the HTML document, and thus these values should not be rewritten with absolute URLs. The MDN page for the url() function backs this up: https://developer.mozilla.org/en-US/docs/Web/CSS/url().
I also created this test bed for the new regex, to run it against all of the examples provided in the url() docs page and verify that everything matches as expected: https://regexr.com/6hnr9
Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).
For more information, open the CLA check for this pull request.
Thank you so much for taking the time to put together this PR!
We've recently shipped some pretty extensive changes, including reworking how this URL rewriting occurs. If you'd be willing to update your PR, I think we'd be happy to work to get it merged.
In the meantime though, I'm going to close out this PR for now, since the change is no longer mergable.
I just tested with the 0.2.3 and it looks like this fix is no longer necessary. SVG fragment identifiers in url() functions aren't being zealously overwritten anymore. Hooray!
Thanks for the continued hard work on this library, everyone.