New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Simplify usage with var(--color) #72
Comments
In this day and age we need to use custom property values |
@djmtype I don't get it... could you explain what you are talking about? |
@redaxmedia I was supporting you. We need a simpler method like your example. Right now, the a custom property, .example {
background: svg-load('img/icon-arrow.svg', fill=var(--primary-color));
} |
CSS doesn't support .up {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg fill=var(--primary-color) %3E...%3C/svg%3E");
} |
I was not asking for keeping the vars inside the url... |
Are you using them as preprocessor variables (like |
Why on earth should something be impossible that can be done with 2 lines of code by switching to 1 line of code? This plugin should just accept another syntax and that's all I am looking for. I don't mind about CSS support or whatever, I want the hex values hard coded like this plugin does anyway. |
Yes, this would be a great feature. would become: |
@conor-darcy for what it's worth I created a small plugin to handle that: https://www.npmjs.com/package/postcss-root-var |
Did anyone manage to make it work with css-vars? guys, any advice? Config:
Css:
Result:
|
@nevolgograd well, it is |
@redaxmedia thx, but unfortunately result is the same |
I found this "black magic" that lets you change the color of SVG without touching the fill attribute. I started using CSS filter to invert black SVG to white and later on found this generator to apply hex colors: See: https://codepen.io/sosuke/pen/Pjoqqp Red colored SVG would look like:
|
sad to see there appears to be fix from the plugin... @henryruhs the question is: how often in one page and one stylesheet do you need to recolour the background image? and how many are even just monochrome? |
Hey, I use this awesome plugin after processing variables with postcss-custom-properties ... to make it work together something like this is needed:
What I totally would love is a syntax like:
@TrySound Is there a way to rewrite this plugin or my postcss chain to make the easy syntax possible?
Thanks
The text was updated successfully, but these errors were encountered: