postcss font pack
1.0.0
POSTCSS-Plugin zur Vereinfachung der Schriftdeklarationen durch Validierung von nur konfigurierten Schriftart Packs, Hinzufügen von Fallbacks und Umwandlung von Werten für die Schriftzeichen der Schriftart von Menschen.
Der Umgang mit Schriftarten kann ein Schmerz sein, insbesondere in Teams, in denen nicht jeder die genauen Schriftarten finden, die sie verwenden dürfen. Infolgedessen werden Fehler gemacht, Inkonsistenzen werden eingeführt und die Wartung wird zum Albtraum. Das Postcss -Schriftart Pack zielt darauf ab, dieses Problem mit der Konfiguration zu lösen.
Beginnen wir mit den folgenden Annahmen:
Diese Schriftarten können im JSON -Format definiert werden. Sie können es 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 "
}
]
}
}Mit der obigen Konfiguration können wir unser CSS mit der Eigenschaft der Schriftart Shorthand schreiben:
. foo {
font : bold 1 rem/1.2 times;
}
. bar {
font : light condensed italic 1 rem/1.2 roboto;
}Dies würde in Folgendes eindringen:
. 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;
} Beachten Sie, dass das Gewicht von bold auf 700 und von light auf 300 geändert wurde. Dies kam aus den Deklarationswert -Aliase der Konfiguration, die als "weight": ["bold", 700] und "weight": ["light", 300] . Sie können dies mit einer der Prop-Gruppen tun, aber seit style: italic , stretch: condensed und variant: small-caps werden bereits vom Browser verstanden, es war nur sinnvoll, in diesem Fall einen Alias für das Gewicht zu verwenden. Sie hätten das Gewicht genauso gut als "weight": 300 , aber das ist nicht so menschlich lesbar wie light , was der Browser nicht versteht.
Beachten Sie auch, dass der font-family Fallback-Schriftarten hinzugefügt wurden. Auf diese Weise können Sie Ihre Syntax einfach zu lesen/schreiben und das Plugin die schmutzige Arbeit mit Konfiguration erledigen.
Sie müssen das Eigentum der Schriftart nicht verwenden. Sie können auch jede Erklärung einzeln schreiben oder das Plugin für postcss-nested-props verwenden, um eine verschachtelte Syntax zu ermöglichen. Stellen Sie einfach sicher, dass Sie das verschachtelte mit diesem Plugin auspacken, bevor Sie dieses ausführen.
Dieses Plugin behandelt auch das Linien, sodass Sie wissen, dass niemand Schriftarten oder Kombinationen von Schriftartdeklarationen verwendet, die nicht unterstützt oder anderweitig gegen das Design der Website verstoßen. Die folgenden Regeln würden alle den gleichen Fehler werfen, "Pack nicht gefunden":
. foo {
font-family : "Futura PT" ;
}
. bar {
font-family : roboto , sans-serif;
}
. baz {
font : light 1 rem/1.2 roboto;
} Obwohl das light Gewicht in Ihrer Konfiguration zu finden ist, gibt es kein Schriftart, das light verwendet, ohne auch italic und condensed Verwendung zu verwenden. Sie müssen alle drei zusammen verwenden, um eine Packung zu bilden und Linie zu bestehen.
Wie Sie sehen können, stoppt dieses Plugin nicht unterstützte Schriftarten für Schriftarten, die in ihren Spuren tot sind.
Wenn Sie eine bestimmte Erklärung ignorieren müssen, aber nicht das gesamte Stylesheet ignorieren möchten, können Sie dies tun, indem Sie der Erklärung mit einem besonderen Kommentar vorgehen :
. foo {
/* postcss-font-pack: ignore-next */
font : "Comic Sans" , cursive;
}Dies führt dazu, dass der Linter nur den nächsten Selektor ignoriert.
Sie können auch Bereiche ignorieren:
/* 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 Typ: { [prop: string]: string; } Erforderlich: false Standard: undefined
Eine Sammlung von Erklärungen, die Sie ignorieren möchten. Dies können CSS -Hacks oder etwas anderes sein, das Sie wirklich nicht wollen, Validierungsfehler zu werfen. Beispiel unten:
{
ignoreDeclarations : [
{ font : '0/0 serif' }
]
}requireSize Typ: boolean erforderlich: false Standard: false
Wenn true , wird ein Fehler geworfen, wenn Sie eine Regel mit einer oder mehreren Schriftart Deklarationen haben, jedoch ohne Schriftgröße.
. foo {
font-family : roboto;
/* missing required font-size */
} Unabhängig von dieser Option, wenn Sie eine Regel mit nur einer angegebenen font-size haben, erhalten Sie einen Fehler:
. foo {
font-size : 1 rem ;
/* font-size missing required family */
}packs Typ: Object erforderlich: true
Ein Objektliteral, bei dem die Schlüsseln geschlupfte Schriftarten und die Werte sind Schriftart Packs. Jedes Schriftart besteht aus einer erforderlichen family und einer optionalen Sammlung von Eigenschaftsgruppen, die als propGroups bezeichnet werden.
pack.family Typ: string[] Erforderlich: true
Wenn Ihre Schriftschnecke times ist, definieren Sie hier den ausgedehnten Schriftartamen zusammen mit Fallbacks.
Hinweis: Wenn Ihr Schriftart Name Zitate erfordert, müssen Sie sie selbst hinzufügen.
pack.propGroups Typ: PropGroup[] Erforderlich: false
Definieren Sie die Eigenschaftskombinationen, die zusammen verwendet werden können, um eine Schriftart zu verweisen.
pack.propGroups[n] Typ: PropGroup
Jede Prop -Gruppe kann 0 oder mehr der folgenden Schlüssel enthalten:
weightstylevariantstretch Jeder Wert kann eine string oder eine string[] mit zwei Werten sein. Der erste Wert ist ein geschleppter Wert, den Sie in Ihr CSS eingeben können, um auf den zugehörigen Schlüssel zu verweisen. Der zweite Wert ist der erste Wert, in den sie umgesetzt werden. Stellen Sie also sicher, dass es sich um CSS-Valid handelt. Die weight können zusätzlich Zahlen sein.
Wenn ein leeres Objekt bereitgestellt wird, zeigt dies an, dass Sie diese Schriftfamilie mit Standard -Browser -Werten für Gewicht, Stil, Variante und Stretch unterstützen möchten.
Hinweis: Wenn Sie kein leeres Objekt angeben, können Sie keine Familie verweisen, ohne auch auf zusätzliche Eigenschaften zu verweisen.
Führen Sie den folgenden Befehl aus:
$ npm test
Dadurch werden Skripte erstellt, Tests ausgeführt und einen Code -Abdeckungsbericht erstellt. Alles weniger als 100% Abdeckung wirft einen Fehler auf.
Führen Sie für viel schnellere Entwicklungszyklen die folgenden Befehle in 2 separaten Prozessen aus:
$ npm run build:watch
Kompilien Sie die Typscript -Quelle in den Ordner ./dist und Uhren nach Änderungen.
$ npm run watch
Fährt die Tests im Ordner ./dist und Uhren nach Änderungen.
