Site icon Blog ARC Optimizer

Une introduction à PostCSS –

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 @extend 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 est pas 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 PostCSS Plugin de préfixe automatique qui s’ajoute automatiquement -webkit, -mozet -ms pré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.

Environ 350 plugins sont disponibleset la plupart effectuent une seule tâche telle que inlining @import déclarations, simplifier calc() les fonctions, gestion des éléments d’image, peluche de syntaxe, minimiser, et plus. Une recherche de plug-in plus conviviale est disponible sur PostCSS catalogue de plugins.

Les avantages de PostCSS incluent :

  • Vous commencez avec le CSS standard. PostCSS est à CSS ce que Babel 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écent inset biens retour dans top, bottom, leftet right Propriétés. Au fil du temps, vous pourriez abandonner ce processus à mesure que de plus en plus de navigateurs prennent en charge inset.

    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 soutenir partiels et imbrication mais 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 que Espagnol et russe.

    Dans le cas peu probable où vous ne trouveriez pas ce dont vous avez besoin, vous pouvez écrivez votre propre Plug-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écessite Node.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 de webpack, 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 :

npm install -g postcss-cli

Assurez-vous qu’il fonctionne en saisissant ceci :

postcss --help

Installation de votre premier plugin PostCSS

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

npm install -g postcss-import

Pour tester ce plugin, ouvrez ou créez un nouveau dossier de projet tel que cssprojectpuis créez un src sous-dossier pour vos fichiers source. Créer un main.css fichier pour charger tous les partiels :


@import '_reset';
@import '_elements';

Créez ensuite un _reset.css fichier dans le même dossier :


* {
  padding: 0;
  margin: 0;
}

Suivez ceci avec un _elements.css dossier:


body {
  font-family: sans-serif;
}

label {
  user-select: none;
}

Exécutez PostCSS à partir du dossier racine du projet en transmettant le fichier CSS d’entrée, une liste de plugins à --useEt un --output nom 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 nouveau styles.css fichier à la racine du projet :



* {
  padding: 0;
  margin: 0;
}

