add css extraction and minification to webpack (#9944)

This changes the CSS output of webpack to output to the public/css directory instead of inling CSS in JS. This enables CSS minification and autoprefixer based on browserslist which would otherwise not be possible. The result of this change is two new output files currently: - public/css/swagger.css - public/css/gitgraph.css Co-authored-by: techknowlogick <matti@mdranta.net>
2025-10-31 21:28:11 +09:00 · 2020-01-25 09:41:34 +01:00
parent 89f7dcb13d
commit 5b17bb8f3d
6 changed files with 690 additions and 57 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -836,6 +836,12 @@
      "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-3.1.0.tgz",
      "integrity": "sha512-GcIY79elgB+azP74j8vqkiXz8xLFfIzbQJdlwOPisgbKT00tviJQuEghOXSMVxJ00HoYJbGswr4kcllUc4xCcg=="
    },
+    "@csstools/convert-colors": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
+      "integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==",
+      "dev": true
+    },
    "@kyleshockey/object-assign-deep": {
      "version": "0.4.2",
      "resolved": "https://registry.npmjs.org/@kyleshockey/object-assign-deep/-/object-assign-deep-0.4.2.tgz",
@@ -2972,6 +2978,15 @@
        }
      }
    },
+    "css-blank-pseudo": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz",
+      "integrity": "sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.5"
+      }
+    },
    "css-color-names": {
      "version": "0.0.4",
      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -2988,6 +3003,35 @@
        "timsort": "^0.3.0"
      }
    },
+    "css-has-pseudo": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-0.10.0.tgz",
+      "integrity": "sha512-Z8hnfsZu4o/kt+AuFzeGpLVhFOGO9mluyHBaA2bA8aCGTwah5sT3WV/fTHH8UNZUytOIImuGPrl/prlb4oX4qQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.6",
+        "postcss-selector-parser": "^5.0.0-rc.4"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^2.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
    "css-loader": {
      "version": "3.4.1",
      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.4.1.tgz",
@@ -3008,6 +3052,15 @@
        "schema-utils": "^2.6.0"
      }
    },
+    "css-prefers-color-scheme": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz",
+      "integrity": "sha512-MTu6+tMs9S3EUqzmqLXEcgNRbNkkD/TGFvowpeoWJn5Vfq7FMgsmRQs9X5NXAURiOBmOxm/lLjsDNXDE6k9bhg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.5"
+      }
+    },
    "css-select": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
@@ -3061,6 +3114,12 @@
      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
      "integrity": "sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s="
    },
+    "cssdb": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-4.4.0.tgz",
+      "integrity": "sha512-LsTAR1JPEM9TpGhl/0p3nQecC2LJ0kD8X5YARu1hk/9I1gril5vDtMZyNxcEpxxDj34YNck/ucjuoUd66K03oQ==",
+      "dev": true
+    },
    "cssesc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -4733,6 +4792,12 @@
      "integrity": "sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==",
      "dev": true
    },
+    "flatten": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
+      "integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==",
+      "dev": true
+    },
    "flush-write-stream": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
@@ -8332,6 +8397,16 @@
      "integrity": "sha512-Vi3nxDGMm/z+lAaCjvAR1u+7fiv+sG6gU/iYDj5QOF8h76ytK9EW/EKfF0NeTyiGBi8Jy6Hklty/vxISrLox3w==",
      "dev": true
    },
+    "last-call-webpack-plugin": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/last-call-webpack-plugin/-/last-call-webpack-plugin-3.0.0.tgz",
+      "integrity": "sha512-7KI2l2GIZa9p2spzPIVZBYyNKkN+e/SQPpnjlTiPhdbDW3F86tdKKELxKpzJ5sgU19wQWsACULZmpTPYHeWO5w==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.5",
+        "webpack-sources": "^1.1.0"
+      }
+    },
    "last-run": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/last-run/-/last-run-1.1.1.tgz",
@@ -9339,6 +9414,43 @@
      "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
      "dev": true
    },
