Question

我正在使用Polymer 1编写一个大型Web项目。遗憾的是，我们必须支持IE 11.我们注意到css变量如何对IE 11中的性能产生显着影响。因此我们决定将var（）语句替换为实际值尽可能。

我们尝试将s1与gulp-html-postcss一起使用。但是postcss-css-variables尊重范围并且不了解聚合物组件能够从定制样式访问css变量。因此，我们的自定义样式中的css变量将替换为组件中的postcss-css-variables。

undefined选项preserve:true（或preserve:'computed'）没有达到预期的效果，因为如果设置了两个选项中的任何一个，则根本不会进行替换。

现在我们正在考虑一种安静的直接方法：我们考虑使用正则表达式来查找所有var（）语句并手动替换它们。

我有两个问题：

是否有用于替换不符合范围的css变量的工具？
如果没有，是否有一个gulp工具可以用同一个文件中的搜索结果任意替换正则表达式？（将postcss-css-variables替换为/var$(\-(?:\-\w+)+)$/中的第一个组，其中/$1:\s*(\S+);/是第一个正则表达式中的第一个组。）

我们有

$1

期望的结果

<dom-module id="foo-component" assetpath="foos/">
  <template strip-whitespace="">
    <style>
      #stuff{
        background: var(--stuff-background);
      }
    </style>

    <div id="stuff" >
    </div>
  </template>

  <script>
    Polymer({
      is: 'foo-component',

      /*ommitted*/


    });
  </script>
</dom-module>
<style is="custom-style" include="iron-flex">

  --background-color: green;
  --stuff-background: var(--background-color);

  .fill-background{
    fill: var(--stuff-background);
  }

</style>

编辑：我们的postcss-task是

<dom-module id="foo-component" assetpath="foos/">
  <template strip-whitespace="">
    <style>
      #stuff{
        background: green;
      }
    </style>

    <div id="stuff" >
    </div>
  </template>

  <script>
    Polymer({
      is: 'foo-component',

      /*ommitted*/


    });
  </script>
</dom-module>
<style is="custom-style" include="iron-flex">


  .fill-background{
    fill: green;
  }

</style>

优化硫化HTML文件中的css变量

0 个答案: