Please Update "Small Limitations" to Include Incompatibility with @imports

Question

Please Update "Small Limitations" to Include Incompatibility with @imports

davidhmays opened this issue 4 years ago · comments

Spent a great deal of troubleshooting to discover that the ie11CustomProperties polyfill does not support stylesheets loaded using @imports.

While @imports is not recommended, it is still valid, and therefore an explicit warning of its incompatibility would be very helpful for future users.

V4.1.0

Vitaly Pinchuk commented 3 years ago

#92

Tobias Buschor · Answer 1 · Thu Sep 17 2020 17:48:52 GMT+0800 (China Standard Time)

Thank you, done.

Vitaly Pinchuk · Answer 2 · Thu Feb 03 2022 22:39:24 GMT+0800 (China Standard Time)

@imported files with css-variables aren't working
https://jsbin.com/teziyibijo/1/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <script>
    window.MSInputMethodContext && document.documentMode &&
      document.write('<script src="https://cdn.jsdelivr.net/gh/nuxodin/ie11CustomProperties@4.1.0/ie11CustomProperties.min.js"><\x2fscript>');
  </script>
  <style>
    @import 'https://vit-1.github.io/iAMcss-samples/v3/iam-select/iam-select.css';
    :root {
      --check-var: orange;
    }
    [iam-main-h], [vue-header-h] {
      color: var(--check-var);
    }
    [vue-header-h] {
      color: var(--iam-select-c-2nd-back);
    }
  </style>
</head>
<body iam-main iam-themes="simple-colors">
  <div id="VueApp">
    <my-header>This text should be replaced</my-header>
    <my-header-too>This text should be replaced</my-header-too>
  </div>
  <h1 iam-main-h>Outside VueApp</h1>
      
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
  <script>
    var MyHeader = {
      template:'<h1 vue-header-h>Inside VueApp</h1>'
    };
    
    var MyHeaderToo = {
      template:'<h2 vue-header-too>Inside VueApp too</h2>'
    };

    new Vue({
      el:'#VueApp',
        components: {
          'my-header': MyHeader,
          'my-header-too': MyHeaderToo
      }
    });
  </script>
</body>
</html>