+    "mini-css-extract-plugin": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
+      "integrity": "sha512-lp3GeY7ygcgAmVIcRPBVhIkf8Us7FZjA+ILpal44qLdSu11wmjKQ3d9k15lfD7pO4esu9eUIAW7qiYIBppv40A==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "normalize-url": "1.9.1",
+        "schema-utils": "^1.0.0",
+        "webpack-sources": "^1.1.0"
+      },
+      "dependencies": {
+        "normalize-url": {
+          "version": "1.9.1",
+          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
+          "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=",
+          "dev": true,
+          "requires": {
+            "object-assign": "^4.0.1",
+            "prepend-http": "^1.0.0",
+            "query-string": "^4.1.0",
+            "sort-keys": "^1.0.0"
+          }
+        },
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
    "minimalistic-assert": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -9932,6 +10044,16 @@
        "mimic-fn": "^2.1.0"
      }
    },
+    "optimize-css-assets-webpack-plugin": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/optimize-css-assets-webpack-plugin/-/optimize-css-assets-webpack-plugin-5.0.3.tgz",
+      "integrity": "sha512-q9fbvCRS6EYtUKKSwI87qm2IxlyJK5b4dygW1rKUBT6mMDhdG5e5bZT63v6tnJR9F9FB/H5a0HTmtw+laUBxKA==",
+      "dev": true,
+      "requires": {
+        "cssnano": "^4.1.10",
+        "last-call-webpack-plugin": "^3.0.0"
+      }
+    },
    "optionator": {
      "version": "0.8.3",
      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz",
@@ -10372,6 +10494,35 @@
        }
      }
    },
+    "postcss-attribute-case-insensitive": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-4.0.1.tgz",
+      "integrity": "sha512-L2YKB3vF4PetdTIthQVeT+7YiSzMoNMLLYxPXXppOOP7NoazEAy45sh2LvJ8leCQjfBcfkYQs8TtCcQjeZTp8A==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^2.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
    "postcss-calc": {
      "version": "7.0.1",
      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-7.0.1.tgz",
@@ -10481,6 +10632,58 @@
        }
      }
    },
+    "postcss-color-functional-notation": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-2.0.1.tgz",
+      "integrity": "sha512-ZBARCypjEDofW4P6IdPVTLhDNXPRn8T2s1zHbZidW6rPaaZvcnCS2soYFIQJrMZSxiePJ2XIYTlcb2ztr/eT2g==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-color-gray": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-color-gray/-/postcss-color-gray-5.0.0.tgz",
+      "integrity": "sha512-q6BuRnAGKM/ZRpfDascZlIZPjvwsRye7UDNalqVz3s7GDxMtqPY6+Q871liNxsonUw8oC61OG+PSaysYpl1bnw==",
+      "dev": true,
+      "requires": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^7.0.5",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-color-hex-alpha": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-color-hex-alpha/-/postcss-color-hex-alpha-5.0.3.tgz",
+      "integrity": "sha512-PF4GDel8q3kkreVXKLAGNpHKilXsZ6xuu+mOQMHWHLPNyjiUBOr75sp5ZKJfmv1MCus5/DWUGcK9hm6qHEnXYw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.14",
+        "postcss-values-parser": "^2.0.1"
+      }
+    },
+    "postcss-color-mod-function": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-color-mod-function/-/postcss-color-mod-function-3.0.3.tgz",
+      "integrity": "sha512-YP4VG+xufxaVtzV6ZmhEtc+/aTXH3d0JLpnYfxqTvwZPbJhWqp8bSY3nfNzNRFLgB4XSaBA82OE4VjOOKpCdVQ==",
+      "dev": true,
+      "requires": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-color-rebeccapurple": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-4.0.1.tgz",
+      "integrity": "sha512-aAe3OhkS6qJXBbqzvZth2Au4V3KieR5sRQ4ptb2b2O8wgvB3SJBsdG+jsn2BZbbwekDG8nTfcCNKcSfe/lEy8g==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
    "postcss-colormin": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-4.0.3.tgz",
