postcss foft classes

Postcss-foft-classes

Un complemento PostCSS para agregar automáticamente clases para varias estrategias de carga de fuentes. Basado en gran medida en netlify/postcss-fout-with-a-class .

¡La documentación actualmente solo tiene ejemplos de configuración Gulp, pero está abierta a contribuciones con otras configuraciones de herramientas de compilación! Esto funciona en cualquier lugar PostCSS.

Instalación

npm install postcss-foft-classes

Muestra: fout, etapa única

Vea el FOUT completo con un código de ejemplo de clase, con caras de fuentes y el código JavaScript que lo acompaña.

Configuración de trago

Vea esto trabajando en ./gulp-test/ .

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

CSS de entrada

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

Salida CSS

 body {
  font-family : sans-serif;
}

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

Muestra: Foft, dos etapas

Vea el código de ejemplo completo de FOFT, con caras de fuentes y el código JavaScript que lo acompaña.

Configuración de trago

Vea esto trabajando en ./gulp-test/ .

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

CSS de entrada

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

Salida CSS

 body {
  font-family : sans-serif;
}

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

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