Configure Stylelint with GOV.UK Frontend property order

[colinrotherham]

Description

This PR configures Stylelint using the GOV.UK Frontend config

These changes make sure to reduce the "diff" between our two repos

Missing properties have been added for flex, grid and column layouts (plus masks)

Automatic grouping

Support for automatic grouping was added in stylelint-order@3.1.0 using emptyLineBefore: 'threshold'

Sass files in NHS.UK frontend are manually now automatically split up into groups:

    box-sizing: border-box;
+ 
    display: inline-block;
+
    width: $indicator-size;
    height: $indicator-size;
    margin: 0 0.125em;
+
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;

i.e. One less thing to fix manually when saving files

Format on save

Visual Studio code can be configured to automatically apply ESLint, Stylelint and Prettier formatting:

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": "explicit",
  "source.fixAll.stylelint": "explicit"
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.requireConfig": true,
"stylelint.validate": ["css", "scss"],

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[paulrobertlloyd]

Love it! Should help keep diffs much more manageable.

[anandamaryon1]

Nice

(will apply to my VS code now, and hopefully never have to push another fix linting commit again)