Une introduction à PostCSS –

Les préprocesseurs CSS sont populaires, mais ils présentent certains inconvénients. Dans cette introduction à PostCSS, nous explorerons les avantages de PostCSS, son fonctionnement et ce que sa vaste gamme de plugins peut réaliser.

La valeur et les limites des préprocesseurs

La plupart des développeurs CSS connaissent les préprocesseurs. Des outils tels que Sass, Less et Stylus ont introduit des concepts tels que les fichiers partiels, l'imbrication, les variables et les mixins. Certaines fonctionnalités apparaissent progressivement dans le CSS natif, mais un préprocesseur est toujours utile pour gérer de grandes bases de code et maintenir la cohérence du style et du codage.

Il peut être difficile d'imaginer la vie sans un préprocesseur CSS, mais il y a des inconvénients :

• Les préprocesseurs ne sont ni extensibles ni limitables . La plupart des préprocesseurs sont une boîte noire qui vous fournit un ensemble spécifique de fonctionnalités prises en charge. Il peut être possible d'écrire des fonctions personnalisées, mais les fonctionnalités au-delà de la portée de cet outil restent impossibles, comme l'intégration d'un SVG en tant qu'image d'arrière-plan.

  De même, vous ne pouvez pas empêcher les développeurs d'utiliser des options que vous préférez éviter, telles que@étendre ou nidification profonde. Le peluchage peut aider, mais cela n'empêchera pas le préprocesseur de compiler un fichier valide.

• Les préprocesseurs fournissent leur propre syntaxe . Le code du préprocesseur peut ressembler à CSS, mais aucun navigateur ne peut analyser le fichier de manière native. La syntaxe est différente et, si votre outil change ou n'est pas disponible, votre code nécessitera des mises à jour pour le rendre utilisable.

Les avantages l'emportent largement sur ces risques, mais il existe une alternative…

Qu'est-ce que PostCSS ?

