Styles inside svg are being skipped

angel-git commented 3 years ago

Hi, I'm facing the following issue, on the https://codepen.io/jhildenbiddle/pen/ZxYJrR/ if i change the html main with:

<main>
  <strong>Transformed CSS</strong>
  <a href="https://jhildenbiddle.github.io/css-vars-ponyfill" target="_blank">What is this?</a>
  <pre><code></code></pre>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="user-icon" x="0px" y="0px" viewBox="0 0 512 512" xml:space="preserve" style="overflow: visible;"><style type="text/css">.st0 {
          fill: var(--icon-bg, #e1e1e1);
        }
        .st1 {
          fill: #ffffff;
        }
      </style><g><circle class="st0" cx="256" cy="256" r="256"></circle><g class="st1"><path d="M244.9,286.8l-5-124h34.2l-5,124H244.9z"></path><path d="M235.3,328.3c0-6.9,1.8-12.1,5.5-15.6c3.7-3.5,9.1-5.3,16.1-5.3c6.8,0,12.1,1.8,15.8,5.4
              c3.7,3.6,5.6,8.8,5.6,15.5c0,6.5-1.9,11.6-5.7,15.3c-3.8,3.7-9,5.6-15.8,5.6c-6.9,0-12.2-1.8-16-5.5
              C237.2,340.1,235.3,334.9,235.3,328.3z"></path></g></g></svg>
</main>

The output shows us:

<style type="text/css" data-cssvars="skip" data-cssvars-job="1">.st0 {
          fill: var(--icon-bg, #e1e1e1);
        }
        .st1 {
          fill: #ffffff;
        }
      </style>

Why is being skipped? I'm trying to use this svg on IE11 but the value fill: var(--icon-bg, #e1e1e1); is not being picked up.

Thank you for your great tool!

jhildenbiddle commented 3 years ago

Hi @angel-git --

A fix for this issue is now available on a separate branch: https://github.com/jhildenbiddle/css-vars-ponyfill/tree/fix-146.

I have one other fix that I'd like to integrate into the next patch release (for #144). As soon as I get confirmation that the other fix is working as expected, I'll publish a new patch release with both fixes. In the meantime, feel free to checkout the fix-146 branch to verify that it resolves your issue (is should).

Thanks!

angel-git commented 3 years ago

ah great, you made same changes as i was testing with:

if (settings.preserveStatic && node.sheet) {
       node.sheet.disabled = true;
}

var isStyle = node.nodeName.toLowerCase() === "style";

angel-git commented 3 years ago

i can confirm the fix works for me 50% as we also need the fix for https://github.com/jhildenbiddle/css-vars-ponyfill/issues/144, with both i can get css variables working inside the svg under IE11 👍

jhildenbiddle commented 3 years ago

@angel-git --

Interesting that you're also waiting on #144. Any chance you can take that branch for a test drive and report back as well? See that thread for details. The sooner I get a thumbs up/down on #144, the sooner I can release a new version with both fixes.

Thanks!

angel-git commented 3 years ago

Yes without #144 i'm getting undefined on: node.sheet.disabled = true; I merged both branches into one and now works fine for me. Tested on Chrome, ie11 and edge42 (legacy one) So thumbs up! 👍

jhildenbiddle commented 3 years ago

Fixed in 2.4.2. 🎉

jhildenbiddle / css-vars-ponyfill

Styles inside svg are being skipped #146