Hello,
we have web files located on multiple separated domains like this:

• example.com - location of HTML page
• files.example.com - location of CSS
• cdn.differentexample.com - location of this polyfill and someother CSS

Unfortunately, IE11 throws Access-Control-Allow-Origin error and XMLHttpRequest error 8070013. Is there a way how to make this setup work?

Hey,

I wanted to try out this nice looking polyfill but currently I am encountering an issue on IE. Whenever the script runs I get error on this line https://github.com/nuxodin/ie11CustomProperties/blob/master/ie11CustomProperties.js#L52 saying "Object doesn't support property match".
When I injected local copy of this script and console.logged target it pointed to [Object SVGSVGElement]. I am not sure if that's because I am using <svg><use /></svg> to inject svg icons from sprite.

I can try creating simple repo showcasing the issue as soon as I get some time.

Any help appreciated.

After a truly unfortunate amount of effort testing and debugging in IE11, I think I have tracked down what appears to be a consistent bug with a clear minimal reproduction. It happens when you have a media query which contains a pseudo-selector which contains a custom property, in an external stylesheet. For example:

@media (max-width: 100px) {
  .foo:hover {
    background: var(--red);
  }
}

With any code that fits this pattern, dropped on to the page using an external stylesheet will break IE's css parsing silently, of course, causing it and any css following in its own stylesheet not to render.

I inspected the output of the parsed styles and I think the actual error is fairly clear - it ends up placing an -ieVar- string before the css selector, rather than before the property as it does when a media query is not present under the same scenario. For the example above, the output would look like this:

@media (max-width: 100px) {
  -ieVar-.foo:hover {
    background: var(--red);
  }
}

It should instead render like this:

@media (max-width: 100px) {
  .foo:hover {
    -ieVar-background: var(--red);
    background: var(--red);
  }
}

I would be happy to look into the cause and try to contribute a fix, just wanted to log it here and get an opinion first 😁

Preface: I’m a big fan of this plugin. I’m sorry I haven’t had much free time lately to integrate this into PostCSS Preset Env. My intention is to adopt this into the next major version, or at least adopt part of this (with your approval) which can utilize your draw engine. I was able to test this plugin with our production code at work today!

Description

Unfortunately, the current version will break some of our sites with data URIs. My apologies for this sad news. I’ll provide reduced snippets of code that will trigger breaks. Like this:

some-rule {
  background:
    var(--bg)
    url("data:image/svg+xml;charset=utf-8,%3Csvg mask='url(%23mask)' stroke='url(%23stroke)'/%3E%3C/svg%3E");
}

/* becomes */

