Always run PostCSS cssnano() plugin after other transforms

We now minify CSS by default but need to move `cssnano` after other transforms This fixes a bug where minified CSS (with complex consolidated selectors) wasn’t correctly transformed by `postcss-pseudo-classes` to include all psuedo classes
alphagov · Jan 19, 2023 · d5903b3 · d5903b3
1 parent e37f173
commit d5903b3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 55 deletions.
diff --git a/postcss.config.js b/postcss.config.js
@@ -29,11 +29,6 @@ module.exports = ({ env, file = '' }) => {
     autoprefixer({ env: isIE8 ? 'oldie' : env })
   ]
 
-  // Minify CSS
-  if (name.endsWith('.min')) {
-    plugins.push(cssnano())
-  }
-
   // Add review app auto-generated 'companion' classes for each pseudo-class
   // For example ':hover' and ':focus' classes to simulate form label states
   if (minimatch(dir, '**/app/assets/scss')) {
@@ -58,6 +53,9 @@ module.exports = ({ env, file = '' }) => {
     )
   }
 
+  // Always minify CSS
+  plugins.push(cssnano())
+
   return {
     plugins
   }

diff --git a/postcss.config.unit.test.js b/postcss.config.unit.test.js
@@ -79,49 +79,6 @@ describe('PostCSS config', () => {
       )('Adds plugins for $path', ({ path }) => {
         const input = new Vinyl({ path })
 
-        // Confirm plugins for both file object and path
-        for (const file of [input, input.path]) {
-          const config = configFn({ env, file })
-
-          expect(getPluginNames(config))
-            .toEqual(['autoprefixer'])
-        }
-      })
-    })
-
-    describe('Default + IE8', () => {
-      it.each(
-        [
-          { path: 'example-ie8.css' },
-          { path: 'example-ie8.scss' }
-        ]
-      )('Adds plugins for $path', ({ path }) => {
-        const input = new Vinyl({ path })
-
-        // Confirm plugins for both file object and path
-        for (const file of [input, input.path]) {
-          const config = configFn({ env, file })
-
-          expect(getPluginNames(config))
-            .toEqual([
-              'autoprefixer',
-              'postcss-unmq',
-              'postcss-unopacity',
-              'postcss-color-rgba-fallback'
-            ])
-        }
-      })
-    })
-
-    describe('Default + Minification', () => {
-      it.each(
-        [
-          { path: 'example.min.css' },
-          { path: 'example.min.scss' }
-        ]
-      )('Adds plugins for $path', ({ path }) => {
-        const input = new Vinyl({ path })
-
         // Confirm plugins for both file object and path
         for (const file of [input, input.path]) {
           const config = configFn({ env, file })
@@ -135,11 +92,11 @@ describe('PostCSS config', () => {
       })
     })
 
-    describe('Default + Minification + IE8', () => {
+    describe('Default + IE8', () => {
       it.each(
         [
-          { path: 'example-ie8.min.css' },
-          { path: 'example-ie8.min.scss' }
+          { path: 'example-ie8.css' },
+          { path: 'example-ie8.scss' }
         ]
       )('Adds plugins for $path', ({ path }) => {
         const input = new Vinyl({ path })
@@ -151,10 +108,10 @@ describe('PostCSS config', () => {
           expect(getPluginNames(config))
             .toEqual([
               'autoprefixer',
-              'cssnano',
               'postcss-unmq',
               'postcss-unopacity',
-              'postcss-color-rgba-fallback'
+              'postcss-color-rgba-fallback',
+              'cssnano'
             ])
         }
       })
@@ -176,7 +133,8 @@ describe('PostCSS config', () => {
           expect(getPluginNames(config))
             .toEqual([
               'autoprefixer',
-              'postcss-pseudo-classes'
+              'postcss-pseudo-classes',
+              'cssnano'
             ])
         }
       })
@@ -218,7 +176,8 @@ describe('PostCSS config', () => {
               'postcss-pseudo-classes',
               'postcss-unmq',
               'postcss-unopacity',
-              'postcss-color-rgba-fallback'
+              'postcss-color-rgba-fallback',
+              'cssnano'
             ])
         }
       })