Remove duplication feature

[raphaelgoetter]

En plus de combiner les MQ et minifier CSS en général, il pourrait être très intéressant de regrouper les règles identiques.

Par exemple :

/* layout.css */
.truc {
  width: 100%;
}
/* colors.css */
.truc {
  color: #184894;
}

Deviendrait :

/* build.css */
.truc {
  width: 100%;
  color: #184894;
}

Comme ce n'est pas anodin, il faudrait que ce soit une option non appliquée par défaut.

[7studio]

En attendant de mettre en place une solution viable dans Pleeease, tu peux regarder CSS Shrink qui fait ça très bien.

[raphaelgoetter]

@7studio Ah oui il est pas mal effectivement, mais pas parfait non plus :

body {
    color: red;
}

/* layout.css */
.truc {
  width: 100%;
}

/* colors.css */
.truc {
  color: #184894;
}

body {
    color: green;
}

va être compilé ainsi :

body{color:red}.truc{width:100%;color:#184894}body{color:green}

[7studio]

@raphaelgoetter Excuse moi pour cette mauvaise information (et ma mauvaise compréhension) :confused: CSS Shrink combine uniquement les choses similaires adjacentes (cf. : http://cssshrink.com/velocity/#53) :disappointed_relieved: Ça n'a plus grand intérêt finalement mais voici un début d'explication : https://github.com/stoyan/cssshrink/issues/7#issuecomment-47508577.

[iamvdo]

C'est effectivement pas évident dans tous les cas, et l'intérêt est somme toute limité (Gzip fait ça déjà très bien). Par contre, on se rapproche d'un linter qui créerait une sorte de feuille de route des bonnes pratiques / retours / optimisation à réaliser, plutôt qu'un outil 100% automatique. Est-ce que ce genre de retours seraient intéressant?

[raphaelgoetter]

Est-ce que ce genre de retours seraient intéressant?

Mouais, sans plus. (en ce qui me concerne, j'ai déjà des lint directement dans l'IDE)

[MoOx]

Ca me parait dangereux comme jeux. Un linter en complément à plus de sens que d'intégrer ça ici.

[iamvdo]

Il y a maintenant un module pour ça: https://www.npmjs.com/package/postcss-discard-duplicates Toujours pas fan, mais permet de tester les edge-case...