Une introduction à PostCSS

POSTCSS: Un puissant outil CSS au-delà des préprocesseurs

Cette introduction à PostCSS explore ses avantages par rapport aux préprocesseurs CSS traditionnels comme Sass et moins, comment il fonctionne, et les capacités de son vaste écosystème de plugin.

Faits saillants de la clé:

• POSTCSS, un outil basé sur Node.js, améliore les CS valides à l'aide des plugins. Il analyse CSS dans un arbre de syntaxe abstrait (AST), permettant une manipulation avant de générer la sortie finale. Il peut compléter les préprocesseurs comme Sass, moins ou stylet.
• POSTCSS offre des avantages, notamment l'analyse CSS standard, l'intégration des plugins personnalisables, la configuration spécifique au projet et la possibilité de créer des plugins personnalisés. De nombreux développeurs utilisent déjà le postCSS indirectement via des plugins tels que l'autopréfixer.
• Exiger Node.js, PostCSS s'intègre parfaitement aux outils de construction comme WebPack, Parcel et Gulp.js. Notez qu'au moins un plugin est nécessaire pour les fonctionnalités.
• PostCSS prend en charge les reconstructions automatiques sur les modifications des fichiers source à l'aide de l'option --watch. Un fichier de configuration JavaScript permet une gestion complète des options et des paramètres spécifiques à l'environnement (développement vs production).

PRÉPROCESSEURS: Forces et faiblesses

PRÉSPROCORSEURS tels que Sass, moins et Stylus ont introduit des fonctionnalités telles que la nidification, les variables et les mixins, améliorant la gestion du CSS. Alors que certaines de ces fonctionnalités deviennent des CSS natives, les préprocesseurs restent précieux pour les grands projets et le maintien de la cohérence du codage.

Cependant, les préprocesseurs ont des limites:

• Extensibilité limitée: Les préprocesseurs offrent un ensemble de fonctionnalités fixe, ce qui rend difficile d'étendre les fonctionnalités au-delà de leurs capacités intégrées. Les fonctions personnalisées peuvent être possibles, mais des tâches complexes (comme les SVG en inclinaison) restent en dehors de leur portée. L'application du style de codage est également difficile.
• Syntaxe non standard: Les préprocesseurs introduisent leur propre syntaxe, nécessitant une compilation avant l'interprétation du navigateur. Cela crée des problèmes de dépendance et nécessite des mises à jour de code si le préprocesseur change ou devient indisponible.

POSTCSS offre une alternative convaincante.

Comprendre PostCSS

POSTCSS n'est pas un préprocesseur; C'est un transformateur CSS. Il traite CSS valide, en l'améliorant via des plugins. Même les utilisateurs SASS / moins incorporent souvent PostCSS après la compilation initiale. AutopRefixer, un plugin PostCSS commun, ajoute automatiquement les préfixes des fournisseurs.

postcss lui-même est passif; Il analyse CSS dans un AST. Les plugins traitent cette AST, modifiant les propriétés. POSTCSS régénère ensuite le CSS de l'AST modifié

Avec environ 350 plugins disponibles, couvrant des tâches telles que @import manutention, calc() simplification, traitement des actifs d'image, libellé et minification, PostCSS offre une flexibilité étendue. Une recherche de plugin conviviale est accessible via le catalogue des plugins PostCSS.

Les avantages PostCSS incluent:

• CSS standard: POSTCSS fonctionne avec CSS standard, offrant une compatibilité vers l'arrière. Il peut transformer des propriétés plus récentes à des équivalents plus anciens, éliminant le besoin de ce processus à mesure que le support du navigateur s'améliore. Bien que les plugins puissent gérer la syntaxe de type préprocesseur, ce n'est pas obligatoire.
• Fonctionnalité personnalisable: Utilisez uniquement les plugins et les fonctionnalités nécessaires. Cela permet un contrôle à grains fins sur le pipeline de traitement CSS.
• Configuration spécifique au projet: Configurer les plugins individuellement pour chaque projet, en s'adaptant à des exigences spécifiques.
• Développement des plugins personnalisés: Créer des plugins personnalisés en JavaScript pour étendre les capacités de PostCSS.
• Remplacement du préprocesseur potentiel: Si vous utilisez déjà des plugins comme AutopRefixer, PostCSS peut remplacer votre préprocesseur, rationalisant le flux de travail en une seule étape.

Installation et utilisation de postcss

PostCSS nécessite Node.js. Ce guide démontre l'installation et l'utilisation de la ligne de commande, bien que l'intégration avec des outils de construction soit également possible.

1. Installation globale:

   npm install -g postcss-cli

2. Vérifiez l'installation:

   postcss --help

3. Installation du plugin (PostCSS-Import):

   npm install -g postcss-import

Créez un exemple de projet (cssproject), avec un dossier src contenant des fichiers main.css, _reset.css et _elements.css (comme décrit dans le texte d'origine). Ensuite, exécutez PostCSS:

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

Cartes source, autopréfixer et minification

POSTCSS génère des cartes source en ligne par défaut. Utilisez --map pour les cartes externes et --no-map pour les désactiver (recommandée pour la production).

AutoPrefixer ajoute des préfixes du fournisseur:

npm install -g autoprefixer

Utilisez-le avec la commande postcss, avec postcss-import.

CSSNANO MINIFES CSS:

npm install -g cssnano

Incluez-le dans votre commande postcss et utilisez --no-map pour la production.

Builds et fichiers de configuration automatisés

Les options --watch et --verbose permettent des reconstructions automatiques sur les modifications de fichiers.

a postcss.config.cjs Fichier Streamlines Configuration:

// PostCSS configruation
module.exports = (cfg) => {

  const devMode = (cfg.env === 'development');

  return {

    map: devMode ? 'inline' : null,
    plugins: [
      require('postcss-import')(),
      require('autoprefixer')(),
      devMode ? null : require('cssnano')()
    ]

  };

};

Utiliser --env development pour le mode de développement et l'omettre pour la production.

Conclusion

POSTCSS offre une approche flexible et puissante du traitement CSS. En maîtrisant son système de plugin, vous pouvez créer un flux de travail hautement personnalisé et efficace pour tout projet Web. D'autres ressources sont fournies dans le texte d'origine. Les FAQ sont également incluses à la fin du texte d'origine.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!