ONL-5955: Update to postcss8

.github/dependabot.yml

@@ -27,21 +27,3 @@ updates:
   - dependency-name: cypress
     versions:
     - ">= 6"
-  - dependency-name: "@fullhuman/postcss-purgecss"
-    versions:
-    - ">= 3.1"
-  - dependency-name: purgecss
-    versions:
-    - ">= 3.1"
-  - dependency-name: autoprefixer
-    versions:
-    - ">= 10"
-  - dependency-name: postcss-nested
-    versions:
-    - ">= 5"
-  - dependency-name: postcss-import
-    versions:
-    - ">= 13"
-  - dependency-name: postcss-mixins
-    versions:
-    - ">= 7"

.storybook/main.js

@@ -12,12 +12,17 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-knobs',
     '@storybook/addon-links',
-    '@storybook/addon-postcss',
+    {
+      name: '@storybook/addon-postcss',
+      options: {
+        postcssLoaderOptions: {
+          // eslint-disable-next-line global-require
+          implementation: require('postcss'),
+        },
+      },
+    },
   ],
   webpackFinal: (config) => {
-    config.resolve.alias = {
-      ...config.resolve.alias,
-    };
     config.module.rules.push({
       test: /\.story\.jsx?$/,
       loaders: [require.resolve('@storybook/source-loader')],

.storybook/preview.js

@@ -15,9 +15,10 @@ import hotpinkTheme from '!!raw-loader!../src/styles/themes/hotpink.css';
 import config from '../src/config';
 
 import '../src/styles/themes/blue.css';
-import '../src/styles/main.css';
+// eslint-disable-next-line import/no-webpack-loader-syntax
+import '!!style-loader!css-loader!postcss-loader!../src/styles/main.css';
 
-config.sensitiveClass = 'tw-filter-blur-4';
+config.sensitiveClass = 'tw-filter tw-blur-4';
 
 export const parameters = {
   viewMode: 'docs',