Review and merge switch from sass-lint to stylelint

[vanitabarrett]

Part of #1740

What

Review the PR raised by GOVUK to switch to stylelint. Things to look out for:

• check that the linting is working as expected as part of the build tasks
• there are no unexpected code changes as as result of new linter config
• we agree with all the linting rules that have been implemented
• PR merged

Why

GOVUK needs to move away from scss-lint as it's blocking their upgrade from Ruby SASS to Sassc. They have chosen stylelint and have raised a PR against GOVUK Frontend to demonstrate how we may switch to stylelint to match. This will also be shared with the frontend community so we can aim for consistency across GDS.

We need to review this PR to make sure there are no unexpected changes.

[vanitabarrett]

Prefixes within govuk-device-pixel-ratio()

Kevin's PR currently removes min--moz-device-pixel-ratio and min-device-pixel-ratio (see PR), which we were a bit wary of in case they're needed.

Findings:

• We need min--moz-device-pixel-ratio to support anything before Firefox 16
• We need equivalent dpi and dppx to support some browsers, e.g: IE11
• We can remove min-device-pixel-ratio as it never became an actual standard

(caniuse.com)

Suggestion: if we don't support Firefox 16, we can leave Kevin's commit as-is. Otherwise: remove min-device-pixel-ratio from the govuk-device-pixel-ratio mixin, but leave everything else as is. We disable the media-feature-name-no-unknown stylelint rule for min--moz-device-pixel-ratio.

---

Sidenote: I’m not 100% sure we’re using autoprefixer as intended. The prefixes are generated correctly for /dist when I condense the mixin down to just min-resolution, but NOT for /package.

Examples:

src file:

# Condensed mixin to just min-resolution, with $ratio
@mixin govuk-device-pixel-ratio($ratio: 2) {
  @media only screen and (min-resolution: #{($ratio*96)}dpi),
    only screen and (min-resolution: #{$ratio}dppx) {
      @content;
    }
}

Generated package ($ratio):

@mixin govuk-device-pixel-ratio($ratio: 2) {
  @media only screen and (min-resolution: #{($ratio*96)}dpi),
    only screen and (min-resolution: #{$ratio}dppx) {
      @content;
    }
}

src file (hardcoded numbers):

# Condensed mixin to just min-resolution, with fixed number instead of $ratio
@mixin govuk-device-pixel-ratio() {
  @media only screen and (min-resolution: 2dpi),
    only screen and (min-resolution: 2dppx) {
      @content;
    }
}

Generated package (fixed numbers):

@mixin govuk-device-pixel-ratio() {
  @media only screen and (-webkit-min-device-pixel-ratio: 0.020833333333333332),
    only screen and (min-resolution: 2dpi),
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-resolution: 2dppx) {
      @content;
    }
}

It looks like it’s tripped up by the use of the $ratio variable. When I raised this as an issue, it's suggested we're not using autoprefixer as intended (on CSS rather than on SCSS): postcss/autoprefixer#1355. Not sure where else we’re relying on autoprefixer, but we may want to check/revisit our use of it

[hannalaakso]

I would be in favour of going with Kevin's commit and not making any other changes. FF 16 is quite far out of our support matrix and also the risk seems low in terms of what the impacted mixin does.

The autoprefixer issue seems worth investigating if you can raise an issue for us about it @vanitabarrett 🕵️‍♀️

[vanitabarrett]

Autoprefixer issue created here: #1940