@@ -10520,6 +10723,83 @@
        }
      }
    },
+    "postcss-custom-media": {
+      "version": "7.0.8",
+      "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-7.0.8.tgz",
+      "integrity": "sha512-c9s5iX0Ge15o00HKbuRuTqNndsJUbaXdiNsksnVH8H4gdc+zbLzr/UasOwNG6CTDpLFekVY4672eWdiiWu2GUg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.14"
+      }
+    },
+    "postcss-custom-properties": {
+      "version": "8.0.11",
+      "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz",
+      "integrity": "sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.17",
+        "postcss-values-parser": "^2.0.1"
+      }
+    },
+    "postcss-custom-selectors": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-5.1.2.tgz",
+      "integrity": "sha512-DSGDhqinCqXqlS4R7KGxL1OSycd1lydugJ1ky4iRXPHdBRiozyMHrdu0H3o7qNOCiZwySZTUI5MV0T8QhCLu+w==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0-rc.3"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^2.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
+    "postcss-dir-pseudo-class": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-5.0.0.tgz",
+      "integrity": "sha512-3pm4oq8HYWMZePJY+5ANriPs3P07q+LW6FAdTlkFH2XqDdP4HeeJYMOzn0HYLhRSjBO3fhiqSwwU9xEULSrPgw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0-rc.3"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^2.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
    "postcss-discard-comments": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-4.0.2.tgz",
@@ -10556,6 +10836,62 @@
        "postcss": "^7.0.0"
      }
    },
+    "postcss-double-position-gradients": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-1.0.0.tgz",
+      "integrity": "sha512-G+nV8EnQq25fOI8CH/B6krEohGWnF5+3A6H/+JEpOncu5dCnkS1QQ6+ct3Jkaepw1NGVqqOZH6lqrm244mCftA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.5",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-env-function": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-env-function/-/postcss-env-function-2.0.2.tgz",
+      "integrity": "sha512-rwac4BuZlITeUbiBq60h/xbLzXY43qOsIErngWa4l7Mt+RaSkT7QBjXVGTcBHupykkblHMDrBFh30zchYPaOUw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-focus-visible": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-visible/-/postcss-focus-visible-4.0.0.tgz",
+      "integrity": "sha512-Z5CkWBw0+idJHSV6+Bgf2peDOFf/x4o+vX/pwcNYrWpXFrSfTkQ3JQ1ojrq9yS+upnAlNRHeg8uEwFTgorjI8g==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-focus-within": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-focus-within/-/postcss-focus-within-3.0.0.tgz",
+      "integrity": "sha512-W0APui8jQeBKbCGZudW37EeMCjDeVxKgiYfIIEo8Bdh5SpB9sxds/Iq8SEuzS0Q4YFOlG7EPFulbbxujpkrV2w==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-font-variant": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-4.0.0.tgz",
+      "integrity": "sha512-M8BFYKOvCrI2aITzDad7kWuXXTm0YhGdP9Q8HanmN4EF1Hmcgs1KK5rSHylt/lUJe8yLxiSwWAHdScoEiIxztg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-gap-properties": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-2.0.0.tgz",
+      "integrity": "sha512-QZSqDaMgXCHuHTEzMsS2KfVDOq7ZFiknSpkrPJY6jmxbugUPTuSzs/vuE5I3zv0WAS+3vhrlqhijiprnuQfzmg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
    "postcss-html": {
      "version": "0.36.0",
      "resolved": "https://registry.npmjs.org/postcss-html/-/postcss-html-0.36.0.tgz",
@@ -10565,6 +10901,26 @@
        "htmlparser2": "^3.10.0"
      }
    },
