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 "
}
]
}
}上記の構成を使用すると、Font Shorthandプロパティを使用して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]として定義された構成の宣言バリューエイリアスから来ました。これをプロップグループで行うことができますが、 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を使用するフォントパックはありません。それらの3つすべてを一緒に使用して、パックを形成し、ざらざに合格する必要があります。
ご覧のとおり、このプラグインは、トラックでサポートされていないフォント宣言を停止します。
特定の宣言を無視する必要があるが、スタイルシート全体を無視したくない場合は、特別なコメントで宣言の前にそうすることができます。
. foo {
/* postcss-font-pack: ignore-next */
font : "Comic Sans" , cursive;
}これにより、リナーは次のセレクターのみを無視します。
範囲を無視することもできます。
/* 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デフォルト： false
trueの場合、1つ以上のフォント宣言を備えたルールがあるが、フォントサイズがない場合はエラーがスローされます。
. 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各値は、2つの値を持つstringまたはstring[]です。最初の値は、CSSを入力して関連するキーを参照できる熟成値です。 2番目の値は、最初の値が導入されるものであるため、CSS-validであることを確認してください。さらに、 weight値は数字になります。
空のオブジェクトが提供されている場合、これは、重量、スタイル、バリアント、ストレッチのデフォルトのブラウザ値でこのフォントファミリをサポートすることを示します。
注：空のオブジェクトが含まれていない場合、追加のプロパティを参照せずに家族を参照することができません。
次のコマンドを実行します。
$ npm test
これにより、スクリプトを作成し、テストを実行し、コードカバレッジレポートを生成します。 100％未満のカバレッジがエラーが発生します。
開発サイクルをはるかに高速化するには、次のコマンドを2つの別々のプロセスで実行します。
$ npm run build:watch
タイプスクリプトソースを./distフォルダーにコンパイルし、変更を監視します。
$ npm run watch
./distフォルダーでテストを実行し、変更を監視します。
