Upgrade to CSSNANO v5 #3245

colinrotherham · 2023-02-03T09:43:02Z

This PR updates cssnano@4 (plugin) to cssnano@5 (processor)

See release notes:
https://cssnano.co/blog/cssnano-5-release-notes/

Full list of now-bundled plugins can be found here:
https://cssnano.co/docs/what-are-optimisations/

What's a PostCSS processor?

Effectively a processor is a bundle of other plugins:
https://postcss.org/api/#processor

Note: The CSS diff shows various rules have been re-ordered again

Compatibility

Previous CSSNANO upgrades had been rejected for two reasons

Test failures
We hadn't spotted the nested plugins with CSSNANO as a Processor
- Bump nth-check and cssnano #2953
Autoprefixer v10 required (or so we thought)
This is only required when CSSNANO wraps the PostCSS plugins
- Upgrade to Autoprefixer v10 #3243

PostCSS with CSSNANO as plugin (compatible)

const plugins = [/* example */]

plugins.push(cssnano())

return {
  plugins
}

PostCSS config with CSSNANO wrapper (incompatible)

const plugins = [/* example */]

return {
  plugins: [cssnano({ plugins })]
}

postcss.config.js

colinrotherham · 2023-02-03T10:00:04Z

postcss.config.unit.test.js

