Pleeease, mon post-processeur CSS

La semaine dernière, je vous parlais d’optimisation de workflow front-end avec mon task runner préféré Brunch. Aujourd’hui, je vous présente Pleeease, un post-processeur CSS maison. Apprenez à l’intégrer dans votre workflow pour traiter votre CSS de manière optimale.

Pourquoi Pleeease?

Si vous n’avez encore jamais entendu parler de POST-processeurs, je vous conseille mon article d’introduction, celui de Raphaël Goetter, ou encore celui sur putaindecode.fr. Oui, c’est la mode apparemment!

Pleeease est donc un post-processeur CSS qui s’occupe de la plupart des tâches pour vous. Pour le moment, Pleeease ajoute les préfixes CSS, le support des variables, un fallback pour l’unité rem et les pseudo-elements. Il regroupe également les media-queries identiques et minifie votre code.

Pleeease n’est pas un nouvel outil à part entière. Il ne fait que simplifier le traitement de CSS en combinant plusieurs post-processeurs autonomes. Sans doute utilisez-vous déjà certains de ces post-processeurs d’ailleurs.

Pleeease est basé sur PostCSS pour le parsage de CSS et chaque tâche s’insère dans le pipeline pour traiter le CSS de manière unique.

Les tâches effectuées

Voici les différentes tâches effectuées par Pleeease:

Ajoute les préfixes vendeurs

Utilise le post-processeur Autoprefixer.

Votre code est:

.element {
  display: flex;
  flex-direction: column;
  background: linear-gradient(red, blue);
}

Pleeease crée le nouveau fichier:

.element {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
  background: -webkit-linear-gradient(red, blue);
  background: linear-gradient(red, blue);
}

Regroupe les media-queries similaires

Utilise le post-processeur MQ Packer.

Votre code est:

@media (max-width: 36em) {
  .element {
    color: red;
  }
}

@media (max-width: 36em) {
  .test {
    color: blue;
  }
}

Pleeease crée le nouveau fichier:

@media (max-width: 36em) {
  .element {
    color: red;
  }
  .test {
    color: blue;
  }
}

Et cela, même si les media-queries sont présentes dans plusieurs fichiers.

Ajoute un fallback pour les variables CSS

Utilise le post-processeur postcss-vars que j'ai créé pour l'occasion.

Votre code est:

:root {
  --color-primary: blue;
}
.element {
  color: var(--color-primary);
}

Pleeease crée le nouveau fichier:

:root {
  --color-primary: blue;
}
.element {
  color: blue;
}

Ajoute un fallback pour l’unité rem

Utilise le post-processeur Pixrem.

Votre code est:

.element {
  font-size: 2rem;
}

Pleeease crée le nouveau fichier:

.element {
  font-size: 32px;
  font-size: 2rem;
}

Ajoute un fallback pour les pseudo-elements CSS3

Intégré à Pleeease.

Votre code est:

.element::after {
  content: '';
}

Pleeease crée le nouveau fichier:

.element:after {
  content: '';
}

Minifie le résultat

Utilise le post-processeur CSS Wring.

Certaines de ces tâches sont configurables, voir toutes les options disponibles.

Utilisez Pleeease en mode autonome

La manière la plus simple d’utiliser Pleeease est en mode autonome, via la ligne de commande. Cette méthode est faite pour vous si vous n’utilisez pas de task runner ou si vous travaillez sur un petit projet.

Tout d’abord, vous aurez besoin d’installer Node.js qui est couramment livré avec son gestionnaire de modules npm. Ensuite, lancez l’installation de Pleeease de manière globale au système.

$ npm install -g pleeease

Et c’est tout!

Avant de commencer à l’utiliser, sachez que Pleeease ne modifiera pas votre code. Il se contentera de créer un nouveau fichier avec le CSS final. Vous conserverez donc votre fichier de travail propre, et c’est bien là le but premier.

