postcss foft classes

Postcss-Foft-Classes

Плагин PostCSS для автоматического добавления классов для различных стратегий загрузки шрифтов. В значительной степени основан на netlify/postcss-fout-with-a-class .

В настоящее время документация имеет только примеры конфигурации Gulp, но она открыта для вкладов с другими конфигурациями инструмента сборки! Это работает в любом месте Postcss.

Установка

npm install postcss-foft-classes

Образец: Fout, одиночная стадия

См. Полный Fout с примером класса с кодом с лицами шрифтов и кодом JavaScript, который идет с ним.

Gulp Config

Смотрите, работая в ./gulp-test/ .

 . pipe (
  postcss ( [
    foftLoadedClasses ( {
      groups : [
        {
          families : [ "Lato" ] ,
          classNames : [ "fonts-loaded" ]
        }
      ]
    } )
  ] )
)

Ввод CSS

 body {
  font-family : Lato , sans-serif;
}

Вывод CSS

 body {
  font-family : sans-serif;
}

. fonts-loaded body {
  font-family : Lato;
}

Образец: FOFT, два этапа

См. Полный код примера FOFT, с лицами шрифтов и кодом JavaScript, который идет с ним.

Gulp Config

Смотрите, работая в ./gulp-test/ .

 . pipe (
  postcss ( [
    foftLoadedClasses ( {
      groups : [
        {
          families : [ "LatoInitial" , "Lato" ] ,
          classNames : [ "fonts-loaded" , "fonts-loaded-2" ]
        }
      ]
    } )
  ] )
)

Ввод CSS

 body {
  font-family : Lato , sans-serif;
}

Вывод CSS

 body {
  font-family : sans-serif;
}

. fonts-loaded body {
  font-family : LatoInitial;
}

. fonts-loaded-2 body {
  font-family : Lato;
}