webpack-contrib/style-loader

cssText will drop css vars in ie9 and ie10

babyhuangshiming opened this issue · 4 comments

// For old IE
/* istanbul ignore if  */
if (style.styleSheet) {
  style.styleSheet.cssText = css;
} else {
  while (style.firstChild) {
    style.removeChild(style.firstChild);
  }

  style.appendChild(document.createTextNode(css));
}

in the applyToTag method, if my css has something like {backgroundColor: var(--backgroundColor)} css vars thing, cssText will dropped the css vars in ie9 and ie10,so we can't use cssVarsPonyfill thing, so base on that, can export a option's function before style.styleSheet.cssText = css; so i can do something myself to make the code looks normal in ie9 and ie10

// For old IE
/* istanbul ignore if  */
 /** something like **/
if (option.ownFunc) {
   option.ownFunc(css);
} else if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
  while (style.firstChild) {
    style.removeChild(style.firstChild);
  }

  style.appendChild(document.createTextNode(css));
}

Because of a theme changing scenario, we need to change css variables at runtime.
We want to use a css-vars-ponyfill to support legacy IE versions. But I needs the stylerules to be appended to dom or give us a chance to transform the css at runtime

IE 9 and IE 10 is officially outdated, why do you need it?

IE 9 and IE 10 is officially outdated, why do you need it?

We found there are still outdated browsers request. And we don't want to lose them...