fix: remove ie support where necessary (#217)

ogcio · Jul 18, 2024 · 67e0ebb · 67e0ebb
1 parent 8604103
commit 67e0ebb
Show file tree

Hide file tree

Showing 13 changed files with 116 additions and 459 deletions.
diff --git a/.storybook/preview.jsx b/.storybook/preview.jsx
@@ -135,7 +135,6 @@ export const parameters = {
           'Import CSS, assets and JavaScript',
           'Configure components with JavaScript',
           'Localise Gov IE DS',
-          'Support Internet Explorer 8',
           'JavaScript API Reference',
           'Sass API Reference',
           'Colours',

diff --git a/README.md b/README.md
@@ -32,7 +32,6 @@ Using Frontend will help your service meet [level AA of WCAG 2.1](https://www.w3
 You should also use:
 
 - [the JavaScript from Gov IE DS](https://ogcio.github.io/ogcio-ds/?path=/docs/docs-import-css-assets-and-javascript--docs)
-- [a separate stylesheet](https://ogcio.github.io/ogcio-ds/?path=/docs/docs-support-internet-explorer-8--docs) if you support Internet Explorer 8
 
 You can also read the [accessibility statement for Gov IE DS](https://www.design-system.ogcio.gov.ie/accessibility/)
 

diff --git a/postcss.config.js b/postcss.config.js
@@ -1,15 +1,15 @@
-const { parse } = require('path')
+const { parse } = require('path');
 
-const autoprefixer = require('autoprefixer')
-const cssnano = require('cssnano')
-const cssnanoPresetDefault = require('cssnano-preset-default')
-const { minimatch } = require('minimatch')
-const postcss = require('postcss')
-const pseudoclasses = require('postcss-pseudo-classes')
-const scss = require('postcss-scss')
-const unmq = require('postcss-unmq')
-const unopacity = require('postcss-unopacity')
-const unrgba = require('postcss-unrgba')
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+const cssnanoPresetDefault = require('cssnano-preset-default');
+const { minimatch } = require('minimatch');
+const postcss = require('postcss');
+const pseudoclasses = require('postcss-pseudo-classes');
+const scss = require('postcss-scss');
+const unmq = require('postcss-unmq');
+const unopacity = require('postcss-unopacity');
+const unrgba = require('postcss-unrgba');
 
 /**
  * PostCSS config
@@ -18,58 +18,52 @@ const unrgba = require('postcss-unrgba')
  * @returns {import('postcss-load-config').Config} PostCSS config
  */
 module.exports = (ctx) => {
-  const plugins = []
-  const syntax = ctx.to?.endsWith('.scss') ? scss : postcss
+  const plugins = [];
+  const syntax = ctx.to?.endsWith('.scss') ? scss : postcss;
 
   // PostCSS 'from' (or webpack 'file') source path
   // https://github.com/postcss/postcss-load-config#options
-  const { dir, name } = parse(ctx.from || ctx.file || '')
+  const { dir, name } = parse(ctx.from || ctx.file || '');
 
   // IE8 stylesheets
-  const isIE8 = name?.endsWith('-ie8') || name?.endsWith('-ie8.min')
+  const isIE8 = name?.endsWith('-ie8') || name?.endsWith('-ie8.min');
 
   // Add vendor prefixes
-  plugins.push(autoprefixer({
-    env: isIE8 ? 'oldie' : ctx.env
-  }))
+  plugins.push(
+    autoprefixer({
+      env: isIE8 ? 'oldie' : ctx.env,
+    }),
+  );
 
   // 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/stylesheets')) {
-    plugins.push(pseudoclasses({
-      allCombinations: true,
-      restrictTo: [
-        ':link',
-        ':visited',
-        ':hover',
-        ':active',
-        ':focus'
-      ]
-    }))
-  }
-
-  // Transpile CSS for Internet Explorer
-  if (isIE8) {
     plugins.push(
-      unmq(),
-      unopacity({ browsers: 'ie 8' }),
-      unrgba({ filter: true })
-    )
+      pseudoclasses({
+        allCombinations: true,
+        restrictTo: [':link', ':visited', ':hover', ':active', ':focus'],
+      }),
+    );
   }
 
   // Always minify CSS
   if (syntax !== scss) {
-    plugins.push(cssnano({
-      preset: [cssnanoPresetDefault, {
-        // Sorted CSS is smaller when gzipped, but we sort using Stylelint
-        // https://cssnano.co/docs/optimisations/cssdeclarationsorter/
-        cssDeclarationSorter: false
-      }]
-    }))
+    plugins.push(
+      cssnano({
+        preset: [
+          cssnanoPresetDefault,
+          {
+            // Sorted CSS is smaller when gzipped, but we sort using Stylelint
+            // https://cssnano.co/docs/optimisations/cssdeclarationsorter/
+            cssDeclarationSorter: false,
+          },
+        ],
+      }),
+    );
   }
 
   return {
     syntax,
-    plugins
-  }
-}
+    plugins,
+  };
+};