Upgrade to postcss version 8 is blocked on oldie

[lfdebrux]

Cause

The package oldie was last published 6 years ago and does not appear to be maintained. It and its dependents require postcss version 5.

We currently use gulp-postcss for our Sass to minified CSS pipeline, which tries to arrange things so that the CSS is parsed only once, and so uses its own version of postcss to run any plugins.

When running gulp scss:compile with the latest version of gulp-postcss and postcss we get the following error:

Unknown error from PostCSS plugin. Your current PostCSS version is 8.4.4, but postcss-unmq uses 5.2.18. Perhaps this is the source of the error below.
Cannot read property '1' of null

Consequences

We cannot upgrade to postcss 8 without finding a replacement for oldie. postcss 8 has a number of security fixes and advantages, including new best practice where plugins are asked to use it as a peer dependency rather than as a direct dependency, which results in a smaller dependency tree for us.

Impact of debt

Low

Reason (impact of debt)

No response

Effort to pay down

Medium

Reason (effort to pay down)

We could fork oldie, or use a vendored version, to get around the requirement for older dependencies. I think the code in oldie should still work, it's just tying a number of other plugins together. Looked into this, most of the dependencies for oldie are also unmaintained 😢.

Overall rating

Low

Reason (overall rating)

No response

[36degrees]

I did a little investigation and tried to understand what effect each of the transformations built into oldie is having on the outputted CSS.

I disabled each plugin in turn, re-compiled the dist folder and compared the outputted CSS to a version generated with the current plugin config.

Salvage :nth-child (nth)

Disabling this plugin makes no difference to the compiled CSS.

Replace :root (root)

Disabling this plugin makes no difference to the compiled CSS.

Reduce calc() (calc)

Disabling this plugin makes no difference to the compiled CSS.

Resolve rem (rem)

This plugin is already disabled in the config.

Patch pseudo-elements (pseudo)

This plugin is already disabled in the config.

Flatten Media Queries (media)

We've attempted to disable this plugin, but have used unmq which is the wrong namespace (it's wrong in the README for oldie), so it's actually still enabled at the mo.

All breakpoint-based media queries are already flattened by sass-mq, so disabling this plugin means that media queries for things like forced-colors:active, hover:none, pointer:coarse, min-resolution:2dppx are outputted in the CSS:

diff --git a/tmp-dist-ie8.min.css b/dist/govuk-frontend-ie8-4.0.0.min.css
index ddaff93c..c25758a8 100644
--- a/tmp-dist-ie8.min.css
+++ b/dist/govuk-frontend-ie8-4.0.0.min.css
@@ -855,6 +855,40 @@
     vertical-align: middle
 }
 
+@media screen and (forced-colors:active) {
+
+    .js-enabled .govuk-accordion__section-button:hover .govuk-accordion-nav__chevron,
+    .js-enabled .govuk-accordion__show-all:hover .govuk-accordion-nav__chevron {
+        background-color: transparent;
+        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#00000000', endColorstr='#00000000')
+    }
+
+    .js-enabled .govuk-accordion__section-button:focus .govuk-accordion-nav__chevron,
+    .js-enabled .govuk-accordion__section-button:focus .govuk-accordion__section-heading-text-focus,
+    .js-enabled .govuk-accordion__section-button:focus .govuk-accordion__section-summary-focus,
+    .js-enabled .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus,
+    .js-enabled .govuk-accordion__show-all:focus .govuk-accordion-nav__chevron,
+    .js-enabled .govuk-accordion__show-all:focus .govuk-accordion__section-heading-text-focus,
+    .js-enabled .govuk-accordion__show-all:focus .govuk-accordion__section-summary-focus,
+    .js-enabled .govuk-accordion__show-all:focus .govuk-accordion__section-toggle-focus {
+        background: transparent;
+        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#00000000', endColorstr='#00000000');
+        background-color: transparent;
+        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#00000000', endColorstr='#00000000')
+    }
+}
+
+@media (hover:none) {
+    .js-enabled .govuk-accordion__section-header:hover {
+        border-top-color: #b1b4b6;
+        box-shadow: inset 0 3px 0 0 #1d70b8
+    }
+
+    .js-enabled .govuk-accordion__section-header:hover .govuk-accordion__section-button {
+        border-top-color: #b1b4b6
+    }
+}
+
 .govuk-back-link {
     font-size: 14px;
     font-size: .875rem;
@@ -1473,6 +1507,13 @@
     box-shadow: 0 0 0 3px #fd0
 }
 
+@media (-ms-high-contrast:active),
+screen and (forced-colors:active) {
+    .govuk-checkboxes__input:focus+.govuk-checkboxes__label:before {
+        outline-color: Highlight
+    }
+}
+
 .govuk-checkboxes__input:checked+.govuk-checkboxes__label:after {
     filter: alpha(opacity=100)
 }
