Add missing Stylelint properties and automatic grouping

[colinrotherham]

Hope you don't mind us giving back from nhsuk/nhsuk-frontend#1589?

We spotted the Stylelint config order/properties-order list was getting a bit out of date

For example, it was missing:

• Flex layout properties like flex and align-items
• Column layout properties like column-gap and row-gap
• Grid layout properties like grid-template-columns
• Masking using mask-image, mask-repeat etc

Plus some readily used obscure properties such as pointer-events and text-decoration-thickness

This PR adds missing properties and turns on automatic grouping

---

Automatic grouping

Support for automatic grouping was added in [email protected] using emptyLineBefore: 'threshold'

Sass files in GOV.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"],