option preserve only for non supported browsers

[dippas]

Hi, would be possible to implement the option either by default or not of preserve option to just trigger in non supported browsers like IE.

Here is why.. when using the plugin without options there is no computed value in CSS or fallback before the CSS vars , which for those who still needs to give support to old browsers like IE isn't possible.

I know there is preserve: true but in modern browsers it duplicates the properties unnecessary with the fallback.

Best regards, dippas

[MadLittleMods]

Hey @dippas,

You could accomplish this by serving a different CSS file depending on the browser you detect server-side.

I'm not sure how we would accomplish what you want since it seems like you want things preserved for some browsers but not others. This is just a plugin that runs on what you pass in and outputs a single file.

[dippas]

Hey @MadLittleMods thanks for taking time in replying to this thread,

I appreciate your feedback, but I don't find very interesting having 2 CSS files being served just because of this particular "issue" and just one browser.

I was thinking that in your plugin core you could detect if css-vars exists and if not make the fallback using preserve:true maybe using CSS.suports() or CSS @supports

Something like this:

if (window.CSS && CSS.supports('color', 'var(--some-var)')) {
  preserve: false;
} else {
  preserve: true;
}

Check this post for more info about this code.

Thanks!

[MadLittleMods]

@dippas If we use CSS @supports, the values will still be duplicated and there will be even more extra stuff in the output. The @supports don't disappear depending on browser. See https://codepen.io/SitePoint/pen/zzBrWY as an example of what the output CSS would look like.

The JavaScript CSS.supports() wouldn't work in our plugin because that is meant to run in your browser(client-side). When you build your CSS, it is being built one time locally with Node.js and has no concept of the web page(DOM) or browser which is separate. We don't know which browser the user is running, when you are building the CSS.

[dippas]

@MadLittleMods Thanks again for your reply. I understand it. I'm going to close this. Thanks!