@@ -1574,6 +1615,17 @@
     box-shadow: 0 0 0 3px #fd0, 0 0 0 10px #b1b4b6
 }
 
+@media (hover:none),
+(pointer:coarse) {
+        {
+        box-shadow: none
+    }
+
+    .govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:focus+.govuk-checkboxes__label:before {
+        box-shadow: 0 0 0 3px #fd0
+    }
+}
+
 .govuk-textarea {
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -2239,6 +2291,14 @@
     white-space: nowrap
 }
 
+@media only screen and (-webkit-min-device-pixel-ratio:2),
+only screen and (min-resolution:2dppx),
+only screen and (min-resolution:192dpi) {
+    .govuk-footer__copyright-logo {
+        background-image: url(/assets/images/govuk-crest-2x.png)
+    }
+}
+
 .govuk-footer__inline-list {
     margin-top: 0;
     margin-bottom: 15px;
@@ -2351,6 +2411,13 @@
     margin-right: 5px
 }
 
+@media (forced-colors:active) {
+    .govuk-header__logotype {
+        forced-color-adjust: none;
+        color: linktext
+    }
+}
+
 .govuk-header__logotype:last-child {
     margin-right: 0
 }
@@ -3166,6 +3233,13 @@
     box-shadow: 0 0 0 4px #fd0
 }
 
+@media (-ms-high-contrast:active),
+screen and (forced-colors:active) {
+    .govuk-radios__input:focus+.govuk-radios__label:before {
+        outline-color: Highlight
+    }
+}
+
 .govuk-radios__input:checked+.govuk-radios__label:after {
     filter: alpha(opacity=100)
 }
@@ -3288,6 +3362,17 @@
     box-shadow: 0 0 0 4px #fd0, 0 0 0 10px #b1b4b6
 }
 
+@media (hover:none),
+(pointer:coarse) {
+        {
+        box-shadow: none
+    }
+
+    .govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:focus+.govuk-radios__label:before {
+        box-shadow: 0 0 0 4px #fd0
+    }
+}
+
 .govuk-select {
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;
@@ -3556,6 +3641,15 @@
     forced-color-adjust: none
 }
 
+@media screen and (forced-colors:active) {
+    .govuk-warning-text__icon {
+        border-color: windowText;
+        color: windowText;
+        background: transparent;
+        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#00000000', endColorstr='#00000000')
+    }
+}
+
 .govuk-warning-text__text {
     font-family: GDS Transport, arial, sans-serif;
     -webkit-font-smoothing: antialiased;

Uphold opacity (opacity)

Disabling this plugin means that opacity declarations are no longer converted to use filters which work in IE8. This seems to affect disabled buttons, checkboxes and radios.

diff --git a/tmp-dist-ie8.min.css b/dist/govuk-frontend-ie8-4.0.0.min.css
index ddaff93c..ebb0f251 100644
--- a/tmp-dist-ie8.min.css
+++ b/dist/govuk-frontend-ie8-4.0.0.min.css
@@ -1109,7 +1109,7 @@
 .govuk-button--disabled,
 .govuk-button[disabled=disabled],
 .govuk-button[disabled] {
-    filter: alpha(opacity=50)
+    opacity: .5
 }
 
 .govuk-button--disabled:hover,
@@ -1474,7 +1474,7 @@
 }
 
 .govuk-checkboxes__input:checked+.govuk-checkboxes__label:after {
-    filter: alpha(opacity=100)
+    opacity: 1
 }
 
 .govuk-checkboxes__input:disabled,
@@ -1483,7 +1483,7 @@
 }
 
 .govuk-checkboxes__input:disabled+.govuk-checkboxes__label {
-    filter: alpha(opacity=50)
+    opacity: .5
 }
 
 .govuk-checkboxes__divider {
@@ -3149,7 +3149,7 @@
     height: 0;
     border: 10px solid;
     border-radius: 50%;
-    filter: alpha(opacity=0);
+    opacity: 0;
     background: currentColor
 }
 
@@ -3167,7 +3167,7 @@
 }
 
 .govuk-radios__input:checked+.govuk-radios__label:after {
-    filter: alpha(opacity=100)
+    opacity: 1
 }
 
 .govuk-radios__input:disabled,