Pleeease a deux commandes identiques: compile et watch. La différence, c’est que watch surveille vos fichiers et relance de manière automatique la compilation dès qu’une modification a été détectée sur vos fichiers. compile est une commande one-shot. Les deux commandes s’utilisent donc de manière identique. Par exemple, pour compiler le fichier "styles.css" vers le fichier "styles.fixed.css", lancez la commande:

$ pleeease compile styles.css to styles.fixed.css

Ou, si vous souhaitez activer la surveillance du fichier:

$ pleeease watch styles.css to styles.fixed.css

C’est aussi simple que ça!

Il est bien entendu possible de compiler plusieurs fichiers à la fois. Ici, Pleeease compile "foo.css" et "bar.css" vers "baz.css"

$ pleeease foo.css bar.css to baz.css

Et même des dossiers complet:

$ pleeease compile css/ to public/css/app.min.css

Options par défaut

Pleeease est configuré par défaut de cette façon:

• fichier en entrée "*.css", donc tous les fichiers à la racine d’un projet
• fichier en sortie "app.min.css"

Cela signifie qu’il n’est pas utile de préciser ces noms de fichiers dans la commande. Ainsi:

$ pleeease compile

est identique à

$ pleeease compile *.css to app.min.css

De la même façon, voilà comment compiler tous les fichiers CSS présents dans le dossier styles/ vers le fichier "app.min.css". La commande to devient facultative.

$ pleeease compile styles/*.css

Fichier de configuration

Ces options par défaut peuvent êtres modifiées, en créant un fichier .pleeeaserc à la racine de votre projet. Ce fichier respecte la syntaxe JSON pour les différentes options. Par exemple:

{
    "input": ["foo.css", "bar.css"],
    "output": "baz.css"
}

• input est un tableau précisant les fichiers en entrée
• output est le chemin du fichier en sortie

Une fois votre fichier de configuration défini, il vous suffit de lancer compile ou watch sans arguments:

$ pleeease compile | watch

C’est également dans ce fichier que vous pouvez préciser quelles tâches doivent êtres effectuées ou non. Pour cela, voir les options complètes.

Utilisez Pleeease avec Brunch

Si vous utilisez Brunch, c’est encore plus simple de mettre en place Pleeease. Pour cela, il vous suffit de mettre dans votre package.json le plugin Brunch dédié:

{
    "dependencies": {
        "pleeease-brunch": "0.2.x"
    }
}

Ou de l’installer:

$ npm install --save pleeease

Si vous souhaitez modifier les tâches, utiliser la clé plugin dans votre fichier brunch-config.js ou brunch-config.coffee.

plugins:
    pleeease:
        autoprefixer: true
        minifier: true
        mqpacker: true
        fallbacks:
            variables: true
            rem: false
            pseudoElements: false

Toute votre configuration sur les fichiers se fait classiquement via Brunch.

Notez que Pleeease-brunch est un optimiseur, donc les actions ne seront effectuées qu’avec optimize: true dans votre config ou en utilisant l’environnement --production (qui est déjà configuré de cette façon)

Comme je vous aime bien, je vous ai même fait un squelette Brunch pour pouvoir tester plus rapidement.

Et avec votre workflow?

Si votre workflow est différent, vous trouverez sans doute votre bonheur avec Pleeease. Voici une utilisation basique, via Node:

var pleeease = require('pleeease'),
    fs       = require('fs');

var css = fs.readFileSync('app.css', 'utf8');

// define options here
var options = {};

var fixed = pleeease.process(css, options);

fs.writeFile('app.min.css', fixed, function (err) {
  if (err) {
    throw err;
  }
  console.log('File saved!');
});

La fonction process prend 2 arguments, le CSS et les options, et retourne le CSS final en chaine de caractères.

Et après?

Pleeease n’en est encore qu’à ses balbutiements, certainements remplis de bugs. J’attends vos retours et tests avec impatience. :)

Merci à @goetter pour les premiers tests.

#sharethelove