postcss foft classes

Postcs-foft 클래스

PostCSS 플러그인은 다양한 글꼴 로딩 전략에 대한 클래스를 자동으로 추가합니다. netlify/postcss-fout-with-a-class 크게 기반으로합니다.

문서화는 현재 Gulp 구성 예제 만 가지고 있지만 다른 빌드 도구 구성과의 기여에 열려 있습니다! 이것은 PostCS가하는 모든 곳에서 작동합니다.

설치

npm install postcss-foft-classes

샘플 : Fout, 단일 단계

글꼴면과 함께 제공되는 JavaScript 코드와 함께 클래스 예제 코드가 포함 된 전체 fout을 참조하십시오.

Gulp 구성

./gulp-test/ 에서이 작업을 참조하십시오.

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

입력 CSS

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

출력 CS

 body {
  font-family : sans-serif;
}

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

샘플 : FOFT, 두 단계

글꼴면과 그에 따라 JavaScript 코드가 포함 된 전체 Foft 예제 코드를 참조하십시오.

Gulp 구성

./gulp-test/ 에서이 작업을 참조하십시오.

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

입력 CSS

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

출력 CS

 body {
  font-family : sans-serif;
}

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

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