some-rule {
  -ieVar-background:
    var(--bg)
    url("data:image/svg+xml; background:
    var(--bg)
    url("data:image/svg+xml;charset=utf-8,%3Csvg mask='url(%23mask)' stroke='url(https://our.website/path/to/style.css./../%23stroke)'/%3E%3C/svg%3E");
}

I believe these breaks are caused by multiple bugs related to how data URIs are handled.

Data URLs break with inner URLs

It appears as tho inline SVGs with multiple url() functions are broken by relToAbs().

some-rule {
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg mask='url(%23mask)' stroke='url(%23stroke)'/%3E%3C/svg%3E");
}

/* becomes */

some-rule {
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg mask='url(%23mask)' stroke='url(https://our.website/path/to/style.css./../%23stroke)'/%3E%3C/svg%3E");
}

I believe this is caused by string and url detection that only knows to ignore the first url() function.

Data URIs break next to Custom Properties

It appears as tho inline SVGs that follow Custom Properties are broken by rewriteCss().

some-element {
  background:
    var(--bg)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E%3C/svg%3E");
}

/* becomes */

some-element {
  -ieVar-background:
    var(--bg)
    url("data:image/svg+xml; background:
    var(--bg)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E%3C/svg%3E");
}

I suspect this is because the inline SVG uses ;, which causes the parser to consider it the end of the declaration.

Version

4.0.1

Received this error report:

TypeError: Unable to get property 'trim' of undefined or null reference
/static/js/ie11CustomProperties.js in StyleProto.getPropertyValue at line 578:3

The mentioned code:

	const oldGetP = StyleProto.getPropertyValue;
	StyleProto.getPropertyValue = function (property) {
		this.lastPropertyServedBy = false;
		property = property.trim();
                ...

OS: windows 8.1
Browser: IE 11.0

ie11CustomProperties.js is downloaded from current master last week.

Does the script need to be added in head tag like in the readme or is there an option to add it to the footer

CSS selector: :not(:active).spectrum-Textfield.focus-ring

The following function will lead to an error.

function addGettersSelector(selector, properties) {
    selectorAddPseudoListeners(selector);
    var selectorWithoutPseudo = selector.replace(regPseudos,'');
    c1.onElement(selectorWithoutPseudo, function (el) {
	addGetterElement(el, properties, selector);
	drawElement(el);
    });
}

Because selectorWithoutPseudo will be :not().spectrum-Textfield.focus-ring which is a invalid css selector.

I added this in the polyfills.ts the rendering is working great however the performance is a stale mate. Its rendering more than 4k stylesheet.

It keeps on adding empty style sheets until IE stops responding.

This is an example of my input.scss.

:host {
  display: flex;
  flex: 1;
  --font-size: var(--fs-18);
  --font-weight: var(--light);
  --input-color: var(--color-app-input);
  --placeholder-color: var(--color-app-placeholder);
  --bg-color: var(--color-app-dark-gray);
  --width: 100%;
  --height: 4.6rem;
  --border-radius: 0.4rem;
  --border: none;
  --error-color: var(--color-app-warning-bordered);
}

  .container {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
  }

  .section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .errors {
    color: var(--error-color);
  }

  .input {
    display: flex;
    flex: 1;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    width: var(--width);
    min-height: var(--height);
    max-height: var(--height);
    border: var(--border);
    background-color: var(--bg-color);
    padding: 0 1.2rem;
    color: var(--input-color);
    font-size: var(--fs-12);

    &::placeholder {
      color: var(--placeholder-color);
    }
  }


  .label {
    font-weight: var(--semibold);
    color: var(--color-app-p);
    letter-spacing: 0.05rem;
    margin-bottom: 0.5rem;
  }

  // used to override display: inline-block from ng2TelInput library
  ::ng-deep {
    .iti {
      display: flex;
    }
  }

  .input-wrapper {
    position: relative;
    display: flex;


  }

  .input.error {
    border: 0.1rem solid var(--error-color);
  }

  .input:focus {
    border: 0.1rem solid var(--color-app-cyan);
    box-shadow: 0 0 5px rgba(85, 183, 227, 0.5);
    background-color: #f7f7f7 !important;
  }

  .circle {
    height: calc(var(--height) / 2);
    width: calc(var(--height) / 2);
    border-radius: 50%;
    background-color: var(--error-color);
    position: absolute;
    flex: 1;
    align-self: center;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;

    fa {
      padding-top: 0.2rem;
    }
  }

Hi!

What's the difference / advantage from this lib to https://github.com/webcomponents/polyfills ?

Hi, I was wondering if you are aware of https://github.com/jhildenbiddle/css-vars-ponyfill and if yes, can you explain the difference between this polyfill and that one?

Thanks

[Line 33,9] : var els = root.querySelectorAll(listener.selector), i = 0, el;

is being flagged by Internet Explorer as Syntax Error...don't know why

When updating CSS variables on the root element, the CSS stylesheets don't get updated and the values on the child elements remain the same as on page load.

My workflow is as follows:

• I have some properties on some elements in the page. Some of these properties use values like calc(var(--menu-space) + 10px), others use values like var(--example, hidden);
• These CSS variables are set from JS (onScroll event listener) using style.setProperty on the root element, not on the child elements (e.g. document.documentElement.style.setProperty('--menu-space', space + 'px'); );

Expected results:
The values of the properties on the elements should update when their values is changed on the root element (CSS inheritance).

Actual results:
The values remain the same as on page load. The rewritten styles aren't "redrawn" when the CSS variables are updated on the root element using JS.

P.S. Could you also perhaps expose the functions somehow (so that we could run stuff like ie11CustomProperties.redrawStyleSheets() when needed? I think it would also help with debugging).

Thank you!

First: Many thanks for making this -- looks like this will save us quite some time!

I'm encountering a problem with CSS ::before and ::after elements. Minimal example follows using the latest version from the master branch:

index.html:

<html>
<head>
  <script src="https://rawcdn.githack.com/nuxodin/ie11CustomProperties/40dddac11e14fda350d0f918f6039f80cde090e3/ie11CustomProperties.js"></script>
  <link href="./styles.css" rel="stylesheet"></head>
</head>
<body>
  <div></div>
</body>
</html>

styles.css:

:root {
  --red: red;
  --green: green;
  --blue: blue;
}

div {
  position: relative;
  width: 600px;
  height: 200px;
  background-color: var(--red);
}

div::before,
div::after {
  content: "";
  position: absolute;
  width: 33.4%;
  height: 100%;
}

div::before {
  left: 33.4%;
  background-color: var(--green);
}

div::after {
  left: 66.6%;
  background-color: var(--blue);
}

This is supposed to create three squares in red, green, and blue. Screenshot from Chrome, Edge, etc. looks as follows:

When rendering in IE with the polyfill, I see the following:

The generated CSS code looks as follows:

Any ideas what's wrong here?

Hi, just wondering if it would be possible to release a minified/compressed version as part of the package.

According to can i use, IE11 does not support the const keyword in for-in and for-of loops.
This would mean this line is interpreted different from what you'd expect.

Not sure how to test if this actually fails or produces an error, but In general I wouldn't use const at all if you're not going to transpile it.

Anyway, thanks for the great script.

Hi,

is there a way to support old Edge version (12-14) with this pollyfill ?

Thanks, Florian.

Hi!

What's the difference / advantage from this lib to https://github.com/webcomponents/polyfills ?

When using a CSS variable inside calc, it replaces it incorrectly and this throws an error in IE (unspecified error), because it tries to apply a wrong value.

If we have
top: calc(var(--menu-space, 0) + 10px);

then it tries to apply the following:
style['top'] = "calc(0) + 10px";

It breaks the paranthesis and thus applies an incorrect value.

I have the theme css in element in and overriding styles in <style> element first thing after opening tag. The <style> get processed for IE11 before the , which makes the override <style>. (I found the processing order via logging inside onElement function. I'm using 3.0.5 release verson.

Simplified code:

<head>
   ...
   <script src='http://localhost/.../js/ie11CustomProperties.min.js'></script>
   <link rel='stylesheet' href='http://localhost/.../css/theme.css' media='all' />
   ... // all other scripts and styles are after these two
</head>
<body>
   <style> **overriding css**</style>
</body>

Via testing i found that reordering the scripts and styles didn't help in any combination, even with jquery. It might have to do with caching - when the ie11 script runs.

This is log for incorrect processing order, highlighted are the ie11 script and theme css:

This is log for correct processing order:

Testing showed that the order is incorrect whenever the time value in network debugger for ie11 script is 0. Time of theme css doesn't play a role.

Hey Tobias,

I'm getting these errors in IE11's console:

SCRIPT5113: Use before declaration
eval code (58) (296,3)

The error marks the colon with red https://d.pr/i/UVIBt7 . Maybe has anything to do with the colon symbol?

The line in particular being: https://github.com/nuxodin/ie11CustomProperties/blob/master/ie11CustomProperties.js#L290

If i console.log(selector) it prints :root. If in the selectorAddPseudoListeners() function i add return; at the begining to prevent executing the theme, it'll keep on adding these kinds of errors, for example on line https://github.com/nuxodin/ie11CustomProperties/blob/master/ie11CustomProperties.js#L368 .

Happen to have any idea about this one?

@nuxodin First things first: thank you for this library. I'm amazed this library exists and it seems to be exactly what I need in my current project. I just installed the 4.0.0 version and imported into my index.js and fired it up in IE11 and had a script error. (my project is ES6 and is transpiled down to ES5)

Error: usage before declaration
line 214 in ie11CustomProperties.js
the used variable is styles_of_getter_properties
and I think this happens because it is declared in line 197 as a const and IE11 does not recognize the keyword const and therefore seems to ignore it.
You used const throughout the script file. To my knowledge this therefore would not work in IE11
(Maybe this got into the file by accident: might be some tool changed all var to const onSave? Prettier or eslint?)

** Description **
I've create the following pen: https://codepen.io/maxjf1/pen/wvMPaav

It changes the css class of a element, after clicking on the button, changing css variables.

It doesn't change the button css variable.

Is there any workarround?

** Version **
4.1.0

** To Reproduce **
Access the pen on IE11 or the following emulator
https://ie11.ieonchrome.com/#https://codepen.io/maxjf1/full/wvMPaav

I have the following css:

:root {
    --content-width: 300px
}

.content {
    width: var(--content-width);
}

When using a media-query, the --content-width value doesn't seem to update when the client window size changes - it always seems to pick the last value defined. For example, in the following cases, the content-width always seems to be stuck at 150px regardless of screensize.

:root {
    --content-width: 100px

    @media (min-width: 200px) {
        --content-width: 150px;
    } 
}

or

:root {
    --content-width: 100px
}

@media (min-width: 200px) {
    :root {
        --content-width: 150px;
    }
} 

Hello,

This is a great idea indeed but sadly, for a certain site, with multiple CSS files and far too many useless classes, it is just too slow:(

I had the idea to use your code to generate a CSS which will work on IE 11 and then load it instead of the normal, decent one, if IE is detected, thus avoiding having to do the element transformation dynamically.

I put console.log(css); in the first line of activateStyleElement() and then saved the console output into a file. However, it doesn't seem to do all the needed transformations at that point?

Where should I add the console.log() print in order to output the final transformation per CSS class?

Thanks in advance,

Is there something to watch out for when using this polyfill?
All of my HTML and styles are generated client-side using Svelte.

TypeError: Unable to get property 'color' of undefined or null reference
   at parseRewrittenStyle (eval code:247:9)
   at activateStyleElement (eval code:280:7)
   at foundStyle (eval code:157:5)
   at onElement (eval code:34:7)
   at Anonymous function (eval code:160:3)
   at eval code (eval code:2:2)
   at ./node_modules/ie11-custom-properties/ie11CustomProperties.js (http://localhost:8080/bundle.js:8815:1)

I have integrated this polyfill in my Angular 8 application. What I did was to install it through npm and then I have imported it in polyfills.ts using import 'ie11-custom-properties/ie11CustomProperties'

the css I want IE to read is:
:root { --primary-color: #3ca938; -ie-primary-color: #3ca938; }
.primary-color { background-color: var(--primary-color) !important; }

Now when the app is loading in IE (v11) I get an error and nothing is showing up:
SCRIPT5113: Use before declaration
polyfills.js (3519,3) -> this is leading to ie11CustomProperties.js line 262

Did I skip any step? How can I make this work? Thank you!

Description
After updating from v3 to v4, some elements is not receiving proper styles from the custom properties, but looking at the Developer Tools, the two elements of the example are receiving the values from custom properties in the same way, but for some reason it's not rendered properly.

Example 1: The big blue button "Próximo" is receiving

Example 2: The tab should have a border-bottom in the same blue color as the button (I've outlined the element to be easier to find it in the UI)

Version
4.1.0

Any guesses on this? What should I do to test it better?

Thanks in advance

Hi!

I was looking at the example page and your code and could not find the logic which makes this poly-fill only execute in IE11.

How do you make sure this is indead only executed in IE11 and not in Edge, Chrome, Firefox?

Hi,

I'm trying to parse just the style tags - neither the link tags nor the elements with ie-style attribute. To achieve this I've erased two blocks of code from your polyfill and IE 11 throws a SCRIPT5113 runtime error.

The blocks are:

Any help will be appreciated.

hi, i use this for my project angular 7 and this is my issue:
"-ieVar-❗background-color: var(--secondary-color);
background-color: var(--secondary-color);
".
What is ❗ ? and it does not working, please help me take a look, tks.

Consider a Toggle component in React:

import cx from 'classnames';
import * as classes from 'foo.css';

const Toggle = props => (
  <div className={cx(classes.root, props.checked && classes.checked) }>
...
  </div>
);

When the checked property mutates, classes are re-evaluated.

The polyfill works as expected on initial injection. Then the user clicks to toggle the checked state. The class attribute is repopulated with what cx(...) provides, thus trashing the classnames injected by the polyfill and dropping the resolved values.

I don't see how this can work with any classname altering components. They would have to toggle classes selectively, preserving current state. This might be just how React updates classes.

Are there any workarounds to making this work with React components which may alter classnames, other than "don't alter classnames?"

** Description **
I'm evaluating this polyfill for potential inclusion in a Drupal core theme at https://www.drupal.org/project/olivero/issues/3150283

What I'm finding is that the polyfill is pegging the CPU at 100% for far too long.

** Version **
v4.0.1

** To Reproduce **
Live working example with polyfill:
https://polyfill-2-suc1r45wz6rh1vprw9741vkh9ptosyyq.tugboat.qa/

CSS for the site:
https://git.drupalcode.org/project/olivero/-/tree/polyfill-2/css/src

Video of the issue happening:
https://www.youtube.com/watch?v=qW8BlgWtOuA

Throws an error SCRIPT5007: Unable to get property 'replace' of undefined or null reference in case of <style> element inside .

My naive work around was to add:

  function rewriteCss(css) {
    if (!css) return; // this

But I guess it shouldn't be marked for check beforehand instead.

As per checkmarx scan run on our Angular Application, a security issue is being thrown on line 385 of ie11CustomProperties.js

Checkmarx description:-
The application's !function method receives and dynamically executes user-controlled code using anony1472806589var, at line 103 of ...\src\assets\js\ie11CustomProperties.js. This could enable an attacker to inject and run arbitrary code.
The attacker can inject the malicious payload into the victim's browser, via external input hash. This is read by the browser in the !function method, at line 103 of ...\src\assets\js\ie11CustomProperties.js. The browser then executes this code itself.

Line 385: var oldHash = location.hash;

Is there any alternative to it?

It would be great if this could simply be installed as an npm package for JavaScript dummies like me. It took me a while to figure out how to include it in my Vue project.

Also just want to say thanks, it's a lifesaver for my context. I need the CSS variables to be transpiled dynamically because we are using a CMS backend, so it will need to handle dynamic content. Once we've deployed the project it won't run through WebPack - so something like PostCSS won't work for us.

We are attempting to use this for a CSS keyframe animation, but it does not seem like the generated keyframe is being applied properly.

Cuando intento correr el script, los atributos quedan vacíos. El archivo css tiene un import donde están las variables.

Adjunto evidencia:

Thanks for this polyfill. It's working great for me :-) I loaded it from JSDelivr.net CDN which was fast and easy. Maybe this could be added to the docs as an option? As a bonus, JSDelivr offers a minified version.

<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/[email protected]/ie11CustomProperties.min.js"><\x2fscript>');</script>

On version 4.1.0, I encountered the next behaviour:

My code looks like: color: var(--white) !important; where var(--white) is --white: #ffffff.

Thanks in advance :D!

I have a gallery component. Class 'active' witch has customer property is used to active current item. The default item (1st item) has the default 'active' class, this lib works fine but when I add 'active' class to other items, the lib didn't compile ie compatible class for it.

Is there any way to make elements has the same ie name for classes or define a pre compile class witch element not include when page loaded?

If a selector is not supported by querySelectorAll it throws an error and then many of CP don't work. If the code inside c1.onElement function is wrapped in a try/catch, everything seems to work better.

Hi,

IE already supports calc( )
But I can't get it to work in combination with CSS variables using your polyfill.

Sample Code:
<script>window.MSInputMethodContext && document.documentMode && document.write('<script src="ie11CustomProperties.js"><\x2fscript>');</script>
<style>
:root {
--base_width:3px;
--bg_color:green;
}
.A1 {
padding:1em;
width:50px;
border-left:calc(1px*5) solid red;
border-right:calc(var(--base_width)*5) solid red;
background-color:var(--bg_color);
}
</style>
<body>
<div class='A1'>test</div>
</body>

in IE 11 I get this output:

So

1. Calc works (border-left is rendered 5px wide
2. CSS variables work (background is rendered green
3. But calc + CSS variables does not work (border-right is not rendered at 15px)

Chrome renders the above code correctly:

First, I wanted to say thank you for tackling the issue of IE11 support with CSS variables! We've been roadblocked by this for some time and your polyfill is so close getting us over the finish line with what we need.

With that said, we pulled the polyfill into our project and it does work (!); however, it renders terribly slow in IE11.. with upwards of a half second delay for the variables to trigger when there is a change (like on hover for instance). Our scenario is probably a bit different since we are exploring the idea of a fully dynamic theme with style-agnostic components.

I'm including an example from JS Bin that shows the use case and delay. This delay gets worse the more of this type of work is going on (in our case about 1/4 to 1/2 second). https://jsbin.com/vegekezago/1/edit?html,css,js,output

Is this something that can be fixed?

** Description **
!important is invalid.

But it's valid in 3.1.0;

Since commit d76556f

Runtime is not updated in some cases?
** Version **
Since commit d76556f

** To Reproduce **

.parent{
    --var-width:50%;
//-ie-var-width:50%;
}
.parent .child{
  width:var(--var-width) !important;
//-ieVar-!width:var(--var-width)
}

Hi,

I've tried to import this library into a react project, but I could not get it to work.
The script is starting (I added a console log at the beginning of the file to check it) but the stylings are not visible in Internet Explorer.

I've tried to import it in different ways:

1. Import the js file in the header.
2. Import it at the end of the body
3. Import it in react's main component. (import("ie11-custom-properties").then()...)

Any ideas on how to debug this?

Angular is using Terser to minify JS files. One option set by the CLI is "pure-getter: true".
This option is removing the following line from this library:

style['z-index']; // ie11 can access unknown properties in stylesheets only if accessed a dashed known property

Could you please update it to ensure it's never removed by such process?
For example, you could do something like this:

if (style['z-index'] === undefined) {
   return;
}

Hi,
In my case, I add a classname to the body with javascript that changes the value of a css variable, but the polyfill does not pick up on this change.

For example, the text should turn red after adding the classname "red" to the <body> with javascript:

:root {
   --color: blue;
}
.red {
   --color: red;
}

body {
   color: var(--color);
}

document.body.classList.add("red");

I can imagine it is impossible for the polyfill to automatically pick up this change (except for maybe adding an MutationObserver for the classList on each and every DOM element...), so therefor a method to force the script to re-run would come in handy. Something like:

document.body.classList.add("red");
ie11CustomProperties.reRun();

Hi,

My CSS file has relative paths to load fonts and images.

Not modifying relative paths causes that they're resolved relative to the document instead of the CSS file location.

Any help appreciated.