+    "postcss-image-set-function": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-image-set-function/-/postcss-image-set-function-3.0.1.tgz",
+      "integrity": "sha512-oPTcFFip5LZy8Y/whto91L9xdRHCWEMs3e1MdJxhgt4jy2WYXfhkng59fH5qLXSCPN8k4n94p1Czrfe5IOkKUw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-initial": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-3.0.2.tgz",
+      "integrity": "sha512-ugA2wKonC0xeNHgirR4D3VWHs2JcU08WAi1KFLVcnb7IN89phID6Qtg2RIctWbnvp1TM2BOmDtX8GGLCKdR8YA==",
+      "dev": true,
+      "requires": {
+        "lodash.template": "^4.5.0",
+        "postcss": "^7.0.2"
+      }
+    },
    "postcss-jsx": {
      "version": "0.36.3",
      "resolved": "https://registry.npmjs.org/postcss-jsx/-/postcss-jsx-0.36.3.tgz",
@@ -10574,6 +10930,17 @@
        "@babel/core": ">=7.2.2"
      }
    },
+    "postcss-lab-function": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-2.0.1.tgz",
+      "integrity": "sha512-whLy1IeZKY+3fYdqQFuDBf8Auw+qFuVnChWjmxm/UhHWqNHZx+B99EwxTvGYmUBqe3Fjxs4L1BoZTJmPu6usVg==",
+      "dev": true,
+      "requires": {
+        "@csstools/convert-colors": "^1.4.0",
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
    "postcss-less": {
      "version": "3.1.4",
      "resolved": "https://registry.npmjs.org/postcss-less/-/postcss-less-3.1.4.tgz",
@@ -10593,6 +10960,40 @@
        "import-cwd": "^2.0.0"
      }
    },
+    "postcss-loader": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-3.0.0.tgz",
+      "integrity": "sha512-cLWoDEY5OwHcAjDnkyRQzAXfs2jrKjXpO/HQFcc5b5u/r7aa471wdmChmwfnv7x2u840iat/wi0lQ5nbRgSkUA==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.1.0",
+        "postcss": "^7.0.0",
+        "postcss-load-config": "^2.0.0",
+        "schema-utils": "^1.0.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
+          "integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
+          "dev": true,
+          "requires": {
+            "ajv": "^6.1.0",
+            "ajv-errors": "^1.0.0",
+            "ajv-keywords": "^3.1.0"
+          }
+        }
+      }
+    },
+    "postcss-logical": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-3.0.0.tgz",
+      "integrity": "sha512-1SUKdJc2vuMOmeItqGuNaC+N8MzBWFWEkAnRnLpFYj1tGGa7NqyVBujfRtgNa2gXR+6RkGUiB2O5Vmh7E2RmiA==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
    "postcss-markdown": {
      "version": "0.36.0",
      "resolved": "https://registry.npmjs.org/postcss-markdown/-/postcss-markdown-0.36.0.tgz",
@@ -10603,6 +11004,15 @@
        "unist-util-find-all-after": "^1.0.2"
      }
    },
+    "postcss-media-minmax": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-4.0.0.tgz",
+      "integrity": "sha512-fo9moya6qyxsjbFAYl97qKO9gyre3qvbMnkOZeZwlsW6XYFsvs2DMGDlchVLfAd8LHPZDxivu/+qW2SMQeTHBw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
    "postcss-media-query-parser": {
      "version": "0.2.3",
      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
@@ -10782,6 +11192,15 @@
        "postcss": "^7.0.6"
      }
    },
+    "postcss-nesting": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-7.0.1.tgz",
+      "integrity": "sha512-FrorPb0H3nuVq0Sff7W2rnc3SmIcruVC6YwpcS+k687VxyxO33iE1amna7wHuRVzM8vfiYofXSBHNAZ3QhLvYg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
    "postcss-normalize-charset": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",
@@ -10964,6 +11383,108 @@
        }
      }
    },
