postcss foft classes

Postcssoft-classes

Un plugin PostCSS pour ajouter automatiquement des classes pour diverses stratégies de chargement de polices. Basé fortement sur netlify/postcss-fout-with-a-class .

La documentation n'a actuellement que des exemples de configuration de Gulp mais est ouvert aux contributions avec d'autres configurations d'outils de construction! Cela fonctionne n'importe où PostCSS.

Installation

npm install postcss-foft-classes

Échantillon: FOT, une seule étape

Voir le Full Fout avec un exemple de code de classe, avec des faces de police et le code JavaScript qui va avec.

Configuration de gorgée

Voir cela fonctionner dans ./gulp-test/ .

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

Entrée CSS

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

Sortie CSS

 body {
  font-family : sans-serif;
}

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

Exemple: Foft, deux étapes

Voir l'exemple complet complet, avec des faces de police et le code JavaScript qui l'accompagne.

Configuration de gorgée

Voir cela fonctionner dans ./gulp-test/ .

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

Entrée CSS

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

Sortie CSS

 body {
  font-family : sans-serif;
}

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

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