postcss font pack
1.0.0
Le plugin PostCSS pour simplifier les déclarations de police en validant uniquement des packs de polices configurés est utilisé, en ajoutant des replies et en transpillant les valeurs de déclaration de police lisibles par l'homme en CSS valides.
Traiter avec les polices peut être une douleur, en particulier dans les équipes où tout le monde ne sait pas où trouver les polices exactes qu'ils sont autorisées à utiliser. En conséquence, des erreurs sont commises, des incohérences sont introduites et l'entretien devient un cauchemar. PostCSS Font Pack vise à résoudre ce problème avec la configuration.
Commençons par les hypothèses suivantes:
Ces polices peuvent être définies au format JSON. Vous pourriez l'appeler 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 "
}
]
}
}Avec la configuration ci-dessus, nous pouvons écrire notre CSS à l'aide de la propriété Font Shorthand:
. foo {
font : bold 1 rem/1.2 times;
}
. bar {
font : light condensed italic 1 rem/1.2 roboto;
}Cela se transformerait dans les éléments suivants:
. 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;
} Remarquez le poids est passé de bold à 700 et de light à 300 . Cela provenait des alias de valeur de déclaration de la configuration, qui ont été définis comme "weight": ["bold", 700] et "weight": ["light", 300] , respectivement. Vous pouvez le faire avec l'un des groupes d'accessoires, mais depuis style: italic , stretch: condensed et variant: small-caps sont déjà comprises par le navigateur, il était logique d'utiliser un alias pour le poids dans ce cas. Vous pourriez avoir tout aussi bien vécu le poids que "weight": 300 , mais ce n'est pas aussi lisible par l'homme que light , ce que le navigateur ne comprend pas.
Notez également que des polices de secours ont été ajoutées à la font-family . Cela vous permet de garder votre syntaxe facile à lire / écrire et de laisser le plugin faire le sale boulot avec la configuration.
Vous n'avez pas besoin d'utiliser la propriété Font Shorthand. Vous pouvez également rédiger chaque déclaration individuellement ou vous pouvez utiliser le plugin postcss-nested-props pour activer une syntaxe imbriquée. Assurez-vous simplement de déballer le imbriqué avec ce plugin avant d'exécuter celui-ci.
Ce plugin gère également le libellé afin que vous puissiez dormir Sound en sachant que personne n'utilise des polices ou des combinaisons de déclarations de polices qui ne sont pas prises en charge ou qui vont autrement à l'encontre de la conception du site. Les règles suivantes lanceraient toutes la même erreur, "Pack introuvable":
. foo {
font-family : "Futura PT" ;
}
. bar {
font-family : roboto , sans-serif;
}
. baz {
font : light 1 rem/1.2 roboto;
} Même si le poids light est trouvé dans votre configuration, il n'y a pas de pack de police qui utilise light sans utiliser également italic et condensed . Vous devez les utiliser tous les trois pour former un pack et passer le libellé.
Comme vous pouvez le voir, ce plugin arrêtera les déclarations de polices non étayées mortes dans leurs traces.
Si vous devez ignorer une déclaration spécifique, mais que vous ne voulez pas ignorer toute la feuille de style, vous pouvez le faire en précédant la déclaration avec un commentaire spécial:
. foo {
/* postcss-font-pack: ignore-next */
font : "Comic Sans" , cursive;
}Cela entraînera le linter à ignorer uniquement le prochain sélecteur.
Vous pouvez également ignorer les gammes:
/* 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 Type: { [prop: string]: string; } Requis: false par défaut: undefined
Une collection de déclarations que vous aimeriez ignorer. Il peut s'agir de piratage CSS ou de quelque chose d'autre que vous ne voulez vraiment pas lancer des erreurs de validation. Exemple ci-dessous:
{
ignoreDeclarations : [
{ font : '0/0 serif' }
]
}requireSize Type: boolean requis: false par défaut: false
Lorsque true , une erreur sera lancée si vous avez une règle avec une ou plusieurs déclarations de police, mais sans taille de police.
. foo {
font-family : roboto;
/* missing required font-size */
} Quelle que soit cette option, si vous avez une règle avec seulement une font-size spécifiée, vous obtiendrez une erreur:
. foo {
font-size : 1 rem ;
/* font-size missing required family */
}packs Type: Object requis: true
Un objet littéral où les touches sont des polices sluffifiées et les valeurs sont des packs de police. Chaque pack de polices se compose d'une family requise et d'une collection facultative de groupes de propriétés, nommés propGroups .
pack.family Type: string[] Obligatoire: true
Si votre limace de police est times , c'est là que vous définissez le nom de police prolongé ainsi que les replies.
Remarque: Si votre nom de police nécessite des citations, vous devez les ajouter vous-même.
pack.propGroups Type: PropGroup[] Obligatoire: false
Définissez les combinaisons de propriétés qui peuvent être utilisées ensemble pour faire référence à une police.
pack.propGroups[n] Type: PropGroup
Chaque groupe d'accessoires peut contenir 0 ou plus des clés suivantes:
weightstylevariantstretch Chaque valeur peut être une string ou une string[] avec deux valeurs. La première valeur est une valeur liée que vous pouvez taper dans votre CSS pour référencer la clé associée. La deuxième valeur est dans laquelle la première valeur sera transpirée, alors assurez-vous qu'ils sont CSS-Valid. Les valeurs weight peuvent en outre être des nombres.
Si un objet vide est fourni, cela indique que vous souhaitez soutenir cette famille de polices avec des valeurs de navigateur par défaut pour le poids, le style, la variante et l'étirement.
Remarque: Si vous n'incluez pas d'objet vide, vous ne pourrez pas référencer une famille sans faire référence à des propriétés supplémentaires.
Exécutez la commande suivante:
$ npm test
Cela créera des scripts, exécutera des tests et générera un rapport de couverture de code. Une couverture inférieure à 100% mettra une erreur.
Pour des cycles de développement beaucoup plus rapides, exécutez les commandes suivantes dans 2 processus distincts:
$ npm run build:watch
Compiles TypeScript Source dans le dossier ./dist et regarde pour les modifications.
$ npm run watch
Exécute les tests dans le dossier ./dist et regarde les modifications.
