Syntaxe Postcss Erreurs en silence

Question

Donc, je suis en train de mettre en place un projet avec juste postcss et en abandonnant scss complètement. Une chose que je lutte avec est l'absence de tout rapport d'erreur s'il y a une défaillance de la syntaxe.

Ainsi, par exemple, je l'ai ajouter plugin precss et quand j'épelle une mauvaise variable:

$somevar: #000; 
.body{ 
    color:$oopsvar; 
} 

Il est évident que dans SCSS il jetterait une erreur et me dire $ oopsvar n'existe pas. Mais il ne fait qu'analyser et retourne:

.body{ 
    color:$oopsvar; 
} 

Ce qui n'est évidemment pas valide. J'ai ajouté postcss-reporter, postcss-devtools et j'ai même essayé de voir s'il y avait des règles dans stylelint qui pourraient montrer l'erreur, mais rien. Maintenant, je ne suis pas sûr si c'est juste un problème avec les plugins Comme precss ou quelque chose en général qui me manque avec postcss. Comment les autres déboguent-ils le postcss, ou les gens vérifient-ils simplement le navigateur?

Answer 1

J'ai donc fait une enquête et bavardé sur postcss gitter

Il est construit de manière d'afficher warnings et errors dans postcss, mais en raison de l'approche du plugin, il appartient aux créateurs de plug-ins individuels à mettre en œuvre. Le problème que j'avais avec precss qui n'est pas maintenu ainsi était le problème qu'ils n'affichaient aucun avertissement. Nous nous sommes déplacés plus vers cssnext qui est bien maintenu, bien que la syntaxe soit légèrement différente car elle utilise les variables css proposées plutôt que la syntaxe scss. Vous aurez également besoin de postcss-reporter pour obtenir les avertissements et les erreurs s'ils sont implémentés.

Answer 2

Si vous voulez trouver toutes les erreurs, vous devez utiliser linter. Stylelint sera un excellent choix (basé sur PostCSS).

PostCSS est utilisé dans de nombreux outils CSS. Certains de ces outils utilisent une syntaxe personnalisée. C'est pourquoi PostCSS peut analyser la syntaxe personnalisée ($somevar: #000; est analysée en tant que propriété $somevar).