Update postcss packages

(cherry picked from commit 408089957ab8a9dc6a21b485853b9d86a9ace59f)

frontend/build/webpack.config.js

@@ -21,14 +21,6 @@ module.exports = (env) => {
   console.log('isProduction:', isProduction);
   console.log('isProfiling:', isProfiling);
 
-  const cssVarsFiles = [
-    '../src/Styles/Variables/colors',
-    '../src/Styles/Variables/dimensions',
-    '../src/Styles/Variables/fonts',
-    '../src/Styles/Variables/animations',
-    '../src/Styles/Variables/zIndexes'
-  ].map(require.resolve);
-
   const config = {
     mode: isProduction ? 'production' : 'development',
     devtool: 'source-map',
@@ -203,12 +195,8 @@ module.exports = (env) => {
             {
               loader: 'postcss-loader',
               options: {
-                ident: 'postcss',
-                config: {
-                  ctx: {
-                    cssVarsFiles
-                  },
-                  path: 'frontend/postcss.config.js'
+                postcssOptions: {
+                  config: 'frontend/postcss.config.js'
                 }
               }
             }

frontend/postcss.config.js

@@ -1,23 +1,32 @@
 const reload = require('require-nocache')(module);
 
-module.exports = (ctx, configPath, options) => {
-  const config = {
-    plugins: {
-      'postcss-mixins': {
-        mixinsDir: [
-          'frontend/src/Styles/Mixins'
-        ]
-      },
-      'postcss-simple-vars': {
-        variables: () =>
-          ctx.options.cssVarsFiles.reduce((acc, vars) => {
-            return Object.assign(acc, reload(vars));
-          }, {})
-      },
-      'postcss-color-function': {},
-      'postcss-nested': {}
-    }
-  };
+const cssVarsFiles = [
+  './src/Styles/Variables/colors',
+  './src/Styles/Variables/dimensions',
+  './src/Styles/Variables/fonts',
+  './src/Styles/Variables/animations',
+  './src/Styles/Variables/zIndexes'
+].map(require.resolve);
 
-  return config;
-};
+const mixinsFiles = [
+  'frontend/src/Styles/Mixins/cover.css',
+  'frontend/src/Styles/Mixins/linkOverlay.css',
+  'frontend/src/Styles/Mixins/scroller.css',
+  'frontend/src/Styles/Mixins/truncate.css'
+];
+
+module.exports = {
+  plugins: [
+    ['postcss-mixins', {
+      mixinsFiles
+    }],
+    ['postcss-simple-vars', {
+      variables: () =>
+        cssVarsFiles.reduce((acc, vars) => {
+          return Object.assign(acc, reload(vars));
+        }, {})
+    }],
+    'postcss-color-function',
+    'postcss-nested'
+  ]
+};

frontend/src/Styles/Mixins/scroller.css

@@ -6,7 +6,7 @@
 }
 
 @define-mixin scrollbarTrack {
-  &&::-webkit-scrollbar-track {
+  &::-webkit-scrollbar-track {
     background-color: transparent;
   }
 }