Use Prettier to css and scss files

[JulioJu]

Overview of the issue

Actually some css and scss files have style coding problems. This cause style inconsistence.

I've found some errors on css files and scss files in React and Angular part.

Related issues

• pull fix React scss ident #7448 from @agaspardcilia or react: correct indentation of scss.ejs files #7449 with their issue [React] Inconsistence between .editorconfig and some scss files #7446 who show some css rules problems
• Pull: Run prettier on ts files using yeoman transform streams #7265 and its corresponding issue Prettier runs too late and causes conflicts during re-generation #7172 by @gmarziou who introduced the actual behaviour of Prettier
• issue: Level indentation issue during JHipster generation #7431 who debate about code indentation.

Suggest a Fix

1. As said @deepu105, we could use Prettier to resolve easly this problems. Majors problems are the indentation, and some rules likes space around ":" or space around ">" or carriage-return after ",". It's sometimes inconsistent. With Prettier, we could easy fix that, as @deepu105 says.
2. Make a PR to correct actual all (s)css.ejs problems (I could do that, it's easy). I work on a PR to fix that. We will have consistent (s)css.ejs if you accept that.

JHipster Version(s)

JHipster 5.0.0-beta.0

• Checking this box is mandatory (this is just to show you read everything)

[JulioJu]

@deepu105
In React, why css files have 4 spaces of indentation, and scss and ts(x) files have 2 spaces of indentation?

[jdubois]

Yes +1 from me, at least for correcting the issues "manually". Prettier support is less important, as we don't have a lot of CSS/SCSS, and as they are much, much easier to generate than Typescript or Java code.

[deepu105]

Yes go ahead and add a transformation stream for it

…

On Mon, 9 Apr 2018, 10:42 pm Julien Dubois, ***@***.***> wrote: Yes +1 from me, at least for correcting the issues "manually". Prettier support is less important, as we don't have a lot of CSS/SCSS, and as they are much, much easier to generate than Typescript or Java code. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7451 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABDlFzdI1lfBSdS-4STAcninDWaYjTb0ks5tm8eqgaJpZM4TM7bE> .

[JulioJu]

@deepu105
For React templates, for its css files, should we use 2 indents space as for scss and ts(x) ? Maybe it's better for code consistency?

[deepu105]

yes go with 2 Thanks & Regards, Deepu

…

On Tue, Apr 10, 2018 at 11:21 AM Julio ***@***.***> wrote: @deepu105 <https://github.com/deepu105> For React templates, for its css files, should we use 2 indents space as for scss and ts(x) ? Maybe it's better for code consistency? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#7451 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABDlF0l5mgyw77jACygSSaLbrFLZiE_rks5tnHmCgaJpZM4TM7bE> .