postcss foft classes

Classes PostCSS-Foft

Um plug -in PostCSS para adicionar classes automaticamente para várias estratégias de carregamento de fontes. Baseado fortemente no netlify/postcss-fout-with-a-class .

Atualmente, a documentação possui exemplos de configuração de gulp, mas está aberta a contribuições com outras configurações de ferramentas de construção! Isso funciona em qualquer lugar do PostCSS.

Instalação

npm install postcss-foft-classes

Amostra: fout, estágio único

Consulte o FOUT completo com um código de exemplo de classe, com faces de fonte e o código JavaScript que acompanha ele.

Config Gulp

Veja isso funcionando em ./gulp-test/ .

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

Entrada CSS

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

Saída CSS

 body {
  font-family : sans-serif;
}

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

Amostra: foft, dois estágios

Consulte o código de exemplo foff completo, com faces de fonte e o código JavaScript que acompanha.

Config Gulp

Veja isso funcionando em ./gulp-test/ .

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

Entrada CSS

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

Saída CSS

 body {
  font-family : sans-serif;
}

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

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