Getting warnings from Sass

[joelanman]

Description of the issue

On startup the kit now has warnings from Sass:

DEPRECATION WARNING: Sass's behavior for declarations that appear after nested
rules will be changing to match the behavior specified by CSS in an upcoming
version. To keep the existing behavior, move the declaration above the nested
rule. To opt into the new behavior, wrap the declaration in `& {}`.

More info: https://sass-lang.com/d/mixed-decls

    ┌──> node_modules/govuk-prototype-kit/lib/assets/sass/manage-prototype.scss
35  │     padding-left: 0;
    │     ^^^^^^^^^^^^^^^ declaration
    ╵
    ┌──> node_modules/govuk-prototype-kit/node_modules/govuk-frontend/dist/govuk/vendor/_sass-mq.scss
229 │ ┌         @media #{$media-type + $media-query} {
230 │ │             @content;
231 │ │         }
    │ └─── nested rule
    ╵
    node_modules/govuk-prototype-kit/lib/assets/sass/manage-prototype.scss 35:3  root stylesheet

The warnings dont affect the kit running, but if you want to silence them, you can add an override to package.json as I've done here:

https://github.com/joelanman/govuk-prototype-kit-prototype/blob/main/package.json#L12-L14

After that you'll need to npm uninstall govuk-prototype-kit then npm install govuk-prototype-kit

As an aside, I wonder if its best to pin versions in the govuk prototype kit package.json so this sort of thing doesnt happen

Related GOV.UK Frontend issue here:

• Sass has deprecated 'mixed declarations' govuk-frontend#5143

[romaricpascal]

Hi @joelanman 👋🏻

That's a neat workaround. I've added this to the list of small stories our team might look at outside of the main stream of work currently prioritised. Your suggestion of pinning the versions sounds neat to avoid the situation arising in the future (maybe to tilde prefixed ones rather than set version numbers to enable patches).