-
Notifications
You must be signed in to change notification settings - Fork 321
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Format Sass stylesheets using Prettier #3799
Conversation
c773460
to
fcbd047
Compare
package.json
Outdated
"stylelint": "^14.16.1", | ||
"stylelint-config-gds": "^0.3.0", | ||
"stylelint": "^15.7.0", | ||
"stylelint-config-gds": "github:alphagov/stylelint-config-gds#stylelint-15", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Installing from GitHub branch until this PR is released:
Seems to look good, but I'll highlight some not-too-pretty examples: @include govuk-responsive-margin(
6,
"bottom",
$adjustment: $button-shadow-size
); // s2
padding: (govuk-spacing(2) - $govuk-border-width-form-element)
govuk-spacing(2)
(
govuk-spacing(2) - $govuk-border-width-form-element -
($button-shadow-size / 2)
); // s1 .govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(
.govuk-fieldset__legend--l
):not(.govuk-fieldset__legend--xl)
+ .govuk-hint {
margin-bottom: govuk-spacing(2);
} Update: Prettier line length at 120 characters is better, plus some manual intervention in ccaf200 🤷♂️ |
fcbd047
to
ccaf200
Compare
ccaf200
to
6699e8b
Compare
6699e8b
to
4bd960f
Compare
4bd960f
to
73b7577
Compare
73b7577
to
2e7d51d
Compare
2e7d51d
to
104af60
Compare
On my side, pretty happy with a move to Prettier for the formatting, especially as we can format pre-commit. Would be keen to use it for formatting JS as well, and possibly Nunjucks so we’re consistent all across. I think the gain from not having to think about formatting anymore outweighs the couple of places where a manual formatting may yield something a little less surprising or preserve some alignment. A wider line width doesn't sound bad either, especially with selectors that can quickly get quite long so it sounds fine to bump it up. |
104af60
to
f48d1f6
Compare
+1 for having Prettier deal with JS and Sass formatting automagically. Having tried using it for Nunjucks however, there seem to be few options available that work and fewer still that work well. There are some Prettier plugins for similar languages like Jinja and Twig that also work when applied to Nunjucks files, but they're often hardcoded with the stylistic preferences of the authors and trip over in places where the control structures are slightly different. If we wanna make our own Prettier plugin for Nunjucks then I think plenty of people would appreciate that, though! 😋 Edit: This is the package I've used in the past for reference's sake. |
f48d1f6
to
d07faac
Compare
8b941d1
to
16b86cd
Compare
d9ca481
to
ba53eb3
Compare
ba53eb3
to
486cbe4
Compare
Thanks @romaricpascal As discussed on Slack I've added some Prettier documentation and also opened: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
+1 for having Prettier deal with JS and Sass formatting automagically.
How's this branch for you @querkmachine? Ready for review now
Hopefully all playing nice with Nova
@colinrotherham Oop, missed this comment before.
Having tried the most recent push, I can confirm that it's playing nicely with Nova! Happy with the formatting changes too.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for making the updates and documenting things in another PR (I'll have a look on Monday)
When formatting with Prettier the comment is moved to its own line making Stylelint disable a different one
We can add `// prettier-ignore` where we disagree with the default formatting
486cbe4
to
b44022f
Compare
This PR updates
stylelint-config-gds
with Stylelint 15 and now includes:Breaking change: Removal of stylistic rules
Stylelint now recommends Prettier for formatting in their Migrating to
15.0.0
guideI've run
prettier --write
on all stylesheets as recommended