Stop minifying review app CSS

cssnano-preset-default includes a number of transformations that meaningfully change the CSS, including [1]:

- sorting declarations (css-declaration-sorter)
- transforming colours (postcss-colormin)
- converting values (postcss-convert-values)
- merging longhand properties to shorthand (postcss-merge-longhand)
- merging rules (postcss-merge-rules)
- transforming fonts (postcss-minify-font-values)

We are generally very intentional with the way that we author our CSS. We want the review app to reflect the code we’re writing as closely as possible.

Allowing postcss to meaningfully change the CSS is confusing, and in some cases may mislead or mask problems.

As a more tangible example, this configuration is currently masking the fact that `govuk-tint` and `govuk-shade` output colours defined using `rgb()` with floats which are not supported in older browsers [2] [3]. The `postcss-colormin` plugin is converting them back to hex values in the review app.

Remove cssnano from the review app’s postcss config and uninstall.

This doesn’t affect the minified CSS shipped in the govuk-frontend package, which is processed using the separate postcss config in the package folder.

[1]: https://www.npmjs.com/package/cssnano-preset-default#plugins
[2]: https://caniuse.com/mdn-css_types_color_rgb_float_values
[3]: #5988

Author: 36degrees

package-lock.json

@@ -51,8 +51,6 @@
     "@rollup/plugin-terser": "^0.4.4",
     "autoprefixer": "^10.4.21",
     "browser-sync": "^3.0.4",
-    "cssnano": "^7.0.7",
-    "cssnano-preset-default": "^7.0.1",
     "gulp": "^5.0.0",
     "gulp-cli": "^3.0.0",
     "nodemon": "^3.1.10",

packages/govuk-frontend-review/package.json

@@ -1,6 +1,4 @@
 import autoprefixer from 'autoprefixer'
-import cssnano from 'cssnano'
-import cssnanoPresetDefault from 'cssnano-preset-default'
 import pseudoclasses from 'postcss-pseudo-classes'
 
 /**
@@ -18,13 +16,6 @@ export default {
     pseudoclasses({
       allCombinations: true,
       restrictTo: [':link', ':visited', ':hover', ':active', ':focus']
-    }),
-
-    // Always minify CSS
-    cssnano({
-      preset: cssnanoPresetDefault({
-        env: 'stylesheets'
-      })
     })
   ]
 }

packages/govuk-frontend-review/postcss.config.mjs

@@ -25,36 +25,7 @@ describe('PostCSS config', () => {
     it('Uses expected plugins', () => {
       expect(getPluginNames(config)).toEqual([
         'autoprefixer',
-        'postcss-pseudo-classes',
-        'postcss-discard-comments',
-        'postcss-minify-gradients',
-        'postcss-reduce-initial',
-        'postcss-svgo',
-        'postcss-normalize-display-values',
-        'postcss-reduce-transforms',
-        'postcss-colormin',
-        'postcss-normalize-timing-functions',
-        'postcss-calc',
-        'postcss-convert-values',
-        'postcss-ordered-values',
-        'postcss-minify-selectors',
-        'postcss-minify-params',
-        'postcss-normalize-charset',
-        'postcss-discard-overridden',
-        'postcss-normalize-string',
-        'postcss-normalize-unicode',
-        'postcss-minify-font-values',
-        'postcss-normalize-url',
-        'postcss-normalize-repeat-style',
-        'postcss-normalize-positions',
-        'postcss-normalize-whitespace',
-        'postcss-merge-longhand',
-        'postcss-discard-duplicates',
-        'postcss-merge-rules',
-        'postcss-discard-empty',
-        'postcss-unique-selectors',
-        'css-declaration-sorter',
-        'cssnano-util-raw-cache'
+        'postcss-pseudo-classes'
       ])
     })
   })