+    "postcss-overflow-shorthand": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-2.0.0.tgz",
+      "integrity": "sha512-aK0fHc9CBNx8jbzMYhshZcEv8LtYnBIRYQD5i7w/K/wS9c2+0NSR6B3OVMu5y0hBHYLcMGjfU+dmWYNKH0I85g==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-page-break": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-2.0.0.tgz",
+      "integrity": "sha512-tkpTSrLpfLfD9HvgOlJuigLuk39wVTbbd8RKcy8/ugV2bNBUW3xU+AIqyxhDrQr1VUj1RmyJrBn1YWrqUm9zAQ==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-place": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-place/-/postcss-place-4.0.1.tgz",
+      "integrity": "sha512-Zb6byCSLkgRKLODj/5mQugyuj9bvAAw9LqJJjgwz5cYryGeXfFZfSXoP1UfveccFmeq0b/2xxwcTEVScnqGxBg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-values-parser": "^2.0.0"
+      }
+    },
+    "postcss-preset-env": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-6.7.0.tgz",
+      "integrity": "sha512-eU4/K5xzSFwUFJ8hTdTQzo2RBLbDVt83QZrAvI07TULOkmyQlnYlpwep+2yIK+K+0KlZO4BvFcleOCCcUtwchg==",
+      "dev": true,
+      "requires": {
+        "autoprefixer": "^9.6.1",
+        "browserslist": "^4.6.4",
+        "caniuse-lite": "^1.0.30000981",
+        "css-blank-pseudo": "^0.1.4",
+        "css-has-pseudo": "^0.10.0",
+        "css-prefers-color-scheme": "^3.1.1",
+        "cssdb": "^4.4.0",
+        "postcss": "^7.0.17",
+        "postcss-attribute-case-insensitive": "^4.0.1",
+        "postcss-color-functional-notation": "^2.0.1",
+        "postcss-color-gray": "^5.0.0",
+        "postcss-color-hex-alpha": "^5.0.3",
+        "postcss-color-mod-function": "^3.0.3",
+        "postcss-color-rebeccapurple": "^4.0.1",
+        "postcss-custom-media": "^7.0.8",
+        "postcss-custom-properties": "^8.0.11",
+        "postcss-custom-selectors": "^5.1.2",
+        "postcss-dir-pseudo-class": "^5.0.0",
+        "postcss-double-position-gradients": "^1.0.0",
+        "postcss-env-function": "^2.0.2",
+        "postcss-focus-visible": "^4.0.0",
+        "postcss-focus-within": "^3.0.0",
+        "postcss-font-variant": "^4.0.0",
+        "postcss-gap-properties": "^2.0.0",
+        "postcss-image-set-function": "^3.0.1",
+        "postcss-initial": "^3.0.0",
+        "postcss-lab-function": "^2.0.1",
+        "postcss-logical": "^3.0.0",
+        "postcss-media-minmax": "^4.0.0",
+        "postcss-nesting": "^7.0.0",
+        "postcss-overflow-shorthand": "^2.0.0",
+        "postcss-page-break": "^2.0.0",
+        "postcss-place": "^4.0.1",
+        "postcss-pseudo-class-any-link": "^6.0.0",
+        "postcss-replace-overflow-wrap": "^3.0.0",
+        "postcss-selector-matches": "^4.0.0",
+        "postcss-selector-not": "^4.0.0"
+      }
+    },
+    "postcss-pseudo-class-any-link": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-6.0.0.tgz",
+      "integrity": "sha512-lgXW9sYJdLqtmw23otOzrtbDXofUdfYzNm4PIpNE322/swES3VU9XlXHeJS46zT2onFO7V1QFdD4Q9LiZj8mew==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2",
+        "postcss-selector-parser": "^5.0.0-rc.3"
+      },
+      "dependencies": {
+        "cssesc": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz",
+          "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==",
+          "dev": true
+        },
+        "postcss-selector-parser": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz",
+          "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^2.0.0",
+            "indexes-of": "^1.0.1",
+            "uniq": "^1.0.1"
+          }
+        }
+      }
+    },
    "postcss-reduce-initial": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
@@ -10996,6 +11517,15 @@
        }
      }
    },
