postcss foft classes

PostCSS-FOFF-CLASSES

Plugin PostCSS untuk secara otomatis menambahkan kelas untuk berbagai strategi pemuatan font. Berdasarkan banyak pada netlify/postcss-fout-with-a-class .

Dokumentasi saat ini hanya memiliki contoh konfigurasi gulp tetapi terbuka untuk kontribusi dengan konfigurasi alat build lainnya! Ini berfungsi di mana saja postcss.

Instalasi

npm install postcss-foft-classes

Sampel: fout, satu tahap

Lihat fout lengkap dengan kode contoh kelas, dengan wajah font dan kode JavaScript yang menyertainya.

Konfigurasi tegukan

Lihat ini bekerja di ./gulp-test/ .

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

Masukan CSS

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

Output CSS

 body {
  font-family : sans-serif;
}

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

Contoh: FOFT, dua tahap

Lihat kode contoh fooft penuh, dengan wajah font dan kode JavaScript yang menyertainya.

Konfigurasi tegukan

Lihat ini bekerja di ./gulp-test/ .

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

Masukan CSS

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

Output CSS

 body {
  font-family : sans-serif;
}

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

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