Add minimal runtime for dynamic props with IE 11

[nhooyr]

Do you want to request a feature or report a bug?

Feature.

What is the current behavior?

dynamic styled props do not work with IE 11.

What is the wanted behavior?

They should. It'd be nice if Linaria had a very minimal runtime to modify the stylesheet and dynamically adjust css variables based on passed in props such that they work in IE 11.

I believe this is possible but I could be wrong.

Related: jhildenbiddle/css-vars-ponyfill#5

The lack of IE 11 support is a production blocker for Linaria for many projects.

See facebook/create-react-app#5224
See https://www.reddit.com/r/reactjs/comments/aojnyd/announcing_linaria_10_zero_runtime_cssinjs_library/eg1xsvm?utm_source=share&utm_medium=web2x

[klimashkin]

I don't think it's worth it. IE11 is going away, even big enterprise companies that I work with are dropping it this year.

[nhooyr]

@klimashkin See #446, the implementation is tiny.

[nhooyr]

Going to close as it has been a while and I'm not sure if this is relevant anymore.

[Jayphen]

I wonder why people don't use data attributes to implement dynamic styling?

  .button {
    color: red;
    &[data-blah] {
      color: blue
    }
}


function Thing({condition}) {
 return (<div data-blah={condition}>hi</div>)
}

Is there some downside to this approach that I am missing?

[frenzzy]

@Jayphen it does not work if you need to use dynamic style from API or database.
For example a color customizable by user.

[frenzzy]

There are a relatively new polyfill exist: https://github.com/nuxodin/ie11CustomProperties
The only requirement for it to use special ie-style attribute in addition to style:

There is no way to get the raw content of style-attributes in IE11. Use <div style="--color:blue" ie-style="--color:blue"> for it

Maybe add a flag to linaria (like useIEStyleAttrubute) which will use both attributes will be much simpler solution here?