Update JS dependencies (#12782)

- Update all dependencies
- Add explicit postcss dependency as dictated by postcss-loader
- Adapt for new postcss-loader syntax
- Move sourceMap options to top for consistency

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

package.json

@@ -10,29 +10,30 @@
     "@babel/preset-env": "7.11.5",
     "@babel/runtime": "7.11.2",
     "@claviska/jquery-minicolors": "2.3.5",
-    "@primer/octicons": "10.1.0",
+    "@primer/octicons": "11.0.0",
     "add-asset-webpack-plugin": "1.0.0",
     "babel-loader": "8.1.0",
     "clipboard": "2.0.6",
     "core-js": "3.6.5",
-    "css-loader": "4.2.2",
+    "css-loader": "4.3.0",
     "css-minimizer-webpack-plugin": "1.1.3",
     "dropzone": "5.7.2",
     "escape-goat": "3.0.0",
     "fast-glob": "3.2.4",
     "file-loader": "6.1.0",
-    "fomantic-ui": "2.8.6",
+    "fomantic-ui": "2.8.7",
     "font-awesome": "4.7.0",
     "jquery": "3.5.1",
     "jquery.are-you-sure": "1.9.0",
     "less": "3.12.2",
     "less-loader": "7.0.1",
     "license-webpack-plugin": "2.3.0",
-    "mermaid": "8.7.0",
+    "mermaid": "8.8.0",
-    "mini-css-extract-plugin": "0.11.0",
+    "mini-css-extract-plugin": "0.11.1",
     "monaco-editor": "0.20.0",
     "monaco-editor-webpack-plugin": "1.9.0",
-    "postcss-loader": "3.0.0",
+    "postcss": "7.0.32",
+    "postcss-loader": "4.0.1",
     "postcss-preset-env": "6.7.0",
     "raw-loader": "4.0.1",
     "sortablejs": "1.10.2",
@@ -47,8 +48,8 @@
     "webpack": "4.44.1",
     "webpack-cli": "3.3.12",
     "webpack-fix-style-only-entries": "0.5.1",
-    "workbox-routing": "5.1.3",
+    "workbox-routing": "5.1.4",
-    "workbox-strategies": "5.1.3",
+    "workbox-strategies": "5.1.4",
     "worker-loader": "3.0.2",
     "wrap-ansi": "7.0.0"
   },

semantic.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.8.6",
+  "version": "2.8.7",
   "base": "node_modules/fomantic-ui",
   "paths": {
     "source": {

webpack.config.js

@@ -5,7 +5,6 @@ const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
-const PostCSSPresetEnv = require('postcss-preset-env');
 const TerserPlugin = require('terser-webpack-plugin');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const {statSync} = require('fs');
@@ -13,12 +12,6 @@ const {resolve, parse} = require('path');
 const {LicenseWebpackPlugin} = require('license-webpack-plugin');
 const {SourceMapDevToolPlugin} = require('webpack');
 
-const postCssPresetEnvConfig = {
-  features: {
-    'system-ui-font-family': false,
-  }
-};
-
 const glob = (pattern) => fastGlob.sync(pattern, {cwd: __dirname, absolute: true});
 
 const themes = {};
@@ -133,6 +126,7 @@ module.exports = {
           {
             loader: 'babel-loader',
             options: {
+              sourceMaps: true,
               cacheDirectory: true,
               cacheCompression: false,
               cacheIdentifier: [
@@ -140,7 +134,6 @@ module.exports = {
                 resolve(__dirname, 'package-lock.json'),
                 resolve(__dirname, 'webpack.config.js'),
               ].map((path) => statSync(path).mtime.getTime()).join(':'),
-              sourceMaps: true,
               presets: [
                 [
                   '@babel/preset-env',
@@ -174,19 +167,28 @@ module.exports = {
           {
             loader: 'css-loader',
             options: {
+              sourceMap: true,
               importLoaders: 1,
               url: filterCssImport,
               import: filterCssImport,
-              sourceMap: true,
             },
           },
           {
             loader: 'postcss-loader',
             options: {
-              plugins: () => [
-                PostCSSPresetEnv(postCssPresetEnvConfig),
-              ],
               sourceMap: true,
+              postcssOptions: {
+                plugins: [
+                  [
+                    'postcss-preset-env',
+                    {
+                      features: {
+                        'system-ui-font-family': false,
+                      },
+                    },
+                  ],
+                ],
+              },
             },
           },
         ],
@@ -200,19 +202,28 @@ module.exports = {
           {
             loader: 'css-loader',
             options: {
+              sourceMap: true,
               importLoaders: 2,
               url: filterCssImport,
               import: filterCssImport,
-              sourceMap: true,
             },
           },
           {
             loader: 'postcss-loader',
             options: {
-              plugins: () => [
-                PostCSSPresetEnv(postCssPresetEnvConfig),
-              ],
               sourceMap: true,
+              postcssOptions: {
+                plugins: [
+                  [
+                    'postcss-preset-env',
+                    {
+                      features: {
+                        'system-ui-font-family': false,
+                      },
+                    },
+                  ],
+                ],
+              },
             },
           },
           {