@@ -3176,7 +3176,7 @@
 }
 
 .govuk-radios__input:disabled+.govuk-radios__label {
-    filter: alpha(opacity=50)
+    opacity: .5
 }
 
 .govuk-radios--inline:after {

Retain rgba colors (rgba)

This affects link colour changes (which are mostly a hack to fix text-decoration-underline-thickness not changing in Safari).

There are also quite a few places where this plugin was converting rgba(0, 0, 0, 0) back to transparent (as it is in the Sass) – from playing around, it looks like this transformation is being done by cssnano. Arguably it's a moot point as to which we use, as IE8 doesn't support either of them.

diff --git a/tmp-dist-ie8.min.css b/dist/govuk-frontend-ie8-4.0.0.min.css
index ddaff93c..88168164 100644
--- a/tmp-dist-ie8.min.css
+++ b/dist/govuk-frontend-ie8-4.0.0.min.css
@@ -51,7 +51,7 @@
 }
 
 .govuk-link--text-colour:hover {
-    color: #0b0c0c
+    color: rgba(11, 12, 12, .99)
 }
 
 .govuk-link--text-colour:active,
@@ -748,7 +748,7 @@
     width: 100%;
     border: 0;
     border-top: 1px solid #b1b4b6;
-    border-bottom: 10px solid transparent;
+    border-bottom: 10px solid rgba(0, 0, 0, 0);
     color: #0b0c0c;
     background: none;
     text-align: left;
@@ -886,7 +886,7 @@
 }
 
 .govuk-back-link:hover {
-    color: #0b0c0c
+    color: rgba(11, 12, 12, .99)
 }
 
 .govuk-back-link:active,
@@ -1016,7 +1016,7 @@
 }
 
 .govuk-breadcrumbs__link:hover {
-    color: #0b0c0c
+    color: rgba(11, 12, 12, .99)
 }
 
 .govuk-breadcrumbs__link:active,
@@ -1049,7 +1049,7 @@
     vertical-align: top;
     cursor: pointer;
     -webkit-appearance: none;
-    border: 2px solid transparent;
+    border: 2px solid rgba(0, 0, 0, 0);
     border-bottom-color: #002d18;
     width: auto
 }
@@ -1098,8 +1098,7 @@
     right: -2px;
     bottom: -4px;
     left: -2px;
-    background: transparent;
-    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#00000000', endColorstr='#00000000')
+    background: rgba(0, 0, 0, 0)
 }
 
 .govuk-button:active:before {
@@ -1468,7 +1467,7 @@
 
 .govuk-checkboxes__input:focus+.govuk-checkboxes__label:before {
     border-width: 4px;
-    outline: 3px solid transparent;
+    outline: 3px solid rgba(0, 0, 0, 0);
     outline-offset: 1px;
     box-shadow: 0 0 0 3px #fd0
 }
@@ -1645,7 +1644,7 @@
 
 .govuk-cookie-banner {
     padding-top: 20px;
-    border-bottom: 10px solid transparent;
+    border-bottom: 10px solid rgba(0, 0, 0, 0);
     background-color: #f3f2f1
 }
 
@@ -1982,7 +1981,7 @@
     height: 0;
     -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
     clip-path: polygon(0 0, 100% 50%, 0 100%);
-    border-color: transparent;
+    border-color: rgba(0, 0, 0, 0);
     border-style: solid;
     border-width: 7px 0 7px 12.124px;
     border-left-color: inherit
@@ -1994,7 +1993,7 @@
     height: 0;
     -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
     clip-path: polygon(0 0, 50% 100%, 100% 0);
-    border-color: transparent;
+    border-color: rgba(0, 0, 0, 0);
     border-style: solid;
     border-width: 12.124px 7px 0;
     border-top-color: inherit
@@ -2169,7 +2168,7 @@
 }
 
 .govuk-footer__link:hover {
-    color: #0b0c0c
+    color: rgba(11, 12, 12, .99)
 }
 
 .govuk-footer__link:active,
@@ -2518,7 +2517,7 @@
     height: 0;
     -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
     clip-path: polygon(0 0, 50% 100%, 100% 0);
-    border-color: transparent;
+    border-color: rgba(0, 0, 0, 0);
     border-style: solid;
     border-width: 8.66px 5px 0;
     border-top-color: inherit;
@@ -2532,7 +2531,7 @@
     height: 0;
     -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
     clip-path: polygon(50% 0, 0 100%, 100% 100%);
-    border-color: transparent;
+    border-color: rgba(0, 0, 0, 0);
     border-style: solid;
     border-width: 0 5px 8.66px;
     border-bottom-color: inherit
@@ -2653,7 +2652,7 @@
 }
 
 .govuk-notification-banner__header {
-    border-bottom: 1px solid transparent;
+    border-bottom: 1px solid rgba(0, 0, 0, 0);
     padding: 2px 20px 5px
 }
 
@@ -2770,7 +2769,7 @@
     box-sizing: border-box;
     margin-bottom: 15px;
     padding: 35px;
-    border: 5px solid transparent;
+    border: 5px solid rgba(0, 0, 0, 0);
     text-align: center
 }
 