+    "postcss-replace-overflow-wrap": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-3.0.0.tgz",
+      "integrity": "sha512-2T5hcEHArDT6X9+9dVSPQdo7QHzG4XKclFT8rU5TzJPDN7RIRTbO9c4drUISOVemLj03aezStHCR2AIcr8XLpw==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.2"
+      }
+    },
    "postcss-reporter": {
      "version": "6.0.1",
      "resolved": "https://registry.npmjs.org/postcss-reporter/-/postcss-reporter-6.0.1.tgz",
@@ -11042,6 +11572,26 @@
        "postcss": "^7.0.0"
      }
    },
+    "postcss-selector-matches": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-matches/-/postcss-selector-matches-4.0.0.tgz",
+      "integrity": "sha512-LgsHwQR/EsRYSqlwdGzeaPKVT0Ml7LAT6E75T8W8xLJY62CE4S/l03BWIt3jT8Taq22kXP08s2SfTSzaraoPww==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "postcss": "^7.0.2"
+      }
+    },
+    "postcss-selector-not": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-not/-/postcss-selector-not-4.0.0.tgz",
+      "integrity": "sha512-W+bkBZRhqJaYN8XAnbbZPLWMvZD1wKTu0UxtFKdhtGjWYmxhkUneoeOhRJKdAE5V7ZTlnbHfCR+6bNwK9e1dTQ==",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^1.0.0",
+        "postcss": "^7.0.2"
+      }
+    },
    "postcss-selector-parser": {
      "version": "6.0.2",
      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz",
@@ -11095,12 +11645,29 @@
      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz",
      "integrity": "sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ=="
    },
+    "postcss-values-parser": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz",
+      "integrity": "sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==",
+      "dev": true,
+      "requires": {
+        "flatten": "^1.0.2",
+        "indexes-of": "^1.0.1",
+        "uniq": "^1.0.1"
+      }
+    },
    "prelude-ls": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
      "dev": true
    },
+    "prepend-http": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
+      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
+      "dev": true
+    },
    "prettier": {
      "version": "1.19.1",
      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
@@ -11250,6 +11817,16 @@
      "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
      "integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA=="
    },
+    "query-string": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+      "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.0",
+        "strict-uri-encode": "^1.0.0"
+      }
+    },
    "querystring": {
      "version": "0.2.0",
      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
@@ -12464,6 +13041,15 @@
        }
      }
    },
+    "sort-keys": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
+      "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
+      "dev": true,
+      "requires": {
+        "is-plain-obj": "^1.0.0"
+      }
+    },
    "source-list-map": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -12733,6 +13319,12 @@
      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz",
      "integrity": "sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ=="
    },
+    "strict-uri-encode": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
+      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
+      "dev": true
+    },
    "string-width": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz",
@@ -12872,16 +13464,6 @@
      "integrity": "sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==",
      "dev": true
    },
