search

postcss / postcss-custom-properties

Use Custom Properties in CSS
https://postcss.github.io/postcss-custom-properties
MIT License
596 stars 77 forks source link

don't preserve css variables when used in urls #101

Closed francoisromain closed 6 years ago

francoisromain commented 6 years ago

Hello and thank you for this great plugin. Css variables don't work in urls, for example: 

.icon-24-fill {
  --color-test: red;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='var(--color-test)'><circle cx='12' cy='12' r='8' /></svg>");
}

So, would it be possible to de-activate the preserve option when a css variable is used inside an url?

jonathantneal commented 6 years ago

@francoisromain, yes, that’s very reasonable. Any chance you want to take a crack at the PR? If you can’t, I understand, and maybe I can look at it this weekend.

francoisromain commented 6 years ago

@jonathantneal I'll look at the code and tell you if I feel able to do it

jonathantneal commented 6 years ago

Closing due to inactivity.

mdmoreau commented 6 years ago

@jonathantneal Just ran into this same issue. Would it be possible to deactivate the preserve option on a single line via a comment? I guess it might even be outside the scope of this plugin, since using that sort of variable in a URL would never work natively anyhow.