body {
  font-family: sans-serif;
}
label {
  user-select: none;
}
/* sourceMappingURL=data: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’original src fichier et ligne. Par exemple, visionner <body> les styles mettront en évidence src/_elements.css ligne 2 plutôt que styles.css ligne 8.

Vous pouvez créer une carte source externe en ajoutant un --map (ou alors -m) passer à la postcss 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.

Vous pouvez supprimer la carte source avec --no-map. Utilisez toujours cette option lors de la sortie de fichiers CSS pour le déploiement en production.

Installer et utiliser le plugin AutoPrefixer

Le Préfixe automatique plugin est souvent la première rencontre d’un développeur avec PostCSS. Il ajoute des préfixes de fournisseur en fonction de l’utilisation du navigateur et des règles définies à caniuse.com. Les préfixes de fournisseur sont moins utilisés dans les navigateurs modernes qui cachent des fonctionnalités expérimentales derrière des drapeaux. Cependant, il existe encore des propriétés telles que user-select qui nécessitent -webkit-, -moz-et -ms- préfixes.

Installez le plugin globalement avec ceci :

npm install -g autoprefixer

Ensuite, référencez-le comme un autre --use option sur votre postcss commande:

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

Examinez le label déclaration de la ligne 11 de styles.css pour afficher les propriétés préfixées par le fournisseur :

label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

AutoPrefixer utilise le liste des navigateurs module pour déterminer les préfixes de navigateur à ajouter. La valeur par défaut est :

  • > 0.5%: un navigateur avec au moins 0,5 % de part de marché
  • last 2 versions: les deux dernières versions de ces navigateurs
  • Firefox ESR: incluant les versions de support étendu de Firefox
  • not dead: tout navigateur qui n’est pas discontinué

Vous pouvez modifier ces valeurs par défaut en créant un .browserslistrc dossier. Par example:

> 2%

Ou vous pouvez ajouter un "browserslist" tableau à package.json dans un projet Node.js. Par example:

"browserslist": [
   "> 2%"
]

Cibler les navigateurs avec une part de marché de 2 % ou plus ne nécessite qu’un -webkit- préfixe dans Safari :

label {
  -webkit-user-select: none;
          user-select: none;
}

Minifier le CSS avec cssnano

cssnano réduit le CSS en supprimant les espaces, les commentaires et autres caractères inutiles. Les résultats varient, mais vous pouvez vous attendre à une réduction de 30 % des fichiers que vous pouvez déployer sur des serveurs de production pour de meilleures performances des pages Web.

Installez cssnano globalement :

npm install -g cssnano

Ajoutez-le ensuite à votre postcss commande. Nous inclurons également --no-map pour désactiver la carte source :

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

Cela réduit le fichier CSS à 97 caractères :

*{margin:0;padding:0}body{font-family:sans-serif}label{-webkit-user-select:none;user-select:none}

Construire automatiquement lorsque les fichiers source changent

Le PostCSS --watch L’option construit automatiquement votre fichier CSS lorsque l’un des fichiers source change. Vous pouvez également ajouter le --verbose commutateur qui signale quand une construction se produit :

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

Votre terminal affichera Waiting for file changes. Apportez une modification à n’importe quel fichier et styles.css est reconstruit. PostCSS signalera également tout problème tel que les erreurs de syntaxe.

Pour terminer, appuyez sur Ctrl | Commande + C dans l’aérogare.

Créer un fichier de configuration PostCSS

Le postcss La commande deviendra longue et fastidieuse à mesure que vous ajouterez d’autres plugins et options. Vous pouvez créer un fichier de configuration JavaScript qui définit toutes les options et peut logiquement déterminer s’il s’exécute dans un environnement de développement ou de production.

Créez un fichier de configuration nommé postcss.config.cjs à la racine de votre dossier de projet. Notez également ce qui suit :

  • vous pouvez placer le fichier dans un autre dossier, mais vous devrez spécifier --config <dir> lors de la course postcss
  • vous pouvez utiliser postcss.config.js comme nom de fichier, mais PostCSS peut échouer dans les projets Node.js qui ont "type": "module" s’installer package.json

Ajoutez le code suivant à postcss.config.cjs:


module.exports = (cfg) => {

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

  return {

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

  };

};

PostCSS passe un cfg objet qui contient les options de la ligne de commande. Par example:

{
  cwd: '/home/yourname/cssproject',
  env: undefined,
  options: {
    map: { inline: true },
    parser: undefined,
    syntax: undefined,
    stringifier: undefined
  },
  file: {
    dirname: '/home/yourname/cssproject/src',
    basename: 'main.css',
    extname: '.css'
  }
}

Le module doit renvoyer un objet avec des propriétés facultatives :

  • map: le réglage de la carte source
  • parser: s’il faut utiliser un analyseur de syntaxe non-CSS (comme le scss brancher)
  • plugins: un tableau de plugins et de configurations à traiter dans l’ordre spécifié

Le code ci-dessus détecte si le postcss la commande a un --env option. Il s’agit d’un raccourci pour régler le NODE_ENV variables d’environnement. Pour compiler CSS en mode développement, exécutez postcss avec --env development et, éventuellement, définissez --watch --verbose. Cela crée une carte source en ligne et ne minimise pas la sortie :

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

Pour exécuter en mode production et compiler le CSS minifié sans carte source, utilisez ceci :

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

Idéalement, vous pouvez les exécuter en tant que terminal ou npm scripts pour réduire davantage l’effort de frappe.

Progrès post-CSS

Vous connaissez maintenant les bases de PostCSS. L’amélioration de la fonctionnalité consiste à ajouter et à configurer d’autres plugins. Investissez du temps et vous aurez bientôt un flux de travail que vous pourrez adapter à n’importe quel projet Web.

Le tutoriel sur l’utilisation de PostCSS en tant que alternative configurable à Sass fournit plus d’exemples de configuration et d’options de plug-in.

Autres liens :

Le meilleur outil 2023 pour ta croissance Instagram !



Source link
Quitter la version mobile