Data URIs break next to Custom Properties & Data URLs break with inner URLs

[jonathantneal]

Preface: I’m a big fan of this plugin. I’m sorry I haven’t had much free time lately to integrate this into PostCSS Preset Env. My intention is to adopt this into the next major version, or at least adopt part of this (with your approval) which can utilize your draw engine. I was able to test this plugin with our production code at work today!

Description

Unfortunately, the current version will break some of our sites with data URIs. My apologies for this sad news. I’ll provide reduced snippets of code that will trigger breaks. Like this:

some-rule {
  background:
    var(--bg)
    url("data:image/svg+xml;charset=utf-8,%3Csvg mask='url(%23mask)' stroke='url(%23stroke)'/%3E%3C/svg%3E");
}

/* becomes */

some-rule {
  -ieVar-background:
    var(--bg)
    url("data:image/svg+xml; background:
    var(--bg)
    url("data:image/svg+xml;charset=utf-8,%3Csvg mask='url(%23mask)' stroke='url(https://our.website/path/to/style.css./../%23stroke)'/%3E%3C/svg%3E");
}

I believe these breaks are caused by multiple bugs related to how data URIs are handled.

Data URLs break with inner URLs

It appears as tho inline SVGs with multiple url() functions are broken by relToAbs().

some-rule {
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg mask='url(%23mask)' stroke='url(%23stroke)'/%3E%3C/svg%3E");
}

/* becomes */

some-rule {
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg mask='url(%23mask)' stroke='url(https://our.website/path/to/style.css./../%23stroke)'/%3E%3C/svg%3E");
}

I believe this is caused by string and url detection that only knows to ignore the first url() function.

Data URIs break next to Custom Properties

It appears as tho inline SVGs that follow Custom Properties are broken by rewriteCss().

some-element {
  background:
    var(--bg)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E%3C/svg%3E");
}

/* becomes */

some-element {
  -ieVar-background:
    var(--bg)
    url("data:image/svg+xml; background:
    var(--bg)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E%3C/svg%3E");
}

I suspect this is because the inline SVG uses ;, which causes the parser to consider it the end of the declaration.

Version

4.0.1

[nuxodin]

Hi Jonathan
Thank you for your feedback.
I would have to have a real CSS parser instead of the regular expressions to make this work.

(with your approval)

Feel free, I really have no problem if you are using parts of my code.

[jonathantneal]

Data URLs break with inner URLs

I believe this will be resolved with #58

I am still working on applying a CSS tokenizer to your plugin. A true CSS tokenizer is only 0.6 kB, but the trick is writing something small enough to detect the sequence of tokens that you need to match.

[nuxodin]

Data URLs break with inner URLs
I believe this will be resolved with #58

Merged, all my test passing!
New Version 4.1.0
Thx!

I am still working on applying a CSS tokenizer to your plugin. A true CSS tokenizer is only 0.6 kB, but the trick is writing something small enough to detect the sequence of tokens that you need to match.

This would be great!