@@ -6,7 +6,11 @@ describe('PostCSS config', () => {
  let env

  function getPluginNames ({ plugins }) {
-    return plugins.map(({ postcssPlugin }) => postcssPlugin)
+    return plugins.flatMap(getPluginName)


The upgrade to cssnano@5 runs as a "processor" with its own list of plugins so we can add these to the list

.github/dependabot.yml

colinrotherham · 2023-02-09T13:33:25Z

Diff for `govuk-frontend-4.5.0.min.css`

diff --git a/dist-old/govuk-frontend-4.5.0.min.css b/dist-new/govuk-frontend-4.5.0.min.css
index fefb39293..e5dc563ee 100644
--- a/dist-old/govuk-frontend-4.5.0.min.css
+++ b/dist-new/govuk-frontend-4.5.0.min.css
@@ -31,3 +31,3 @@
 .govuk-link:focus {
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     background-color: #fd0;
@@ -1299,3 +1299,3 @@
 .js-enabled .govuk-accordion__show-all:focus {
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     color: #0b0c0c;
@@ -1358,3 +1358,3 @@
     border-top: 1px solid #b1b4b6;
-    border-bottom: 10px solid rgba(0, 0, 0, 0);
+    border-bottom: 10px solid transparent;
     color: #0b0c0c;
@@ -1402,3 +1402,3 @@
 .js-enabled .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus {
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     color: #0b0c0c;
@@ -1498,3 +1498,3 @@
     .js-enabled .govuk-accordion__show-all:hover .govuk-accordion-nav__chevron {
-        background-color: rgba(0, 0, 0, 0)
+        background-color: transparent
     }
@@ -1509,4 +1509,4 @@
     .js-enabled .govuk-accordion__show-all:focus .govuk-accordion__section-toggle-focus {
-        background: rgba(0, 0, 0, 0);
-        background-color: rgba(0, 0, 0, 0)
+        background: transparent;
+        background-color: transparent
     }
@@ -1557,3 +1557,3 @@
 .govuk-back-link:focus {
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     color: #0b0c0c;
@@ -1739,3 +1739,3 @@
 .govuk-breadcrumbs__link:focus {
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     color: #0b0c0c;
@@ -1813,3 +1813,3 @@
     padding: 8px 10px 7px;
-    border: 2px solid rgba(0, 0, 0, 0);
+    border: 2px solid transparent;
     border-radius: 0;
@@ -1875,3 +1875,3 @@
     border-color: #fd0;
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     box-shadow: inset 0 0 0 1px #fd0
@@ -1894,3 +1894,3 @@
     left: -2px;
-    background: rgba(0, 0, 0, 0)
+    background: transparent
 }
@@ -2519,3 +2519,3 @@
     position: absolute;
-    background: rgba(0, 0, 0, 0)
+    background: transparent
 }
@@ -2532,3 +2532,3 @@
     border-width: 0 0 5px 5px;
-    border-top-color: rgba(0, 0, 0, 0);
+    border-top-color: transparent;
     opacity: 0
@@ -2544,3 +2544,3 @@
     border-width: 4px;
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     outline-offset: 1px;
@@ -2811,3 +2811,3 @@ screen and (forced-colors:active) {
     padding-top: 20px;
-    border-bottom: 10px solid rgba(0, 0, 0, 0);
+    border-bottom: 10px solid transparent;
     background-color: #f3f2f1
@@ -3016,5 +3016,3 @@ screen and (forced-colors:active) {
     }
-}

-@media (max-width:19.99em) {
     .govuk-input__prefix {
@@ -3121,3 +3119,3 @@ screen and (forced-colors:active) {
 .govuk-details__summary:focus {
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     color: #0b0c0c;
@@ -3154,3 +3152,3 @@ screen and (forced-colors:active) {
     clip-path: polygon(0 0, 100% 50%, 0 100%);
-    border-color: rgba(0, 0, 0, 0);
+    border-color: transparent;
     border-style: solid;
@@ -3166,3 +3164,3 @@ screen and (forced-colors:active) {
     clip-path: polygon(0 0, 50% 100%, 100% 0);
-    border-color: rgba(0, 0, 0, 0);
+    border-color: transparent;
     border-style: solid;
@@ -3313,3 +3311,3 @@ screen and (forced-colors:active) {
 .govuk-error-summary__list a:focus {
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     background-color: #fd0;
@@ -3447,3 +3445,3 @@ screen and (forced-colors:active) {
 .govuk-footer__link:focus {
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     color: #0b0c0c;
@@ -3559,4 +3557,4 @@ screen and (forced-colors:active) {
 @media only screen and (-webkit-min-device-pixel-ratio:2),
-only screen and (min-resolution:2dppx),
-only screen and (min-resolution:192dpi) {
+only screen and (min-resolution:192dpi),
+only screen and (min-resolution:2dppx) {
     .govuk-footer__copyright-logo {
@@ -3798,3 +3796,3 @@ only screen and (min-resolution:192dpi) {
 .govuk-header__link:focus {
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     color: #0b0c0c;
@@ -3907,5 +3905,3 @@ only screen and (min-resolution:192dpi) {
     }
-}

-@media (min-width:48.0625em) {
     .govuk-header__content {
@@ -3965,3 +3961,3 @@ only screen and (min-resolution:192dpi) {
 .govuk-header__menu-button:focus {
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     color: #0b0c0c;
@@ -3980,3 +3976,3 @@ only screen and (min-resolution:192dpi) {
     clip-path: polygon(0 0, 50% 100%, 100% 0);
-    border-color: rgba(0, 0, 0, 0);
+    border-color: transparent;
     border-style: solid;
@@ -3994,3 +3990,3 @@ only screen and (min-resolution:192dpi) {
     clip-path: polygon(50% 0, 0 100%, 100% 100%);
-    border-color: rgba(0, 0, 0, 0);
+    border-color: transparent;
     border-style: solid;
@@ -4114,3 +4110,3 @@ only screen and (min-resolution:192dpi) {
         color: #0b0c0c;
-        background: rgba(0, 0, 0, 0)
+        background: transparent
     }
@@ -4231,3 +4227,3 @@ only screen and (min-resolution:192dpi) {
     padding: 2px 15px 5px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0)
+    border-bottom: 1px solid transparent
 }
@@ -4348,3 +4344,3 @@ only screen and (min-resolution:192dpi) {
 .govuk-notification-banner__link:focus {
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     background-color: #fd0;
@@ -4515,3 +4511,3 @@ only screen and (min-resolution:192dpi) {
     font-weight: 700;
-    outline: 1px solid rgba(0, 0, 0, 0);
+    outline: 1px solid transparent;
     background-color: #1d70b8
@@ -4543,3 +4539,3 @@ only screen and (min-resolution:192dpi) {
 .govuk-pagination__item--ellipses:hover {
-    background-color: rgba(0, 0, 0, 0)
+    background-color: transparent
 }
@@ -4668,3 +4664,3 @@ only screen and (min-resolution:192dpi) {
 .govuk-pagination--block .govuk-pagination__link:focus .govuk-pagination__link-label {
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     color: #0b0c0c;
@@ -4696,3 +4692,3 @@ only screen and (min-resolution:192dpi) {
     padding: 35px;
-    border: 5px solid rgba(0, 0, 0, 0);
+    border: 5px solid transparent;
     text-align: center
@@ -4812,3 +4808,3 @@ only screen and (min-resolution:192dpi) {
     display: inline-block;
-    outline: 2px solid rgba(0, 0, 0, 0);
+    outline: 2px solid transparent;
     outline-offset: -2px;
@@ -5063,3 +5059,3 @@ only screen and (min-resolution:192dpi) {
 .govuk-tabs__tab:focus {
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     background-color: #fd0;
@@ -5096,5 +5092,3 @@ only screen and (min-resolution:192dpi) {
     }
-}

-@media (min-width:40.0625em) {
     .js-enabled .govuk-tabs__list {
@@ -5279,3 +5273,3 @@ only screen and (min-resolution:192dpi) {
     border-radius: 50%;
-    background: rgba(0, 0, 0, 0)
+    background: transparent
 }
@@ -5303,3 +5297,3 @@ only screen and (min-resolution:192dpi) {
     border-width: 4px;
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     outline-offset: 1px;
@@ -5523,5 +5517,5 @@ screen and (forced-colors:active) {

-.govuk-select:focus::-ms-value,
 .govuk-select option:active,
-.govuk-select option:checked {
+.govuk-select option:checked,
+.govuk-select:focus::-ms-value {
     color: #fff;
@@ -5856,3 +5850,3 @@ screen and (forced-colors:active) {
     padding: 15px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0);
+    border-bottom: 1px solid transparent;
     background-color: #f3f2f1
@@ -6303,3 +6297,3 @@ screen and (-ms-high-contrast:active) {
         color: windowText;
-        background: rgba(0, 0, 0, 0)
+        background: transparent
     }

colinrotherham · 2023-02-09T13:34:02Z

Diff for `govuk-frontend-ie8-4.5.0.min.css`

diff --git a/dist-old/govuk-frontend-ie8-4.5.0.min.css b/dist-new/govuk-frontend-ie8-4.5.0.min.css
index 17233ddad..940afae75 100644
--- a/dist-old/govuk-frontend-ie8-4.5.0.min.css
+++ b/dist-new/govuk-frontend-ie8-4.5.0.min.css
@@ -716,3 +716,3 @@
     border-top: 1px solid #b1b4b6;
-    border-bottom: 10px solid rgba(0, 0, 0, 0);
+    border-bottom: 10px solid transparent;
     color: #0b0c0c;
@@ -1015,3 +1015,3 @@
     -webkit-appearance: none;
-    border: 2px solid rgba(0, 0, 0, 0);
+    border: 2px solid transparent;
     border-bottom-color: #002d18;
@@ -1064,3 +1064,3 @@
     left: -2px;
-    background: rgba(0, 0, 0, 0)
+    background: transparent
 }
@@ -1419,3 +1419,3 @@
     border-width: 4px;
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     outline-offset: 1px;
@@ -1599,3 +1599,3 @@
     padding-top: 20px;
-    border-bottom: 10px solid rgba(0, 0, 0, 0);
+    border-bottom: 10px solid transparent;
     background-color: #f3f2f1
@@ -1817,3 +1817,3 @@
     clip-path: polygon(0 0, 100% 50%, 0 100%);
-    border-color: rgba(0, 0, 0, 0);
+    border-color: transparent;
     border-style: solid;
@@ -1828,3 +1828,3 @@
     clip-path: polygon(0 0, 50% 100%, 100% 0);
-    border-color: rgba(0, 0, 0, 0);
+    border-color: transparent;
     border-style: solid;
@@ -2334,3 +2334,3 @@
     clip-path: polygon(0 0, 50% 100%, 100% 0);
-    border-color: rgba(0, 0, 0, 0);
+    border-color: transparent;
     border-style: solid;
@@ -2347,3 +2347,3 @@
     clip-path: polygon(50% 0, 0 100%, 100% 100%);
-    border-color: rgba(0, 0, 0, 0);
+    border-color: transparent;
     border-style: solid;
@@ -2471,3 +2471,3 @@
 .govuk-notification-banner__header {
-    border-bottom: 1px solid rgba(0, 0, 0, 0);
+    border-bottom: 1px solid transparent;
     padding: 2px 20px 5px
@@ -2649,3 +2649,3 @@
     font-weight: 700;
-    outline: 1px solid rgba(0, 0, 0, 0);
+    outline: 1px solid transparent;
     background-color: #1d70b8
@@ -2674,3 +2674,3 @@
 .govuk-pagination__item--ellipses:hover {
-    background-color: rgba(0, 0, 0, 0)
+    background-color: transparent
 }
@@ -2808,3 +2808,3 @@
     padding: 35px;
-    border: 5px solid rgba(0, 0, 0, 0);
+    border: 5px solid transparent;
     text-align: center
@@ -2855,3 +2855,3 @@
     display: inline-block;
-    outline: 2px solid rgba(0, 0, 0, 0);
+    outline: 2px solid transparent;
     outline-offset: -2px;
@@ -3165,3 +3165,3 @@
     border-radius: 50%;
-    background: rgba(0, 0, 0, 0)
+    background: transparent
 }
@@ -3189,3 +3189,3 @@
     border-width: 4px;
-    outline: 3px solid rgba(0, 0, 0, 0);
+    outline: 3px solid transparent;
     outline-offset: 1px;
@@ -3340,5 +3340,5 @@

-.govuk-select:focus::-ms-value,
 .govuk-select option:active,
-.govuk-select option:checked {
+.govuk-select option:checked,
+.govuk-select:focus::-ms-value {
     color: #fff;
@@ -3534,3 +3534,3 @@
 .govuk-summary-card__title-wrapper {
-    border-bottom: 1px solid rgba(0, 0, 0, 0);
+    border-bottom: 1px solid transparent;
     background-color: #f3f2f1;

domoscargin

🧹

This looks grand to me - linting's passing, and at a glance, the diff looks like it's all just rule re-ordering.

colinrotherham · 2023-02-09T13:41:48Z

This looks grand to me - linting's passing, and at a glance, the diff looks like it's all just rule re-ordering.

Thanks @domoscargin

I'll put a nudge out for more 👀

36degrees · 2023-02-09T14:17:34Z

As discussed on Slack, the re-ordering is happening because of a new rule in CSS nano which sorts CSS declarations based on their property names so that it gzips better.

We already enforce a specific order for properties with our linter, so shouldn't see much of a gain (it's just sorting properties in a different order).

I think we should disable the rule because it keeps the dist CSS closer to the authored Sass. As an example of how this benefits us, when reviewing the changes using Chrome dev tools, the properties currently appear in the same order they appear in the Sass, whereas with this change they are sorted alphabetically, which makes it harder to debug (especially where some of the properties are coming from mixins).

colinrotherham · 2023-02-09T14:34:39Z

Thanks @36degrees makes perfect sense

Diffs updated above

Notable things:

Duplicate media queries combined
Some selector and media query reordering
Changing rgba(0, 0, 0, 0) to transparent (seen this before)

colinrotherham · 2023-02-09T14:37:07Z

To explain the duplicate media query removal (diff is hard to read)

Before

@media (min-width:48.0625em) {
    .govuk-header__logo {
        width: 33.33%;
        padding-right: 15px;
        float: left;
        vertical-align: top
    }
}

@media (min-width:48.0625em) {
    .govuk-header__content {
        width: 66.66%;
        padding-left: 15px;
        float: left
    }
}

After

@media (min-width:48.0625em) {
    .govuk-header__logo {
        width: 33.33%;
        padding-right: 15px;
        float: left;
        vertical-align: top
    }

    .govuk-header__content {
        width: 66.66%;
        padding-left: 15px;
        float: left
    }
}

Sorted CSS is smaller when gzipped, but we sort using Stylelint

36degrees

Nice! 🎉

colinrotherham added sass / css tooling tech debt labels Feb 3, 2023

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3245 February 3, 2023 09:43 Inactive

colinrotherham commented Feb 3, 2023

View reviewed changes

postcss.config.js Outdated Show resolved Hide resolved

colinrotherham commented Feb 3, 2023

View reviewed changes

colinrotherham force-pushed the cssnano-only branch from bbc3a28 to dba5661 Compare February 7, 2023 16:24

colinrotherham changed the base branch from main to review-app-assets February 7, 2023 16:24

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3245 February 7, 2023 16:24 Inactive

colinrotherham added dependencies Pull requests that update a dependency file and removed tooling tech debt labels Feb 8, 2023

colinrotherham mentioned this pull request Feb 9, 2023

Review legacy package vulnerabilities #3244

Merged

domoscargin reviewed Feb 9, 2023

View reviewed changes

.github/dependabot.yml Show resolved Hide resolved

colinrotherham force-pushed the cssnano-only branch from dba5661 to 67d4a80 Compare February 9, 2023 13:09

colinrotherham changed the base branch from review-app-assets to legacy-package-vulnerabilities February 9, 2023 13:09

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3245 February 9, 2023 13:10 Inactive

Base automatically changed from legacy-package-vulnerabilities to main February 9, 2023 13:11

Bump cssnano from 4.1.11 to 5.1.14

b87133a

colinrotherham force-pushed the cssnano-only branch from 67d4a80 to b87133a Compare February 9, 2023 13:29

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3245 February 9, 2023 13:29 Inactive

domoscargin approved these changes Feb 9, 2023

View reviewed changes

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3245 February 9, 2023 14:35 Inactive

Turn off cssnano cssDeclarationSorter

effef6f

Sorted CSS is smaller when gzipped, but we sort using Stylelint

colinrotherham force-pushed the cssnano-only branch from dce768a to effef6f Compare February 9, 2023 14:38

govuk-design-system-ci temporarily deployed to govuk-frontend-pr-3245 February 9, 2023 14:38 Inactive

36degrees approved these changes Feb 10, 2023

View reviewed changes

colinrotherham merged commit 53e0b27 into main Feb 10, 2023

colinrotherham deleted the cssnano-only branch February 10, 2023 10:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to CSSNANO v5 #3245

Upgrade to CSSNANO v5 #3245

colinrotherham commented Feb 3, 2023 •

edited

Loading

colinrotherham Feb 3, 2023

colinrotherham commented Feb 9, 2023 •

edited

Loading

colinrotherham commented Feb 9, 2023 •

edited

Loading

domoscargin left a comment

colinrotherham commented Feb 9, 2023

36degrees commented Feb 9, 2023

colinrotherham commented Feb 9, 2023

colinrotherham commented Feb 9, 2023

36degrees left a comment

Upgrade to CSSNANO v5 #3245

Upgrade to CSSNANO v5 #3245

Conversation

colinrotherham commented Feb 3, 2023 • edited Loading

What's a PostCSS processor?

Compatibility

PostCSS with CSSNANO as plugin (compatible)

PostCSS config with CSSNANO wrapper (incompatible)

colinrotherham Feb 3, 2023

Choose a reason for hiding this comment

colinrotherham commented Feb 9, 2023 • edited Loading

Diff for govuk-frontend-4.5.0.min.css

colinrotherham commented Feb 9, 2023 • edited Loading

Diff for govuk-frontend-ie8-4.5.0.min.css

domoscargin left a comment

Choose a reason for hiding this comment

colinrotherham commented Feb 9, 2023

36degrees commented Feb 9, 2023

colinrotherham commented Feb 9, 2023

colinrotherham commented Feb 9, 2023

Before

After

36degrees left a comment

Choose a reason for hiding this comment

colinrotherham commented Feb 3, 2023 •

edited

Loading

colinrotherham commented Feb 9, 2023 •

edited

Loading

Diff for `govuk-frontend-4.5.0.min.css`

colinrotherham commented Feb 9, 2023 •

edited

Loading

Diff for `govuk-frontend-ie8-4.5.0.min.css`