Share
Comme vous l'aurez compris dans les entrées précédentes de cette série, PostCSS est entièrement consacré aux plugins. Les plugins que vous choisirez définiront complètement votre expérience avec PostCSS.
Étant donné qu'elles sont si essentielles et fondamentales, avant de passer à la production de feuilles de style via PostCSS, nous allons examiner comment explorer l'écosystème du plug-in PostCSS. Grâce à cela, vous aurez également une idée de la puissance de PostCSS et de la manière dont il offre des fonctionnalités qui ne peuvent pas être créées de manière égale par d'autres moyens existants..
Nous verrons où vous pouvez aller pour garder un œil sur les plugins les plus récents et les plus performants, les catégories de ces plugins et les considérations sur la manière de charger tous ces plugins dans des projets de manière logique..
Lorsque vous commencez à travailler avec PostCSS, vous devez surveiller trois emplacements pour trouver d'excellents plugins..
La page principale du référentiel PostCSS Github contient actuellement une liste complète de plug-ins catégorisée. Cette liste a tendance à être mise à jour fréquemment, c'est donc un endroit assez fiable pour voir quels plugins sont disponibles pour différents aspects du développement..
https://github.com/postcss/postcss#pluginsLe site postcss.parts, qui fournit un catalogue interrogeable de plug-ins PostCSS, constitue un ajout relativement nouveau et très apprécié au monde PostCSS..
http://postcss.partsEn ce moment, PostCSS voit un nouveau et intéressant plug-in publié régulièrement. Les deux emplacements ci-dessus ne mettent pas en surbrillance les nouveaux plug-ins, vous ne saurez donc pas s'il existe des éléments que vous n'avez pas vus auparavant. Pour cette raison, c'est une bonne idée de suivre ou de visiter fréquemment @PostCSS sur Twitter..
https://twitter.com/postcssL'étendue des fonctionnalités des plugins qui peuvent fonctionner avec PostCSS est énorme, c'est donc une bonne idée d'avoir une introduction au général les types des plugins que vous êtes susceptible de rencontrer avant de vous lancer dans le test de l'un d'eux.
La nature fondamentale de PostCSS est qu’elle fournit un traitement CSS modulaire. En tant que tels, les plugins individuels sont encouragés à ne couvrir qu'un petit ensemble de fonctionnalités bien défini. Les plugins multifonctions mégalithiques qui font tout à la fois sont découragés.
Cela dit, vous souhaitez parfois incorporer une longue liste de fonctionnalités à un projet et vous préférez ne pas avoir à installer et configurer individuellement vingt plug-ins différents. C'est là que les «packs» entrent en jeu. Les packs rassemblent plusieurs plug-ins modulaires sous un même parapluie thématique, leur permettant d'être tous installés et déployés à la fois..
Par exemple, le pack PreCSS combine neuf plug-ins PostCSS distincts pour créer une fonctionnalité de type Sass. Le pack cssnano utilise une vingtaine de plugins PostCSS pour fournir une minification et une optimisation CSS. En utilisant ces packs, vous évitez d'installer et de charger manuellement chacun des plugins..
Les futures CSS ont pour but de vous permettre d'écrire la syntaxe dont nous savons qu'elle est à venir dans les spécifications du W3C, mais pourrait ne pas encore être entièrement prise en charge par les navigateurs..
Par exemple, vous voudrez peut-être utiliser la notation hexadécimale à huit ou quatre chiffres à venir pour créer des couleurs opaques. Pour générer un bleu légèrement transparent, vous pouvez utiliser un code de couleur comme # 0000ffcc, ou sa forme abrégée # 00fc, et exécutez le plug-in postcss-color-hex-alpha pour le convertir au format largement pris en charge rgba (0, 0, 100%, 0.8).
La présence la plus importante dans le CSS futur de PostCSS est le pack cssnext, qui apporte beaucoup de CSS futurs conformes aux spécifications. Cependant, à l'heure actuelle, son développeur, Maxime Therouin, effectue une transition majeure dans son fonctionnement. En tant que tel, nous nous ferons un plaisir de vous apporter un futur tutoriel CSS jusqu'à la fin de la transition..
Lorsque les CSS à venir visent à faire fonctionner le code de demain dans les navigateurs actuels, les solutions de remplacement consistent essentiellement à faire en sorte que le code actuel fonctionne dans les navigateurs d'hier. Dans un monde parfait, nous n'aurions jamais à penser à des navigateurs anciens et obsolètes, mais la réalité est qu'il existe encore certains projets pour lesquels il est essentiel de prendre en charge les anciens navigateurs. La catégorie des solutions de rechange des plug-ins PostCSS peut vous aider dans ce cas..
Tous ces plugins fonctionnent en mode mains libres, ce qui signifie que vous écrivez votre code conformément aux normes en vigueur. Ils trouveront le code nécessitant des solutions de secours héritées et les inséreront automatiquement selon les besoins..
Par exemple, vous pouvez avoir des couleurs plates ajoutées à des replis pour rgba () couleurs par le plugin postcss-color-rgba, ou ajouter des solutions de repli compatibles avec IE8 pour opacité via le plugin postcss-opacity. Le plus connu de ces plugins est Autoprefixer, qui ajoute les préfixes de vendeurs au besoin, en fonction des données de CanIUse.com..
Vous en apprendrez plus sur les plugins de secours dans le prochain tutoriel «Pour une compatibilité entre navigateurs croisés» de cette série..
Les plugins d'extension de langue ajoutent des fonctionnalités à CSS qui seraient autrement absentes. En comparaison, vous pourriez considérer que la plupart des préprocesseurs sont entièrement composés d'extensions de langage. En fait, les utilisateurs de Sass, Stylus et LESS se sentiront probablement à l'aise avec de nombreuses extensions de langage PostCSS, telles que celles ajoutant des mixins, des variables, des conditions, des boucles, des imbrications, des extensions, etc..
Cependant, comme PostCSS est totalement flexible, il existe également des extensions de langage offrant des fonctionnalités que l’on ne trouve généralement pas dans les préprocesseurs. Par exemple, le plug-in postcss-bem ajoute une syntaxe spécifique pour la création de CSS suivant la méthodologie BEM / SUIT (pour plus d'informations à ce sujet dans un tutoriel ultérieur). Le plugin postcss-define-property vous permet de créer vos propres propriétés personnalisées ou de redéfinir des propriétés natives. Et le plugin postcss-match vous permet d’utiliser non seulement des conditions, mais également une logique de correspondance de motif dans votre code..
Avec cette variété, tout indique que PostCSS va mûrir au point de pouvoir fournir une grande partie des fonctionnalités que beaucoup d'entre nous recherchent dans les pré-processeurs, mais également de nombreuses fonctionnalités au-delà..
De nombreux plug-ins de couleur actuellement disponibles pour PostCSS traitent de la transformation des couleurs d'un format à un autre, par exemple à partir de #hexa à rgba (), hcl (H, C, L) à #rgb, ou pantone à #rgb. De plus, certains des plugins les plus utiles gèrent les manipulations de couleurs, telles que le mélange de deux couleurs, ou la réduction de leur luminosité..
Un de mes favoris en particulier vous permet de prendre votre jeu de couleurs existant, puis de produire une version telle qu’elle apparaîtrait aux personnes souffrant de daltonisme. Rien de tel que de vivre quelque chose pour vous aider à évaluer l'accessibilité de vos conceptions..
Nous verrons plus en détail les plug-ins de couleur dans nos derniers tutoriels sur le prétraitement, le raccourci et les «goodies divers»..
Cette catégorie de plug-ins gère de nombreuses tâches d'optimisation, telles que le conditionnement des données Base64, la génération de feuilles de sprite CSS et l'optimisation SVG. Vous trouverez également plusieurs autres types d’outils d’image et de police, tels que la conversion automatique SVG en PNG pour IE8, la génération automatique d’images WebP et l’inclusion dans les navigateurs compatibles., @ font-face raccourcis, raccourcis de support de la rétine et plus.
Découvrir que des systèmes de grille pouvaient être écrits dans PostCSS, sans avoir à charger des feuilles de style préécrites ni à utiliser des mixages de préprocesseurs, a été la première chose qui m’a vraiment ouvert les yeux sur la puissance de PostCSS. Auparavant, je pensais que PostCSS concernait principalement le filtrage et la modification de CSS existants, mais les systèmes de grille montrent qu'il peut être utilisé pour créer des bibliothèques entières de styles externes..
Il existe actuellement trois systèmes de grille disponibles pour PostCSS:
Les plugins d'optimisation PostCSS se divisent en deux catégories générales: la minification et la modification du code. Grâce à ces plugins, vous pouvez effectuer des tâches de minification telles que l’élimination des espaces et des commentaires. Vous pouvez également effectuer des modifications plus complexes, telles que la combinaison de requêtes multimédia correspondantes, l’inlining. @importation feuilles de style, optimisation du poids des polices, suppression des règles vides ou en double, etc..
Nous aborderons plus en détail cette catégorie de plugins PostCSS dans le prochain tutoriel «Pour la minification et l'optimisation».
En tant qu'utilisateur pré-processeur, j'ai toujours constaté que l'un des principaux avantages était la possibilité de réduire la quantité de code que je devais écrire en utilisant des variables et des mixins. Grâce à PostCSS, j'ai découvert des moyens encore plus complets de rendre l'écriture de code plus efficace via la longue liste de plug-ins de raccourci et de raccourci disponibles..
Vous pouvez choisir d'utiliser un raccourci pour les propriétés, par exemple en définissant vos propres propriétés ou en utilisant un raccourci existant. w au lieu de largeur, h au lieu de la taille etc. Vous pouvez sortir @ font-face code, transformer code, triangles et cercles sur une seule ligne. Et vous pouvez raccourcir toutes sortes de tâches courantes, y compris le style des liens, le centrage, la réparation, le positionnement, le dimensionnement, l'espacement et la sortie des codes de couleur.
Nous allons approfondir ces plugins dans le tutoriel «Raccourcis et raccourcis».
PostCSS peut également être utilisé pour plus que la transformation de CSS, il peut également être utilisé pour fournir des commentaires lorsque vous développez votre CSS. Certains des plugins d’analyse et de reporting disponibles incluent un linter for BEM / SUIT code, un plugin pour vous donner une ventilation de votre code via CSSstats, «DoIUse» pour vous indiquer comment votre code s’aligne avec les données de Can I Use, et un générateur de fichiers Modernizr.
Il existe de très bons plugins PostCSS qui ne rentrent pas dans une catégorie spécifique mais sont trop beaux pour être ignorés. Par exemple, nous avons postcss-style-guide qui génère automatiquement un guide de style basé sur votre CSS. Il y a aussi le plugin rtlcss, utilisé par WordPress, qui génère une version de droite à gauche de votre feuille de style.
Nous allons couvrir certains de ces excellents plugins dans le tutoriel "Divers Goodies".
La catégorie "amusement" comprend des joyaux tels que postcss-spiffing qui vous permet d'utiliser l'orthographe britannique, par exemple Couleur au lieu de Couleur, et la syntaxe bien maniérée telle que !S'il vous plaît au lieu de !important.
Il est peu probable que des plugins de cette catégorie soient utilisés dans un projet réel. Cependant, un avantage réel de ces derniers est qu'ils constituent des exemples faciles à comprendre pour les développeurs de plugins en herbe. Très simples et brefs, ils sont parfaits pour jeter un coup d’œil à l’intérieur et voir l’essentiel de la fabrication des plugins PostCSS..
L’une des principales considérations à prendre en compte lors du chargement du tableau des plug-in PostCSS est l’ordre dans lequel vous les exécutez. Vous devrez faire une pause et réfléchir à votre liste, en déterminant si un plugin peut avoir besoin de courir après l'autre afin de faire ce que vous voulez..
Par exemple, vous pouvez utiliser un plugin tel que postcss-simple-vars qui ajoute la prise en charge des variables, et le stocker rgba () valeur comme si:
/ * code source * / $ color: rgba (0, 0, 0, 0.5); .style background: $ color; / * est compilé dans: * / .style background: rgba (0, 0, 0, 0.5);
Vous pouvez également utiliser un plugin tel que postcss-color-rgba-fallback pour ajouter un hexcode plat comme solution de secours, ce qui vous donne:
/ * compile pour: * / .style background: # 000; arrière-plan: rgba (0, 0, 0, 0,5);
Dans ce cas, vous devez vous assurer que vous avez exécuté le plug-in de variables avant le plugin de repli.
Si vous avez exécuté le plugin de secours en premier, il vous suffira de trouver fond: $ couleur; dans votre CSS et sais pas qu'il y avait un rgba () valeur pour travailler avec.
Cependant, en exécutant le plug-in variables en premier, lorsque le plug-in de repli sera exécuté, il trouvera arrière-plan: rgba (0, 0, 0, 0,5); et aller de l'avant et ajouter dans le repli requis.
L'ordre de chargement des plugins est quelque chose qui va changer avec chaque ensemble de plugins. Vous devrez donc peut-être juste faire un peu d'expérimentation parfois pour que tout fonctionne bien..
Pour résumer l'exploration des plugins PostCSS:
Nous avons terminé notre guide de démarrage rapide sur PostCSS et nous sommes prêts à passer à la pratique et à commencer à produire du code CSS réel..
Dans le prochain didacticiel, nous commencerons par expliquer comment utiliser PostCSS pour générer du code compatible entre navigateurs en insérant automatiquement des préfixes de vendeurs, ainsi que plusieurs solutions de rechange pour les propriétés dotées de navigateurs hérités, notamment IE8..
A bientôt dans le prochain tutoriel!
Accentsconagua