@@ -2817,7 +2816,7 @@
 
 .govuk-tag {
     display: inline-block;
-    outline: 2px solid transparent;
+    outline: 2px solid rgba(0, 0, 0, 0);
     outline-offset: -2px;
     color: #fff;
     background-color: #1d70b8;
@@ -3049,7 +3048,7 @@
 }
 
 .js-enabled .govuk-tabs__tab:hover {
-    color: #0b0c0c
+    color: rgba(11, 12, 12, .99)
 }
 
 .js-enabled .govuk-tabs__tab:active,
@@ -3136,8 +3135,7 @@
     height: 40px;
     border: 2px solid;
     border-radius: 50%;
-    background: transparent;
-    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#00000000', endColorstr='#00000000')
+    background: rgba(0, 0, 0, 0)
 }
 
 .govuk-radios__label:after {
@@ -3161,7 +3159,7 @@
 
 .govuk-radios__input:focus+.govuk-radios__label:before {
     border-width: 4px;
-    outline: 3px solid transparent;
+    outline: 3px solid rgba(0, 0, 0, 0);
     outline-offset: 1px;
     box-shadow: 0 0 0 4px #fd0
 }
@@ -3371,7 +3369,7 @@
 }
 
 .govuk-skip-link:hover {
-    color: #0b0c0c
+    color: rgba(11, 12, 12, .99)
 }
 
 .govuk-skip-link:active,

Forget :not (not)

There is something a little odd with this plugin, as at the minute if there is a selector list that only contains a single selector which uses :not, it removes the selector as expected but leaves the ruleset even though it has no selectors any more, so you end up with things like this in your CSS:

{margin-bottom:10px}{margin-bottom:10px}.govuk-fieldset__legend+.govuk-hint{margin-top:-5px}

Because we currently only ever use :not by itself (without any other selectors that do not use :not), this plugin isn't really doing anything useful.

diff --git a/tmp-dist-ie8.min.css b/dist/govuk-frontend-ie8-4.0.0.min.css
index ddaff93c..d45a8498 100644
--- a/tmp-dist-ie8.min.css
+++ b/dist/govuk-frontend-ie8-4.0.0.min.css
@@ -73,7 +73,7 @@
     color: #0b0c0c
 }
 
-    {
+.govuk-link--no-underline:not(:hover):not(:active) {
     text-decoration: none
 }
 
@@ -1083,7 +1083,7 @@
     box-shadow: inset 0 0 0 1px #fd0
 }
 
-    {
+.govuk-button:focus:not(:active):not(:hover) {
     border-color: #fd0;
     color: #0b0c0c;
     background-color: #fd0;
@@ -1331,11 +1331,11 @@
     color: #505a5f
 }
 
-    {
+.govuk-label:not(.govuk-label--m):not(.govuk-label--l):not(.govuk-label--xl)+.govuk-hint {
     margin-bottom: 10px
 }
 
-    {
+.govuk-fieldset__legend:not(.govuk-fieldset__legend--m):not(.govuk-fieldset__legend--l):not(.govuk-fieldset__legend--xl)+.govuk-hint {
     margin-bottom: 10px
 }
 
@@ -1566,7 +1566,7 @@
     clear: both
 }
 
-    {
+.govuk-checkboxes--small .govuk-checkboxes__item:hover .govuk-checkboxes__input:not(:disabled)+.govuk-checkboxes__label:before {
     box-shadow: 0 0 0 10px #b1b4b6
 }
 
@@ -1743,7 +1743,7 @@
     padding-right: 10px
 }
 
-    {
+.govuk-summary-list__actions-list-item:not(:last-child) {
     border-right: 1px solid #b1b4b6
 }
 
@@ -3280,7 +3280,7 @@
     margin-bottom: 5px
 }
 
-    {
+.govuk-radios--small .govuk-radios__item:hover .govuk-radios__input:not(:disabled)+.govuk-radios__label:before {
     box-shadow: 0 0 0 10px #b1b4b6
 }

[querkmachine]

As we're now planning to drop IE8 in v5 of Frontend, we will likely be dropping oldie entirely. Should we consider upgrading PostCSS a task for v5?

[lfdebrux]

As we're now planning to drop IE8 in v5 of Frontend, we will likely be dropping oldie entirely. Should we consider upgrading PostCSS a task for v5?

YES!! 😄

[colinrotherham]

Looks like we can close this one as we're using postcss@8 now and oldie was removed in:

• Replace oldie with separate PostCSS plugins #2924

Gathered some usage information in this comment #3001 (review) with some plugins using older postcss versions

So other problems still lurk. We saw these when considering cssnano upgrades

Any cssnano major updates will have to wait until IE8 support is removed. Their latest config approach has much closer integration with PostCSS plugins and causes issues for us (see #2881, #2924, #2937)