PostCSS estpas un préprocesseur (bien qu'il puisse se comporter comme tel). C'est un outil Node.js qui prend du CSS valide et l'améliore. Même ceux qui utilisent Sass, Less ou Stylus exécutent souvent une étape PostCSS après la compilation CSS initiale. Vous avez peut-être rencontré le PostCSSAutoprefixer pluginqui s'ajoute automatiquement-webkit,-mozet-Mmepréfixes de fournisseur aux propriétés CSS qui en ont besoin.

Par lui-même, PostCSS ne fait rien. C'est un analyseur qui tokenise le code CSS pour créer un arbre de syntaxe abstraite. Un plugin peut traiter cet arbre et mettre à jour les propriétés en conséquence. Une fois que tous les plugins ont terminé leur travail, PostCSS reformate tout dans une chaîne et les sorties dans un fichier CSS.

Environ350 plugins sont disponibleset la plupart effectuent une seule tâche telle queinlining@importerdéclarations,simplifiercalcul()les fonctions,gestion des éléments d'image,peluche de syntaxe,minimiser , et plus. Une recherche de plug-in plus conviviale est disponible sur PostCSScatalogue de plugins.

Les avantages de PostCSS incluent :

• Vous commencez avec le CSS standard . PostCSS est à CSS ce queBabel est à JavaScript. Il peut prendre une feuille de style standard qui fonctionne dans les navigateurs récents et produire du CSS qui fonctionne partout – par exemple, transpiler le plus récentencartbiensretour dansHaut,bas,la gaucheetà droite Propriétés. Au fil du temps, vous pourriez abandonner ce processus à mesure que de plus en plus de navigateurs prennent en chargeencart.

  Certes, certains plugins vous permettent d'analyser une syntaxe de type préprocesseur qui n'est pas du CSS standard, mais vous n'êtes pas obligé de les utiliser.

• Utilisez les plugins et les fonctionnalités dont vous avez besoin . PostCSS est configurable et vous pouvez adopter les plugins dont vous avez besoin. Par exemple, vous pourriez soutenirpartielsetimbricationmais n'autorise pas les variables, boucles, mixins, cartes et autres fonctionnalités disponibles dans Sass.

• Fournir une configuration personnalisée pour chaque projet . Une configuration de projet individuel peut améliorer ou réduire l'ensemble de plugins utilisés ailleurs. Les options sont bien plus variées que n'importe quel préprocesseur.

• Écrivez vos propres plugins PostCSS . Une large gamme de plugins est disponible pour étendre la syntaxe, analyser les propriétés futures, ajouter des solutions de secours, optimiser le code, traiter les couleurs, les images, les polices et même écrire du CSS dans d'autres langages tels queEspagnoletrusse.

  Dans le cas peu probable où vous ne trouveriez pas ce dont vous avez besoin, vous pouvezécrivez votre proprePlug-in PostCSS en JavaScript.

• Vous utilisez peut-être déjà PostCSS . Vous pourrez peut-être supprimer vos dépendances de préprocesseur si vous exécutez déjà un plug-in PostCSS tel que AutoPrefixer. PostCSS n'est pas nécessairement plus rapide ou plus léger que l'utilisation d'un préprocesseur, mais il peut gérer tout le traitement CSS en une seule étape.

Installer PostCSS

PostCSS nécessiteNode.js , mais ce didacticiel montre comment installer et exécuter PostCSS à partir de n'importe quel dossier, même ceux qui ne sont pas des projets Node.js. Vous pouvez également utiliser PostCSS à partir dewebpack, Parcel, Gulp.js et autres outilsmais nous nous en tiendrons à la ligne de commande.

Installez PostCSS globalement sur votre système en exécutant ce qui suit :

au dessus du niveau de la mer installer-g postcss-cli

Assurez-vous qu'il fonctionne en saisissant ceci :

postcss --aide

Installation de votre premier plugin PostCSS

Vous aurez besoin d'au moins un plugin pour faire quoi que ce soit de pratique. Le PostCSSimporterplugin est une bonne option qui inline tout@importer déclarations et fusionne votre CSS en un seul fichier. Installez-le globalement comme ceci :

au dessus du niveau de la mer installer-g postcss-import

Pour tester ce plugin, ouvrez ou créez un nouveau dossier de projet tel quecssprojectpuis créez unsrc sous-dossier pour vos fichiers source. Créer unmain.cssfichier pour charger tous les partiels :

@importer '_réinitialiser';
@importer '_éléments';

Créez ensuite un_reset.cssfichier dans le même dossier :

* {
  rembourrage: 0;
  marge: 0;
}

Suivez ceci avec un_elements.cssdossier:

corps {
  famille de polices:sans empattement;
}

étiqueter {
  sélection de l'utilisateur:rien;
}

Exécutez PostCSS à partir du dossier racine du projet en transmettant le fichier CSS d'entrée, une liste de plugins à--utiliserEt un--productionnom de fichier:

postcss ./src/main.css --use postcss-import --output ./styles.css

Si vous n'avez pas d'erreurs, le code suivant sera envoyé à un nouveaustyles.cssfichier à la racine du projet :

* {
  rembourrage: 0;
  marge: 0;
}

corps {
  famille de polices:sans empattement;
}
étiqueter {
  sélection de l'utilisateur:rien;
}/* sourceMappingURL=Les données:application/json;base64,...

Notez que PostCSS peut générer des fichiers CSS n'importe où, mais le dossier de sortie doit exister ; il ne créera pas la structure des dossiers pour vous.

Activation et désactivation des cartes source

Une carte source en ligne est sortie par défaut. Lorsque le fichier CSS compilé est utilisé dans une page HTML, l'examiner dans les outils de développement du navigateur affichera l'originalsrc fichier et ligne. Par exemple, visionner les styles mettront en évidencesrc/_elements.cssligne 2 plutôt questyles.cssligne 8.

Vous pouvez créer une carte source externe en ajoutant un--carte(ou alors-m) passer à lapostcss commande. Il y a peu d'avantages autres que le fichier CSS est plus propre et le navigateur n'a pas besoin de charger la carte source à moins que les outils de développement ne soient ouverts.

au dessus du niveau de la mer installer-g autoprefixer

postcss ./src/main.css --use postcss-import --use autoprefixer --output ./styles.css

étiqueter {
  -webkit-user-select:rien;
     -moz-user-select:rien;
      -ms-user-select:rien;
          sélection de l'utilisateur:rien;
}

> 2%

"liste des navigateurs": [
   "> 2%"
]

étiqueter {
  -webkit-user-select:rien;
          sélection de l'utilisateur:rien;
}

au dessus du niveau de la mer installer-g cssnano

postcss ./src/main.css --use postcss-import --use autoprefixer --use cssnano --no-map --output ./styles.css

*{marge:0;rembourrage:0}corps{famille de polices:sans empattement}étiqueter{-webkit-user-select:rien;sélection de l'utilisateur:rien}

postcss ./src/main.css --use postcss-import --use autoprefixer --use cssnano --no-map --output ./styles.css --watch --verbose

module.exportations = (cfg) => {

  constantedevMode= (cfg.env === 'développement');

  retourner {carte:devMode? 'en ligne' : nul,plugins: [
      exiger('importation postcss')(),
      exiger('autoprefixer')(),devMode? nul : exiger('cssnano')()
    ]

  };

};

{CWD: '/home/votrenom/cssproject',env: indéfini,choix: {carte: {en ligne: vrai },analyseur: indéfini,syntaxe: indéfini,stringifier: indéfini
  },dossier: {dirname: '/home/votrenom/cssproject/src',nom de base: 'main.css',nom_ext: '.css'
  }
}

postcss ./src/main.css --output ./styles.css --env development --watch --verbose

postcss ./src/main.css --output ./styles.css