-    "style-loader": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.1.2.tgz",
-      "integrity": "sha512-0Mpq1ZHFDCNq1F+6avNBgv+7q8V+mWRuzehxyJT+aKgzyN/yfKTwjYqaYwBgx+11UpQxL21zNQfzzlz+JcGURw==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^1.2.3",
-        "schema-utils": "^2.0.1"
-      }
-    },
    "style-search": {
      "version": "0.1.0",
      "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -26,8 +26,12 @@
    "eslint-config-airbnb-base": "14.0.0",
    "eslint-plugin-import": "2.19.1",
    "less": "3.10.3",
+    "mini-css-extract-plugin": "0.9.0",
+    "optimize-css-assets-webpack-plugin": "5.0.3",
    "postcss-cli": "7.1.0",
-    "style-loader": "1.1.2",
+    "postcss-loader": "3.0.0",
+    "postcss-preset-env": "6.7.0",
+    "postcss-safe-parser": "4.0.1",
    "stylelint": "12.0.1",
    "stylelint-config-standard": "19.0.0",
    "terser-webpack-plugin": "2.3.2",
--- a/templates/pwa/serviceworker_js.tmpl
+++ b/templates/pwa/serviceworker_js.tmpl
@@ -1,36 +1,38 @@
 var STATIC_CACHE = 'static-cache-v1';
 var urlsToCache = [
  // js
-  '{{StaticUrlPrefix}}/vendor/plugins/jquery.areyousure/jquery.are-you-sure.js',
  '{{StaticUrlPrefix}}/fomantic/semantic.min.js?v={{MD5 AppVer}}',
+  '{{StaticUrlPrefix}}/js/gitgraph.js',
  '{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}',
-  '{{StaticUrlPrefix}}/js/swagger.js?v={{MD5 AppVer}}',
-  '{{StaticUrlPrefix}}/js/gitgraph.js?v={{MD5 AppVer}}',
  '{{StaticUrlPrefix}}/js/jquery.js?v={{MD5 AppVer}}',
+  '{{StaticUrlPrefix}}/js/swagger.js?v={{MD5 AppVer}}',
  '{{StaticUrlPrefix}}/vendor/plugins/clipboard/clipboard.min.js',
-  '{{StaticUrlPrefix}}/vendor/plugins/vue/vue.min.js',
-  '{{StaticUrlPrefix}}/vendor/plugins/emojify/emojify.custom.js',
-  '{{StaticUrlPrefix}}/vendor/plugins/cssrelpreload/loadCSS.min.js',
-  '{{StaticUrlPrefix}}/vendor/plugins/cssrelpreload/cssrelpreload.min.js',
-  '{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.js',
-  '{{StaticUrlPrefix}}/vendor/plugins/highlight/highlight.pack.js',
-  '{{StaticUrlPrefix}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.js',
-  '{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js',
  '{{StaticUrlPrefix}}/vendor/plugins/codemirror/addon/mode/loadmode.js',
  '{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/cssrelpreload/cssrelpreload.min.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/cssrelpreload/loadCSS.min.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/emojify/emojify.custom.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/highlight/highlight.pack.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/jquery.areyousure/jquery.are-you-sure.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js',
  '{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.js',
+  '{{StaticUrlPrefix}}/vendor/plugins/vue/vue.min.js',

  // css
+  '{{StaticUrlPrefix}}/css/gitgraph.css',
+  '{{StaticUrlPrefix}}/css/index.css?v={{MD5 AppVer}}',
+  '{{StaticUrlPrefix}}/css/swagger.css?v={{MD5 AppVer}}',
+  '{{StaticUrlPrefix}}/fomantic/semantic.min.css?v={{MD5 AppVer}}',
  '{{StaticUrlPrefix}}/vendor/assets/font-awesome/css/font-awesome.min.css',
  '{{StaticUrlPrefix}}/vendor/assets/octicons/octicons.min.css',
+  '{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.css',
+  '{{StaticUrlPrefix}}/vendor/plugins/highlight/github.css',
+  '{{StaticUrlPrefix}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.css',
+  '{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css',
  '{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.css',
  '{{StaticUrlPrefix}}/vendor/plugins/tribute/tribute.css',
-  '{{StaticUrlPrefix}}/fomantic/semantic.min.css?v={{MD5 AppVer}}',
-  '{{StaticUrlPrefix}}/css/index.css?v={{MD5 AppVer}}',
-  '{{StaticUrlPrefix}}/vendor/plugins/highlight/github.css',
-  '{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css',
-  '{{StaticUrlPrefix}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.css',
-  '{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.css',
 {{if .IsSigned }}
 	{{ if ne .SignedUser.Theme "gitea" }}
 		'{{StaticUrlPrefix}}/css/theme-{{.SignedUser.Theme}}.css?v={{MD5 AppVer}}',
--- a/templates/swagger/ui.tmpl
+++ b/templates/swagger/ui.tmpl
@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="UTF-8">
 		<title>Gitea API</title>
+		<link href="{{StaticUrlPrefix}}/css/swagger.css?v={{MD5 AppVer}}" rel="stylesheet">
 		<style>
 			html {
 			  box-sizing: border-box;
--- a/web_src/js/publicPath.js
+++ b/web_src/js/publicPath.js
@@ -1,12 +1,11 @@
-/* This sets up webpack's chunk loading to load resources from the same
-  directory where it loaded index.js from. This file must be imported
-  before any lazy-loading is being attempted. */
+/* This sets up webpack's chunk loading to load resources from the 'public'
+  directory. This file must be imported before any lazy-loading is being attempted. */

 if (document.currentScript && document.currentScript.src) {
  const url = new URL(document.currentScript.src);
-  __webpack_public_path__ = `${url.pathname.replace(/\/[^/]*$/, '')}/`;
+  __webpack_public_path__ = url.pathname.replace(/\/[^/]*?\/[^/]*?$/, '/');
 } else {
  // compat: IE11
  const script = document.querySelector('script[src*="/index.js"]');
-  __webpack_public_path__ = `${script.getAttribute('src').replace(/\/[^/]*$/, '')}/`;
+  __webpack_public_path__ = script.getAttribute('src').replace(/\/[^/]*?\/[^/]*?$/, '/');
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -2,6 +2,11 @@ const path = require('path');
 const TerserPlugin = require('terser-webpack-plugin');
 const { SourceMapDevToolPlugin } = require('webpack');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const cssnano = require('cssnano');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const PostCSSSafeParser = require('postcss-safe-parser');
+const PostCSSPresetEnv = require('postcss-preset-env');

 module.exports = {
  mode: 'production',
@@ -12,13 +17,14 @@ module.exports = {
  },
  devtool: false,
  output: {
-    path: path.resolve(__dirname, 'public/js'),
-    filename: '[name].js',
-    chunkFilename: '[name].js',
+    path: path.resolve(__dirname, 'public'),
+    filename: 'js/[name].js',
+    chunkFilename: 'js/[name].js',
  },
  optimization: {
    minimize: true,
-    minimizer: [new TerserPlugin({
+    minimizer: [
+      new TerserPlugin({
        sourceMap: true,
        extractComments: false,
        terserOptions: {
@@ -26,14 +32,31 @@ module.exports = {
            comments: false,
          },
        },
-    })],
+      }),
+      new OptimizeCSSAssetsPlugin({
+        cssProcessor: cssnano,
+        cssProcessorOptions: {
+          parser: PostCSSSafeParser,
+        },
+        cssProcessorPluginOptions: {
+          preset: [
+            'default',
+            {
+              discardComments: {
+                removeAll: true,
+              },
+            },
+          ],
+        },
+      }),
+    ],
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        exclude: /node_modules/,
-        loader: 'vue-loader'
+        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
@@ -48,8 +71,8 @@ module.exports = {
                  {
                    useBuiltIns: 'usage',
                    corejs: 3,
-                  }
-                ]
+                  },
+                ],
              ],
              plugins: [
                [
@@ -60,24 +83,46 @@ module.exports = {
                ],
                '@babel/plugin-proposal-object-rest-spread',
              ],
-            }
+            },
          },
        ],
      },
      {
        test: /\.css$/i,
-        use: ['style-loader', 'css-loader'],
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
          },
-    ]
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 1,
+            }
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: () => [
+                PostCSSPresetEnv(),
+              ],
+            },
+          },
+        ],
+      },
+    ],
  },
  plugins: [
    new VueLoaderPlugin(),
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].css',
+      chunkFilename: 'css/[name].css',
+    }),
    new SourceMapDevToolPlugin({
-      filename: '[name].js.map',
+      filename: 'js/[name].js.map',
      exclude: [
-        'gitgraph.js',
-        'jquery.js',
-        'swagger.js',
+        'js/gitgraph.js',
+        'js/jquery.js',
+        'js/swagger.js',
      ],
    }),
  ],
@@ -85,10 +130,10 @@ module.exports = {
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
    assetFilter: (filename) => {
-      return !filename.endsWith('.map') && filename !== 'swagger.js';
-    }
+      return !filename.endsWith('.map') && filename !== 'js/swagger.js';
+    },
  },
  resolve: {
    symlinks: false,
-  }
+  },
 };