Оптимизация CSS-переменных в вулканизированном HTML-файле - PullRequest
Новая
       8

Оптимизация CSS-переменных в вулканизированном HTML-файле

0 голосов
/ 13 июня 2018

Я пишу большой веб-проект с использованием Polymer 1. К сожалению, мы должны поддерживать IE 11. Мы заметили, как переменные css оказывают заметное влияние на производительность в IE 11. Поэтому мы решили заменить операторы var () фактическимизначения насколько это возможно.

Мы пытались использовать gulp-html-postcss вместе с postcss-css-variables.Но postcss-css-variables соблюдает область видимости и не знает, что полимерные компоненты могут обращаться к переменным CSS из собственного стиля.В результате переменные css из нашего пользовательского стиля заменяются на undefined в наших компонентах.

Параметр preserve:true (или preserve:'computed') для postcss-css-variables не дал желаемого эффекта, так как не заменялбыло сделано вообще, если был установлен любой из двух вариантов.

Теперь мы думаем о тихом тупом подходе: мы подумали об использовании регулярного выражения, чтобы найти все операторы var () и заменить их вручную.

У меня два вопроса:

  1. Существует ли инструмент для замены css-переменных, который не учитывает область видимости?
  2. Если нет, есть ли gulp-toolдля произвольной замены регулярного выражения с результатом поиска из того же файла?(Замена /var\((\-(?:\-\w+)+)\)/ на первую группу из /$1:\s*(\S+);/, где $1 - первая группа из first regex.)

У нас 

<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>

Желаемый результат 

<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>

Редактировать: наша задача postcss была 

gulp.task('reducecss', ['vulcanize'] , function() {
    var path = 'foo/bar/baz/foo.vulcanized.html';
    return gulp.src(path, {base: "./"})
        .pipe(postcss([cssvariables(), calc]))
        .pipe(gulp.dest("./"));
});
...