postcss font pack
1.0.0
구성된 글꼴 팩 만 검증하여 글꼴 선언을 단순화하기위한 Postcss 플러그인을 사용하고 폴백을 추가하고 사람이 읽을 수있는 글꼴 선언 값을 유효한 CSS로 전환합니다.
글꼴을 다루는 것은 특히 모든 사람이 사용할 수있는 정확한 글꼴을 찾을 수있는 곳을 모르는 팀에서 고통이 될 수 있습니다. 결과적으로 실수가 발생하고 불일치가 도입되고 유지 보수가 악몽이됩니다. Postcss Font Pack 은이 문제를 구성으로 해결하는 것을 목표로합니다.
다음 가정부터 시작하겠습니다.
이 글꼴은 JSON 형식으로 정의 할 수 있습니다. font-packs.json 이라고 부를 수 있습니다.
{
"times" : {
"family" : [ " 'Times New Roman' " , " Times " , " serif " ],
"propGroups" : [
{},
{
"weight" : [ " bold " , 700 ]
}
]
},
"roboto" : {
"family" : [ " Roboto " , " Arial " , " sans-serif " ],
"propGroups" : [
{
"style" : " italic " ,
"weight" : [ " light " , 300 ],
"stretch" : " condensed " ,
"variant" : " small-caps "
}
]
}
}위 구성을 사용하면 글꼴 속성 속성을 사용하여 CSS를 작성할 수 있습니다.
. foo {
font : bold 1 rem/1.2 times;
}
. bar {
font : light condensed italic 1 rem/1.2 roboto;
}이것은 다음과 같이 변환합니다.
. foo {
font : 700 1 rem/1.2 'Times New Roman' , Times , serif;
}
. bar {
font : 300 condensed italic 1 rem/1.2 Roboto , Arial , sans-serif;
} 체중이 bold 에서 700 으로, light 으로 300 으로 변경되었습니다. 이것은 구성의 선언 값 별칭에서 나온 것으로, "weight": ["bold", 700] 및 "weight": ["light", 300] 로 정의되었습니다. Prop Groups에서는이 작업을 수행 할 수 있지만 style: italic , stretch: condensed 및 variant: small-caps 이미 브라우저에서 이해 되므로이 경우 무게에 별명을 사용하는 것이 합리적입니다. 무게를 "weight": 300 으로 잘 조정했을 수도 있지만 브라우저가 이해하지 못하는 light 만큼 인간으로 읽을 수는 없습니다.
또한 폴백 글꼴이 font-family 에 추가되었습니다. 이를 통해 구문을 쉽게 읽고 쓰기 쉽게 유지하고 플러그인이 구성으로 더러운 작업을 수행 할 수 있습니다.
글꼴 속성 속성을 사용할 필요가 없습니다. 또한 각 선언을 개별적으로 작성하거나 postcss-nested-props 플러그인을 사용하여 중첩 된 구문을 활성화 할 수 있습니다. 이 플러그인을 실행하기 전에 해당 플러그인으로 중첩을 풀어야합니다.
이 플러그인은 또한 린팅을 처리하므로 지원되지 않거나 사이트 설계에 반대하는 글꼴 또는 글꼴 선언의 글꼴 또는 조합을 사용하지 않는다는 것을 알면서도 잠을 잘 수 있습니다. 다음 규칙은 모두 같은 오류를 던질 것입니다.
. foo {
font-family : "Futura PT" ;
}
. bar {
font-family : roboto , sans-serif;
}
. baz {
font : light 1 rem/1.2 roboto;
} 구성에서 light 무게가 발견 되더라도 italic 와 condensed 되지 않고도 light 사용하는 글꼴 팩이 없습니다. 팩을 형성하고 일선을 통과하려면 세 가지를 모두 사용해야합니다.
보시다시피,이 플러그인은지지되지 않은 글꼴 선언이 트랙에서 죽은 것을 중지합니다.
특정 선언을 무시해야하지만 전체 스타일 시트를 무시하고 싶지 않은 경우, 선언에 앞서 특별한 의견을 제시 할 수 있습니다.
. foo {
/* postcss-font-pack: ignore-next */
font : "Comic Sans" , cursive;
}이로 인해 Linter는 다음 선택기 만 무시하게됩니다.
범위를 무시할 수도 있습니다.
/* postcss-font-pack: start-ignore */
. foo {
font : "Comic Sans" , cursive;
font-size : 38 px ;
}
/* postcss-font-pack: end-ignore */ $ npm install postcss-font-pack
postcss ( [
require ( 'postcss-font-pack' ) ( {
packs : require ( './font-packs.json' )
} )
] ) ; import * as postcssFontPack from 'postcss-font-pack' ;
postcss ( [
postcssFontPack ( {
packs : require ( './font-packs.json' )
} )
] ) ; ignoreDeclarations 유형 : { [prop: string]: string; } 필수 : false 기본값 : undefined
무시하고 싶은 선언 모음. 이들은 CSS 해킹 또는 유효성 검사 오류를 버리는 것을 원하지 않는 다른 것일 수 있습니다. 아래 예 :
{
ignoreDeclarations : [
{ font : '0/0 serif' }
]
}requireSize 유형 : boolean 필수 : false Default : false
true 때, 하나 이상의 글꼴 선언이 있지만 글꼴 크기가없는 규칙이 있으면 오류가 발생합니다.
. foo {
font-family : roboto;
/* missing required font-size */
} 이 옵션에 관계없이 font-size 지정된 규칙이있는 경우 오류가 발생합니다.
. foo {
font-size : 1 rem ;
/* font-size missing required family */
}packs 유형 : Object 필수 : true
키가 슬러그 화 된 글꼴이고 값은 글꼴 팩입니다. 각 글꼴 팩은 필수 family 과 propGroups 로 명명 된 선택적 자산 그룹 컬렉션으로 구성됩니다.
pack.family 유형 : string[] 필수 : true
글꼴 슬러그가 times 이면, 여기에서 확장 된 글꼴 이름을 폴백과 함께 정의 할 수 있습니다.
참고 : 글꼴 이름에 따옴표가 필요한 경우 직접 추가해야합니다.
pack.propGroups 유형 : PropGroup[] 필수 : false
글꼴을 참조하는 데 함께 사용할 수있는 속성 조합을 정의하십시오.
pack.propGroups[n] 유형 : PropGroup
각 소품 그룹은 다음 키 중 0 이상을 포함 할 수 있습니다.
weightstylevariantstretch 각 값은 string 또는 string[] 두 값이 될 수 있습니다. 첫 번째 값은 CSS를 입력하여 관련 키를 참조 할 수있는 슬러그 값입니다. 두 번째 값은 첫 번째 값이 전달되는 것입니다. 따라서 CSS-Valid인지 확인하십시오. weight 값은 추가로 숫자 일 수 있습니다.
빈 객체가 제공되면 무게, 스타일, 변형 및 스트레치에 대한 기본 브라우저 값 으로이 글꼴 패밀리를 지원하려고합니다.
참고 : 빈 객체를 포함하지 않으면 추가 속성을 참조하지 않고 가족을 참조 할 수 없습니다.
다음 명령을 실행하십시오.
$ npm test
스크립트를 구축하고 테스트를 실행하며 코드 범위 보고서를 생성합니다. 100% 미만의 적용 범위는 오류가 발생합니다.
훨씬 빠른 개발주기의 경우 다음 명령을 2 개의 개별 프로세스로 실행하십시오.
$ npm run build:watch
TypeScript 소스를 ./dist 폴더로 컴파일하고 변경 사항을 확인합니다.
$ npm run watch
./dist 폴더에서 테스트를 실행하고 변경 사항을 확인합니다.
