jhildenbiddle / css-vars-ponyfill

Client-side support for CSS custom properties (aka "CSS variables") in legacy and modern browsers
https://jhildenbiddle.github.io/css-vars-ponyfill
MIT License
1.46k stars 64 forks source link

Comma separated CSS selectors are exploded with commas #128

Closed rndmerle closed 4 years ago

rndmerle commented 4 years ago

Hi!

From version 2.3.0, any combined CSS selectors (with coma) are quite destroyed :p Input CSS:

.entity-enter-to,
.entity-leave {
  opacity: 1;
}

Ponyfill's output CSS copied from IE11 DOM:

.,e,n,t,i,t,y,-,e,n,t,e,r,-,t,o,,,
,.,e,n,t,i,t,y,-,l,e,a,v,e{opacity:1;}

If you have no idea where it comes from I can try to find more infos. (single selectors are fine)

jhildenbiddle commented 4 years ago

@rndmerle --

I put together a quick StackBlitz demo using 2.3.1 of the ponyfill and I'm not seeing this issue.

Can you create a demo for review?

rndmerle commented 4 years ago

Ok I spent hours digging code and testing setups. It happens only when all these conditions are met:

Then output for:

:root {
  --layout-gutter: 1rem;
}

.whatever,
body {
  background: lightsteelblue;
}

.app {
  margin: calc(var(--layout-gutter));
}

is:

<style data-cssvars="out" data-cssvars-job="2" data-cssvars-group="1">.,w,h,a,t,e,v,e,r,,,
,b,o,d,y{background:lightsteelblue;}.app{margin:calc(1rem);}</style>

I tried to reproduce it on js-bin (because it supports IE11) using core-js-bundle but it's not breaking, I'm not sure the regexp.exec shim is applied.

I'll maybe look into that later again.

jhildenbiddle commented 4 years ago

FWIW, I discovered glitch.com projects also work in IE11. Just launch your project's preview in a new window, then copy/paste the preview window's URL into IE11.

rndmerle commented 4 years ago

Apparently the IE11 support on Glitch is not yet available. Anyway, I spent some more hours trying to set-up a minimal reproduction repo but it's even more complicated and inextricable than I thought.

I actually gave up :( The farthest I could go was to find it was related to es.string.split not being polyfilled while es.regexp.exec was. But it's more complicated it seems.

Considering the fact that I've an easy workaround, that it seems nobody else has this issue, and that even if I could coin the real cause it would still take hours to fix, I think it's not reasonable to spend more time on this.

jhildenbiddle commented 4 years ago

Sounds good. Appreciate the effort, @rndmerle.

If for some reason you decide to dive back in and there is something I can do to help, give me a shout. I'll close this issue for now, but I'm happy to reopen if/when necessary.