Format Sass stylesheets using Prettier

[colinrotherham]

This PR updates stylelint-config-gds with Stylelint 15 and now includes:

• Checks for media query syntax, rules and values
• Checks for number precision inside CSS functions
• Fixes for duplicate rules with intentionally different units

Breaking change: Removal of stylistic rules

Stylelint now recommends Prettier for formatting in their Migrating to 15.0.0 guide

I've run prettier --write on all stylesheets as recommended

We have removed all stylistic rules (such as tabs/spaces, indentation, etc) as they're no longer included in Stylelint common configurations as part of their deprecation in Stylelint 15.

As per Stylelint's own documentation, we recommend that projects adopt Prettier for formatting instead.

If this is not possible for your project, you can configure your projects' Stylelint configuration to use the stylelint-stylistic or stylelint-codeguide plugins to restore the deprecated rules instead.

This change was made in pull request #44: Remove deprecated stylistic rules.

[colinrotherham]

Installing from GitHub branch until this PR is released:

• Update to Stylelint 15 stylelint-config-gds#32

[colinrotherham]

Seems to look good, but I'll highlight some not-too-pretty examples:

https://github.com/alphagov/govuk-frontend/pull/3799/files#diff-e9de60885fa511018982360bd5f64b5c55a56363d5653e65a6432cc3a6beef33R76

@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

https://github.com/alphagov/govuk-frontend/pull/3799/files#diff-09fe9243587018027ad713666b9b6c114728a2ea2a227ea9265ce482dbfbb9adR35

.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 🤷‍♂️

[romaricpascal]

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.

[querkmachine]

+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.

[colinrotherham]

Thanks @romaricpascal

As discussed on Slack I've added some Prettier documentation and also opened:

• Update testing and linting documentation #4044

[querkmachine]

+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.

[romaricpascal]

Thanks for making the updates and documenting things in another PR (I'll have a look on Monday)