Share
Comme je suis sûr que vous en avez bien compris le sens, ce qui rend PostCSS incroyable, c’est son écosystème de plug-ins en plein essor. Et une des principales raisons pour lesquelles il existe tant de très bons plugins, avec de plus en plus de sorties, est que PostCSS rend la création de votre propre plugin si accessible pour tous ceux qui ont une expérience de JavaScript..
Vous n'avez pas besoin d'une autorisation spéciale pour créer un plugin PostCSS; si vous voulez en faire un, il vous suffit d'aller droit au but. Grâce à cette liberté, vous avez la possibilité de transformer vos processus de développement CSS en tout ce que vous voulez, sans parler de la possibilité de partager votre travail avec d'autres membres de la communauté en croissance rapide de PostCSS..
Dans ce tutoriel, vous apprendrez à créer votre propre plugin pour PostCSS. Nous n'entrerons pas trop dans l'API du plugin, et nous n'utiliserons pas de codage super hardcore. Je suis moi-même un développeur front-end, et mes compétences en JavaScript sont au niveau que vous attendez d'elles pour un front-end, mais cela ne m'a pas empêché de créer mon premier plugin PostCSS en quelques heures seulement..
Suivez le mouvement et constatez par vous-même à quel point le développement du plug-in PostCSS est abordable!
Nous allons créer un plugin permettant d’insérer facilement des piles de polices dans famille de polices déclarations via la syntaxe suivante:
Accentsconagua
h1 font-family: "Open Sans", fontstack ("Arial"); Après compilation, le code ci-dessus deviendra:
h1 font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans serif;
Même si vous créez votre propre plugin, vous devrez tout d’abord créer un projet Gulp ou Grunt vide. Vous allez charger votre plugin dans ce projet de la même manière que vous avez utilisé les plugins d'autres personnes tout au long de cette série..
Vous pouvez découvrir comment configurer des projets Gulp ou Grunt pour PostCSS dans les tutoriels précédents:
Si vous ne souhaitez pas configurer manuellement votre projet à partir de rien, vous pouvez cependant télécharger les fichiers source joints à ce didacticiel et extraire le projet de démarrage fourni Gulp ou Grunt dans un dossier de projet vide. Ensuite, avec un terminal ou une invite de commande pointée sur le dossier, exécutez la commande npm installer.
Créez un dossier dans «node_modules» nommé «postcss-myplugin». Il est courant d'utiliser le préfixe postcss- pour préciser que votre plugin est pour PostCSS.
Tous les plugins PostCSS sont des modules de nœuds, nous devrons donc transformer votre nouveau dossier en un seul. Ouvrez une invite de commande / terminal pointée vers le dossier nouvellement créé et exécutez npm init. Ceci effectuera la configuration de base d'un module de nœud. Il vous suffit donc de suivre les invites qui s'affichent dans votre terminal, en laissant le champ «point d'entrée» comme valeur par défaut «index.js»..
Lorsque cela est fait, avec votre terminal toujours dirigé vers le dossier, exécutez la commande npm install postcss --save. Ceci installera PostCSS en tant que dépendance de ce module, chose que tous les plugins PostCSS doivent faire..
Créez un fichier nommé "index.js" dans le dossier "postcss-myplugin". Ajoutez ce code à charger dans le module postcss principal:
var postcss = require ('postcss');Ensuite, ajoutez en dessous ce wrapper de base qui entourera le code de traitement de notre plugin:
var postcss = require ('postcss'); module.exports = postcss.plugin ('myplugin', fonction myplugin (options) fonction de retour (css) options = options || ; // Le code de traitement sera ajouté ici);Nous sommes maintenant prêts à charger votre plugin nouvellement créé dans votre projet. Il ne fera rien pour le moment, mais nous voulons simplement mettre en place la configuration essentielle..
Si vous utilisez Gulp, ajoutez cette variable sous celle déjà présente dans le fichier:
var myplugin = require ('postcss-myplugin');Maintenant, ajoutez le nouveau nom de variable dans votre processeurs tableau:
processeurs var = [myplugin];
Faites un test rapide pour vérifier que tout fonctionne en exécutant la commande gulp css et vérifier qu'un nouveau fichier “style.css” est apparu dans le dossier “dest” de votre projet.
Si vous utilisez Grunt, mettez à jour le processeurs objet, qui est imbriqué sous le options objet, à ce qui suit:
processeurs: [require ('postcss-myplugin') ()]Faites un test rapide pour vérifier que tout fonctionne en exécutant la commande grunt postcss et vérifier qu'un nouveau fichier “style.css” est apparu dans le dossier “dest” de votre projet.
Avant de commencer à ajouter du code de traitement à notre plugin, nous allons ajouter du code de test à notre feuille de style sur laquelle le plugin peut fonctionner..
Ajoutez ce CSS à votre fichier “src / style.css”:
h1 font-family: "Open Sans", fontstack ("Arial"); En ce moment, parce que notre plugin ne fait rien encore, si vous compilez votre CSS, vous verrez exactement le même code copié directement dans le fichier «style.css» de votre dossier «dest»..
Maintenant, nous voulons commencer à scanner le CSS de notre fichier afin de trouver toutes les occurrences de fontstack () et les traiter. Pour commencer, ajoutez le code suivant après le options = options || ; ligne:
css.walkRules (fonction (règle) règle.walkDecls (fonction (déclin, i) ););
Utiliser walkRules () dans la première ligne parcourt toutes les règles de votre CSS; une règle est essentiellement votre sélecteur et les styles que vous avez définis entre ses accolades. Dans notre test CSS une règle serait:
h1 font-family: "Open Sans", fontstack ("Arial"); Ensuite, dans chaque règle, walkDecls () parcourt chaque déclaration; une déclaration est essentiellement chaque ligne du style. Dans le CSS ci-dessus, une déclaration serait:
famille de polices: "Open Sans", fontstack ("Arial");fontstack () La syntaxe est utiliséeComme nous parcourons chaque déclaration à l'aide du code que nous venons d'ajouter, la déclaration actuelle est représentée par décl, ce qui nous donne accès à la fois à la propriété de la déclaration et à sa valeur via décl.prop et décl.valeur respectivement.
Avec notre exemple CSS, décl.prop nous donnerait famille de polices et décl.valeur nous donnerait "Open Sans", fontstack ("Arial").
Nous voulons vérifier chaque décl.valeur dans notre feuille de style pour voir si elle contient la chaîne fontstack (. Si tel est le cas, nous savons que quelqu'un essaie d'utiliser notre plugin pour ajouter une pile de polices à leur code CSS..
À l'intérieur de walkDecl () boucle, ajouter:
var value = decl.value; if (value.indexOf ('fontstack (')!! == -1) console.log ("found fontstack");D'abord nous prenons décl.valeur et le stocker dans la variable valeur. Tout changement à décl.valeur sera envoyé dans la feuille de style compilée; nous stockons son contenu dans la variable valeur afin que nous puissions jouer avec.
Ensuite, nous utilisons la méthode indexOf () pour rechercher notre nouveau valeur variable pour la chaîne fontstack (. S'il est trouvé, nous enregistrons «found Fontstack» sur la console afin que nous puissions vérifier si tout fonctionne jusqu'à présent..
Courir gulp css ou grunt postcss et vous devriez voir "found fontstack" sortie une fois dans votre terminal / invite de commande.
Maintenant que notre plugin est capable de localiser des instances de fontstack () dans notre feuille de style, nous pouvons nous préparer à convertir cette instance en une pile de polices, c’est-à-dire une liste de noms de polices. Mais avant de pouvoir le faire, nous devons d’abord définir ces piles de polices..
En haut de votre fichier, sous le nom existant postcss variable, créer une variable nommée fontstacks_config. Nous allons transformer cette variable en un objet contenant des paires clé-valeur.
Pour chaque entrée dans l'objet, la clé doit être la première police de la pile de polices, par exemple. 'Arial'. Ce sera la chaîne qu'un utilisateur passe pour spécifier la pile de polices qu'il souhaite utiliser, par exemple. fontstack ("Arial") ou fontstack ("Times New Roman").
La valeur de chaque paire doit être une chaîne de la liste complète des polices contenues dans la pile de polices, par exemple. "Arial," Helvetica Neue ", Helvetica, sans serif".
Ajoutez deux entrées à votre fontstacks_config object, l'un pour "Arial" et l'autre pour "Times New Roman", à l'aide des piles de polices fournies par CSS Font Stack.
Votre fontstacks_config variable devrait ressembler à ceci:
// Piles de polices de http://www.cssfontstack.com/ var fontstacks_config = 'Arial': 'Arial, "Helvetica Neue", Helvetica, sans serif', 'Times New Roman': 'TimesNewRoman, "Times New Roman ", Times, Baskerville, Géorgie, serif '
La première chose à faire lorsque nous trouvons un exemple de fontstack () utilisé est de déterminer quelle pile de polices l’utilisateur a demandée, c’est-à-dire quelle chaîne ils ont placée entre les crochets.
Par exemple, si un utilisateur a entré fontstack ("Arial") nous voudrions extraire la chaîne Arial. La raison pour laquelle nous souhaitons cette chaîne est qu’elle nous donnera une clé que nous pouvons utiliser pour rechercher la pile de polices correspondante dans notre répertoire. fontstacks_config objet.
Ajoutez ce code immédiatement à l'intérieur du si déclaration que nous avons ajoutée plus tôt, remplaçant le console.log ("pile de polices trouvée"); ligne:
// Récupère le nom de la pile de polices demandée en faisant correspondre la chaîne entre crochets de fontstack (). // Ensuite, remplacez les guillemets simples ou doubles. var fontstack_requested = value.match (/ \ (([^)] +) \) /) [1] .replace (/ ["'] / g," ");
Nous effectuons ici deux étapes pour extraire le nom de la pile de polices sous forme de chaîne.
Premièrement, nous utilisons la méthode match () pour trouver la chaîne entre les crochets de notre valeur. Cela nous donnerait une chaîne comme "Arial" ou 'Arial'.
Nous ne voulons que le nom de la police, sans guillemets simples ni doubles. Nous utilisons ensuite la méthode replace () pour les éliminer de la chaîne, nous laissant ainsi une chaîne sans guillemets telle que Arial.
Cette chaîne est stockée dans le fontstack_requested variable.
Nous allons utiliser notre nouvellement créé fontstack_requested variable pour rechercher une pile de polices de notre fontstack_config option. La partie délicate est que les clés de cet objet sont sensibles à la casse, donc si nous essayons de rechercher le Arial entrée avec la clé arial ça va échouer.
Pour résoudre ce problème, nous allons "Title Case" la chaîne, donc par exemple fois nouveau roman serait converti en Times New Roman. Nous allons le faire via une courte fonction personnalisée.
Sous votre fontstacks_config variable ajouter ceci toTitleCase () une fonction:
// Cette fonction est créditée à l'adresse http://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript/196991#196991, fonction toTitleCase (str) return str.replace (/ \ w \ S * / g, fonction (txt) retourne txt.charAt (0) .toUpperCase () + txt.substr (1) .toLowerCase (););
Maintenant, nous allons appliquer cette fonction à notre fontstack_requested variable. Sous la ligne où vous avez créé le fontstack_requested variable, ajoutez ce code:
// Title met les mots dans le nom de la police au cas où l'utilisateur ne le ferait pas lui-même fontstack_requested = toTitleCase (fontstack_requested);
Cela passe le fontstack_requested variable à travers notre toTitleCase () fonction, mise à jour de sa valeur.
Maintenant nous avons notre fonstack_requested variable correctement définie, nous pouvons l’utiliser pour rechercher la pile de polices correspondante. Après la ligne que vous venez d'ajouter, insérez ce code:
// Recherche de la pile de polices demandée dans l'objet fontstack_config var fontstack = fontstacks_config [fontstack_requested];
Cela trouve la valeur dans le fontstacks_config objet qui a une clé correspondant à la chaîne contenue dans notre fontstack_requested variable.
Par exemple, si fontstack_requested contient la chaîne Arial, l'entrée dans fontstacks_config avec la clé Arial sera trouvé et la valeur "Arial," Helvetica Neue ", Helvetica, sans serif" sera retourné.
Cette valeur renvoyée est ensuite stockée dans la variable fontstack.
Nous avons maintenant récupéré notre chaîne de pile de polices et nous sommes prêts à l'insérer dans le CSS, mais il reste encore une chose à faire. Vous vous souviendrez que dans notre code de test, nous avions inclus la police «Open Sans» comme police préférée, la pile de polices jouant le rôle de solution de secours. Nous devons également extraire ce nom de police de la valeur pour pouvoir l'ajouter au CSS que nous avons inséré dans la feuille de style traitée..
Sous le fontstack ligne variable, ajoutez ce code:
// Recherche et stocke tous les noms de police susceptibles de figurer déjà dans la valeur, avant l'appel de fontstack () var first_font = value.substr (0, value.indexOf ('fontstack ('));Ce code utilise la méthode substr () pour rechercher un contenu quelconque entre le début de notre valeur, (représenté par 0), et notre fontstack () instance (localisée à l'aide de la méthode indexOf ()). Tout le contenu trouvé est stocké dans la variable first_font.
Par exemple, dans notre code de test valeur est égal à "Open Sans", fontstack ("Arial"), alors le first_font variable sera définie comme "Open Sans", .
Nous avons maintenant toutes les pièces nécessaires pour créer une nouvelle valeur permettant de remplacer la valeur initiale de notre code de test: "Open Sans", fontstack ("Arial").
Après le dernier code que vous avez ajouté, insérez ce code:
// Créez la nouvelle valeur pour cette règle en combinant les variables first_font et fontstack var new_value = first_font + fontstack;
Ici, nous combinons nos first_font et fontstack variables dans une seule chaîne et le stocker dans la variable nouvelle valeur.
Dans notre code de test, cela voudrait dire combiner "Open Sans", et Arial, "Helvetica Neue", Helvetica, sans serif.
Notre nouvelle valeur variable serait alors tenir la chaîne "Open Sans", "Arial," Helvetica Neue ", Helvetica, sans serif".
Cela nous donne maintenant la valeur complète que nous voulons ajouter à la feuille de style traitée afin que:
famille de polices: "Open Sans", fontstack ("Arial"); … Se transforme en:
famille de polices: "Open Sans", "Arial," Helvetica Neue ", Helvetica, sans serif";
Maintenant que nous avons notre nouvelle valeur prête à être insérée dans la feuille de style traitée, tout ce que nous avons à faire est de mettre à jour décl.valeur. PostCSS s'occupe du reste, ajoutant la nouvelle valeur dans le CSS traité pour nous.
Ajoutez ce code après la dernière ligne que vous avez ajoutée:
// renvoie la nouvelle valeur dans la feuille de style decl.value = new_value;
Cela définit décl.valeur pour égaler le contenu de notre nouvelle valeur variable.
Votre plugin est maintenant prêt à partir. Faites un tourbillon en compilant votre feuille de style avec gulp css ou grunt postcss (avec votre terminal pointé sur votre dossier de projet, pas sur votre dossier de plugin).
Votre fichier «dest / style.css» devrait maintenant afficher une pile de polices complète:
h1 font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans serif;
Vous voudrez peut-être autoriser les utilisateurs de votre plugin à définir leurs propres options, de la même manière que vous aviez défini des options comme vous avez utilisé des plugins PostCSS au cours de cette série..
Nous voulons que les utilisateurs puissent définir une fontstacks option, soit en ajoutant des piles de polices supplémentaires, soit en redéfinissant les piles de polices existantes, par exemple:
piles de piles: 'Extra Stack': '"Extra Stack", "Moar Fonts", Extra, serif', "Arial": "Arial," Comic Sans "'
Remarque: cette étape est facultative. Si vous le souhaitez, vous pouvez le sauter et votre plugin fonctionnera parfaitement, sans aucune configuration définie par l'utilisateur..
Nous avons déjà la partie la plus essentielle de l'activation des options de définition d'utilisateur dans notre plugin. Dans notre module.exports vous remarquerez une ligne options l'argument est passé.
module.exports = postcss.plugin ('myplugin', fonction (options) Nous recevrons toutes les options utilisateur définies par l'utilisateur.
Vous verrez également que nous avons la ligne:
options = options || ;
Ceci vérifie si options a n'importe quelle valeur, et si ce n'est pas le cas, le définit sur un objet vide. Cela garantit que nous n'obtenons aucune erreur lorsque nous commençons à travailler avec options cela pourrait venir de ce étant indéfini.
Pour commencer, nous allons installer Underscore.js dans notre projet, car nous utiliserons sa méthode pratique extend (). Exécutez cette commande pour l'installer dans le plugin que vous construisez:
npm installer underscore --save
Maintenant, chargez Underscore dans votre plugin en ajoutant un _ variable pour l'exiger, sous votre existant postcss variable:
var postcss = require ('postcss'); var _ = require ('underscore');Suivant ce que nous allons faire est de prendre la fontstacks_config objet que nous avons déjà créé dans le plugin et que nous étendons avec toutes les piles de polices que l'utilisateur a définies via la configuration de leurs options.
Ajoutez ce code directement sous le options = options || ; ligne:
// Extension de l'option fontstacks_config par défaut avec les piles de polices personnalisées définies dans les options du plugin fontstacks_config = _.extend (fontstacks_config, options.fontstacks);
le fontstacks l'option qui a été définie par l'utilisateur est représentée par options.fontstacks.
En utilisant Underscore étendre() méthode, toutes les piles de polices options.fontstacks sont ajoutés à ceux déjà en fontstacks_config. Partout où il y a une clé correspondante, la valeur de options.fontstacks va écraser celui de fontstacks_config. Cela permet aux utilisateurs de redéfinir les piles de polices existantes..
Dans votre Gulpfile ou Gruntfile, définissez un fontstacks et passez une nouvelle pile de polices et redéfinissez une pile existante:
/ * Gulpfile * / var processors = [myplugin (fontstacks: 'Extra Stack': '"Extra Stack", "Fontes Moar", Extra, empattement', 'Arial': 'Arial, "Comic Sans"' )]; / * Gruntfile * / processeurs: [require ('postcss-myplugin') (fontstacks: 'Extra Stack': '' Extra Stack ',' Polices de Moar ', Extra, serif', 'Arial': 'Arial, " Comic Sans"' ) ]Ajoutez maintenant du CSS supplémentaire à votre fichier «src / style.css» afin que nous puissions tester la nouvelle pile de polices que nous venons d’ajouter via nos options:
h2 font-family: "Droid Sans", fontstack ("Extra Stack"); Recompilez votre CSS et vous devriez voir que votre pile de polices 'Arial' a maintenant une sortie différente, et que votre pile de polices 'Extra Stack' a été sortie correctement:
h1 font-family: "Open Sans", Arial, "Comic Sans"; h2 font-family: "Droid Sans", "Extra Stack", "Moar Fonts", Extra, empattement;
C'est tout! Vous êtes tous fait Vous avez terminé votre premier plugin PostCSS.
Voici la chose entière sur GitHub si vous avez besoin de comparer votre code à celui-ci pour référence.
Vous venez de créer un plugin PostCSS complet et j'espère que vous aurez des idées sur d'autres plugins que vous aimeriez créer. Il y a peut-être une petite chose qui vous a toujours posé problème lors de la rédaction de CSS, et peut-être que vous pouvez maintenant proposer votre propre solution pour vous en débarrasser définitivement. Ou peut-être y a-t-il quelque chose de plus que vous pensez vraiment que CSS devrait avoir hors de la boîte, maintenant, vous pouvez l'ajouter vous-même!
Pour résumer ce que nous avons couvert:
Dans le cadre de la version 5.0 de PostCSS, Jed Mao a fourni un ensemble de définitions TypeScript qui peut grandement faciliter le développement de plug-ins en fournissant une complétion automatique et une documentation intégrée au fur et à mesure de la frappe..
Si vous vous lancez dans le développement de plug-in PostCSS, vous pourrez vraiment l'intégrer à votre flux de travail. Je ne suis moi-même pas une main TypScript dab, mais je vais quand même me lancer dans le codage, presque purement pour pouvoir exploiter cette fonctionnalité..
Si vous souhaitez essayer ceci, vous n'avez pas besoin d'être sous Windows ou d'utiliser Visual Studio, vous pouvez utiliser le code gratuit et open source Visual Studio, qui fonctionne sous Windows, Mac et Linux et est construit sur Electron. , le même shell qui alimente l'éditeur Atom.
Pour un exemple d'intégration de ces définitions TypeScript dans votre projet, consultez le plug-in postcss-font-pack. Créez-le et jouez dans Visual Studio Code pour voir comment fonctionne l'auto-complétion et la documentation en ligne..
Merci beaucoup d'avoir suivi cette série PostCSS Deep Dive. J'espère que vous avez aimé la lire autant que j'ai aimé la créer! Plus important encore, j'espère que vous avez la tête pleine d'idées sur la façon dont vous pouvez utiliser PostCSS pour qu'il fonctionne au quotidien dans le développement Web..
PostCSS est vraiment un nouvel ajout incroyable au monde frontal, car la façon dont il facilite les plugins ouvre des portes à des possibilités que nous n’avons jamais eues auparavant dans le développement CSS. La gamme de plugins disponibles actuellement est déjà suffisante pour remodeler complètement les flux de travail quotidiens d'une personne, et ce n'est que ce qui a été créé en quelques années..
Je suggérerais que PostCSS n’ait pas encore atteint son apogée et que, comme la plupart des développeurs de CSS le savent déjà, sinon jure, nous le verrons vraiment entrer dans sa lancée. Et avec l'arrivée de plus en plus de développeurs front-end, nous verrons plus de contributions à l'écosystème de plugins, en ajoutant de nouveaux plugins et en aidant à construire ceux qui existent déjà..
!
