move CSS build to webpack (#9983)

- added new 'make webpack' target - deprecated 'make js' and 'make css' - extend webpack config to load the less files - updated docs I had to rename the source file of `arc-green.less` to avoid generating a useless JS entrypoint via webpack-fix-style-only-entries which would not work with different source/destination filenames. I hear that there should be cleaner solutions possible once we upgrade to Webpack 5. Co-authored-by: zeripath <art27@cantab.net>
2020-01-28 08:30:39 +01:00 · 2020-01-28 08:30:39 +01:00 · 1019913eab
commit 1019913eab
parent 4377e14304
10 changed files with 89 additions and 426 deletions
--- a/.drone.yml
+++ b/.drone.yml
@ -15,7 +15,7 @@ steps:
    pull: always
    image: node:10 # this step is kept at the lowest version of node that we support
    commands:
-      - make css js
+      - make webpack

  - name: build-without-gcc
    pull: always
--- a/.editorconfig
+++ b/.editorconfig
@ -7,6 +7,9 @@ insert_final_newline = true
 trim_trailing_whitespace = true
 end_of_line = lf

+[*.md]
+trim_trailing_whitespace = false
+
 [*.go]
 indent_style = tab
 indent_size = 8
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -114,15 +114,7 @@ included in the next released version.

 ## Building Gitea

-Generally, the go build tools are installed as-needed in the `Makefile`.
-An exception are the tools to build the CSS, JS and images.
-
- To build CSS and JS: Install [Node.js](https://nodejs.org/en/download/package-manager) at version 10.0 or above
-  with `npm` and then run `npm install`, `make css` and `make js`.
- To build Images: ImageMagick, inkscape and zopflipng binaries must be
-  available in your `PATH` to run `make generate-images`.
-
-For more details on how to generate files, build and test Gitea, see the [hacking instructions](https://docs.gitea.io/en-us/hacking-on-gitea/)
+See the [hacking instructions](https://docs.gitea.io/en-us/hacking-on-gitea/).

 ## Code review

--- a/47
+++ b/47
@ -46,16 +46,13 @@ LDFLAGS := $(LDFLAGS) -X "main.MakeVersion=$(MAKE_VERSION)" -X "main.Version=$(G
 PACKAGES ?= $(filter-out code.gitea.io/gitea/integrations/migration-test,$(filter-out code.gitea.io/gitea/integrations,$(shell GO111MODULE=on $(GO) list -mod=vendor ./... | grep -v /vendor/)))

 GO_SOURCES ?= $(shell find . -name "*.go" -type f)
-JS_SOURCES ?= $(shell find web_src/js web_src/css -type f)
-CSS_SOURCES ?= $(shell find web_src/less -type f)
+WEBPACK_SOURCES ?= $(shell find web_src/js web_src/css web_src/less -type f)

-JS_DEST := public/js/index.js
-CSS_DEST := public/css/index.css
+WEBPACK_DEST := public/js/index.js public/css/index.css
 BINDATA_DEST := modules/public/bindata.go modules/options/bindata.go modules/templates/bindata.go
 BINDATA_HASH := $(addsuffix .hash,$(BINDATA_DEST))

-JS_DEST_DIR := public/js
-CSS_DEST_DIR := public/css
+WEBPACK_DEST_DIRS := public/js public/css
 FOMANTIC_DEST_DIR := public/fomantic

 TAGS ?=
@ -87,9 +84,6 @@ TEST_MSSQL_DBNAME ?= gitea
 TEST_MSSQL_USERNAME ?= sa
 TEST_MSSQL_PASSWORD ?= MwantsaSecurePassword1

-# $(call strip-suffix,filename)
-strip-suffix = $(firstword $(subst ., ,$(1)))
-
 .PHONY: all
 all: build

@ -102,10 +96,9 @@ help:
 	@echo " - build             creates the entire project"
 	@echo " - clean             delete integration files and build files but not css and js files"
 	@echo " - clean-all         delete all generated files (integration test, build, css and js files)"
-	@echo " - css               rebuild only css files"
-	@echo " - js                rebuild only js files"
+	@echo " - webpack           rebuild only js and css files"
 	@echo " - fomantic          rebuild fomantic-ui files"
-	@echo " - generate          run \"make fomantic css js\" and \"go generate\""
+	@echo " - generate          run \"make fomantic webpack\" and \"go generate\""
 	@echo " - fmt               format the code"
 	@echo " - generate-swagger  generate the swagger spec from code comments"
 	@echo " - swagger-validate  check if the swagger spec is valid"
@ -141,7 +134,7 @@ node-check:

 .PHONY: clean-all
 clean-all: clean
-	rm -rf $(JS_DEST_DIR) $(CSS_DEST_DIR) $(FOMANTIC_DEST_DIR)
+	rm -rf $(WEBPACK_DEST_DIRS) $(FOMANTIC_DEST_DIR)

 .PHONY: clean
 clean:
@ -161,7 +154,7 @@ vet:
 	$(GO) vet $(PACKAGES)

 .PHONY: generate
-generate: fomantic js css
+generate: fomantic webpack
 	GO111MODULE=on $(GO) generate -mod=vendor -tags '$(TAGS)' $(PACKAGES)

 .PHONY: generate-swagger
@ -481,6 +474,7 @@ release-compress:

 node_modules: package-lock.json
 	npm install --no-save
+	@touch node_modules

 .PHONY: npm-update
 npm-update: node-check | node_modules
@ -489,12 +483,14 @@ npm-update: node-check | node_modules
 	npm install --package-lock

 .PHONY: js
-js: node-check $(JS_DEST)
+js:
+	@echo "'make js' is deprecated, please use 'make webpack'"
+	$(MAKE) webpack

-$(JS_DEST): $(JS_SOURCES) | node_modules
-	npx eslint web_src/js webpack.config.js
-	npx webpack --hide-modules --display-entrypoints=false
-	@touch $(JS_DEST)
+.PHONY: css
+css:
+	@echo "'make css' is deprecated, please use 'make webpack'"
+	$(MAKE) webpack

 .PHONY: fomantic
 fomantic: node-check $(FOMANTIC_DEST_DIR)
@ -505,15 +501,14 @@ $(FOMANTIC_DEST_DIR): semantic.json web_src/fomantic/theme.config.less | node_mo
 	npx gulp -f node_modules/fomantic-ui/gulpfile.js build
 	@touch $(FOMANTIC_DEST_DIR)

-.PHONY: css
-css: node-check $(CSS_DEST)
+.PHONY: webpack
+webpack: node-check $(WEBPACK_DEST)

-$(CSS_DEST): $(CSS_SOURCES) | node_modules
+$(WEBPACK_DEST): $(WEBPACK_SOURCES) | node_modules
+	npx eslint web_src/js webpack.config.js
 	npx stylelint web_src/less
-	npx lessc web_src/less/index.less public/css/index.css
-	$(foreach file, $(filter-out web_src/less/themes/_base.less, $(wildcard web_src/less/themes/*)),npx lessc web_src/less/themes/$(notdir $(file)) > public/css/theme-$(notdir $(call strip-suffix,$(file))).css;)
-	npx postcss --use autoprefixer --use cssnano --no-map --replace public/css/*
-	@touch $(CSS_DEST)
+	npx webpack --hide-modules --display-entrypoints=false
+	@touch $(WEBPACK_DEST)

 .PHONY: update-translations
 update-translations:
--- a/docs/content/doc/advanced/hacking-on-gitea.en-us.md
+++ b/docs/content/doc/advanced/hacking-on-gitea.en-us.md
@ -140,24 +140,21 @@ You should run revive, vet and spell-check on the code with:
 make revive vet misspell-check
 ```

-### Working on CSS
+### Working on JS and CSS

-Edit files in `web_src/less` and run the linter and build the CSS files via:
+Edit files in `web_src` and run the linter and build the files in `public`:

 ```bash
-make css
-```
-
-### Working on JS
-
-Edit files in `web_src/js`, run the linter and build the JS files via:
-
-```bash
-make js
+make webpack
 ```

 Note: When working on frontend code, it is advisable to set `USE_SERVICE_WORKER` to `false` in `app.ini` which will prevent undesirable caching of frontend assets.

+### Building Images
+
+To build the images, ImageMagick, `inkscape` and `zopflipng` binaries must be available in
+your `PATH` to run `make generate-images`.
+
 ### Updating the API

 When creating new API routes or modifying existing API routes, you **MUST**
--- a/package-lock.json
+++ b/package-lock.json
@ -1493,16 +1493,6 @@
      "resolved": "https://registry.npmjs.org/any-shell-escape/-/any-shell-escape-0.1.1.tgz",
      "integrity": "sha1-1Vq5ciRMcaml4asIefML8RCAaVk="
    },
-    "anymatch": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
-      "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
-      "dev": true,
-      "requires": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      }
-    },
    "append-buffer": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/append-buffer/-/append-buffer-1.0.2.tgz",
@ -1641,12 +1631,6 @@
        }
      }
    },
-    "array-union": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-      "dev": true
-    },
    "array-uniq": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
@ -2019,12 +2003,6 @@
      "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
      "dev": true
    },
-    "binary-extensions": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.0.0.tgz",
-      "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
-      "dev": true
-    },
    "binaryextensions": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binaryextensions/-/binaryextensions-2.2.0.tgz",
@ -2390,22 +2368,6 @@
      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
    },
-    "chokidar": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.3.1.tgz",
-      "integrity": "sha512-4QYCEWOcK3OJrxwvyyAOxFuhpvOVCYkr33LPfFNBjAD/w3sEzWsp2BUOkI4l9bHvWioAd0rc6NlHUOEaWkTeqg==",
-      "dev": true,
-      "requires": {
-        "anymatch": "~3.1.1",
-        "braces": "~3.0.2",
-        "fsevents": "~2.1.2",
-        "glob-parent": "~5.1.0",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.3.0"
-      }
-    },
    "chownr": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.3.tgz",
@ -2500,28 +2462,6 @@
      "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
      "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
    },
-    "cliui": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
-      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
-      "dev": true,
-      "requires": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^6.2.0"
-      },
-      "dependencies": {
-        "strip-ansi": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.0"
-          }
-        }
-      }
-    },
    "clone": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
@ -3458,12 +3398,6 @@
      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
    },
-    "dependency-graph": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.8.1.tgz",
-      "integrity": "sha512-g213uqF8fyk40W8SBjm079n3CZB4qSpCrA2ye1fLGzH/4HEgB6tzuW2CbLE7leb4t45/6h44Ud59Su1/ROTfqw==",
-      "dev": true
-    },
    "deprecation": {
      "version": "2.3.1",
      "resolved": "https://registry.npmjs.org/deprecation/-/deprecation-2.3.1.tgz",
@ -3505,23 +3439,6 @@
        "randombytes": "^2.0.0"
      }
    },
-    "dir-glob": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
-      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
-      "dev": true,
-      "requires": {
-        "path-type": "^4.0.0"
-      },
-      "dependencies": {
-        "path-type": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-          "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
-          "dev": true
-        }
-      }
-    },
    "doctrine": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@ -5074,17 +4991,6 @@
        }
      }
    },
-    "fs-extra": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz",
-      "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^4.0.0",
-        "universalify": "^0.1.0"
-      }
-    },
    "fs-minipass": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.0.0.tgz",
@ -5146,13 +5052,6 @@
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
    },
-    "fsevents": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz",
-      "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==",
-      "dev": true,
-      "optional": true
-    },
    "function-bind": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@ -6098,30 +5997,6 @@
      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
      "dev": true
    },
-    "globby": {
-      "version": "10.0.2",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.2.tgz",
-      "integrity": "sha512-7dUi7RvCoT/xast/o/dLN53oqND4yk0nsHkhRgn9w65C4PofCLOoJ39iSOg+qVDdWQPIEj+eszMHQ+aLVwwQSg==",
-      "dev": true,
-      "requires": {
-        "@types/glob": "^7.1.1",
-        "array-union": "^2.1.0",
-        "dir-glob": "^3.0.1",
-        "fast-glob": "^3.0.3",
-        "glob": "^7.1.3",
-        "ignore": "^5.1.1",
-        "merge2": "^1.2.3",
-        "slash": "^3.0.0"
-      },
-      "dependencies": {
-        "ignore": {
-          "version": "5.1.4",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.4.tgz",
-          "integrity": "sha512-MzbUSahkTW1u7JpKKjY7LCARd1fU5W2rLdxlM4kdkayuCwZImjkpluF9CM1aLewYJguPDqewLam18Y6AU69A8A==",
-          "dev": true
-        }
-      }
-    },
    "globjoin": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
@ -7892,15 +7767,6 @@
      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
    },
-    "is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "requires": {
-        "binary-extensions": "^2.0.0"
-      }
-    },
    "is-buffer": {
      "version": "1.1.6",
      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@ -8360,15 +8226,6 @@
        "minimist": "^1.2.0"
      }
    },
-    "jsonfile": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-      "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
    "jsprim": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@ -8494,6 +8351,17 @@
        }
      }
    },
+    "less-loader": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-5.0.0.tgz",
+      "integrity": "sha512-bquCU89mO/yWLaUq0Clk7qCsKhsF/TZpJUzETRvJa9KSVEL9SO3ovCvdEHISBhrC81OwC8QSVX7E0bzElZj9cg==",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.1",
+        "loader-utils": "^1.1.0",
+        "pify": "^4.0.1"
+      }
+    },
    "leven": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@ -10560,78 +10428,6 @@
        }
      }
    },
-    "postcss-cli": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-7.1.0.tgz",
-      "integrity": "sha512-tCGK0GO2reu644dUHxks8U2SAtKnzftQTAXN1dwzFPoKXZr0b7VX4vTkQ2Pl2Lunas6+o8uHR56hlcYBm1srZg==",
-      "dev": true,
-      "requires": {
-        "chalk": "^3.0.0",
-        "chokidar": "^3.3.0",
-        "dependency-graph": "^0.8.0",
-        "fs-extra": "^8.1.0",
-        "get-stdin": "^7.0.0",
-        "globby": "^10.0.1",
-        "postcss": "^7.0.0",
-        "postcss-load-config": "^2.0.0",
-        "postcss-reporter": "^6.0.0",
-        "pretty-hrtime": "^1.0.3",
-        "read-cache": "^1.0.0",
-        "yargs": "^15.0.2"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
-          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
-          "dev": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true
-        },
-        "supports-color": {
-          "version": "7.1.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
-          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
-          "dev": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
    "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",
@ -11990,23 +11786,6 @@
        "prop-types": "^15.7.2"
      }
    },
-    "read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=",
-      "dev": true,
-      "requires": {
-        "pify": "^2.3.0"
-      },
-      "dependencies": {
-        "pify": {
-          "version": "2.3.0",
-          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true
-        }
-      }
-    },
    "read-pkg": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@ -12083,15 +11862,6 @@
        "util-deprecate": "^1.0.1"
      }
    },
-    "readdirp": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.3.0.tgz",
-      "integrity": "sha512-zz0pAkSPOXXm1viEwygWIPSPkcBYjW1xU5j/JBh5t9bGCJwa6f9+BJa6VaB2g+b55yVrmXzqkyLf4xaWYM0IkQ==",
-      "dev": true,
-      "requires": {
-        "picomatch": "^2.0.7"
-      }
-    },
    "rechoir": {
      "version": "0.6.2",
      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
@ -14832,12 +14602,6 @@
        "os-name": "^3.1.0"
      }
    },
-    "universalify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
-      "dev": true
-    },
    "unquote": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/unquote/-/unquote-1.1.1.tgz",
@ -16550,6 +16314,12 @@
        }
      }
    },
+    "webpack-fix-style-only-entries": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/webpack-fix-style-only-entries/-/webpack-fix-style-only-entries-0.4.0.tgz",
+      "integrity": "sha512-6TDa56V/xSOw6CBVlhFm6J+xXY2oJzx7CEgH0dmex2Xe1rwb95KkLl3rXvSNpO4wyahwD3YnYqffDNR0LH1BNQ==",
+      "dev": true
+    },
    "webpack-sources": {
      "version": "1.4.3",
      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
@ -16625,53 +16395,6 @@
        "errno": "~0.1.7"
      }
    },
-    "wrap-ansi": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
-      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
-      "dev": true,
-      "requires": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
-          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "dev": true,
-          "requires": {
-            "@types/color-name": "^1.1.1",
-            "color-convert": "^2.0.1"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true
-        },
-        "strip-ansi": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^5.0.0"
-          }
-        }
-      }
-    },
    "wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@ -16752,71 +16475,6 @@
        "glob": "^7.0.5"
      }
    },
-    "yargs": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.1.0.tgz",
-      "integrity": "sha512-T39FNN1b6hCW4SOIk1XyTOWxtXdcen0t+XYrysQmChzSipvhBO8Bj0nK1ozAasdk24dNWuMZvr4k24nz+8HHLg==",
-      "dev": true,
-      "requires": {
-        "cliui": "^6.0.0",
-        "decamelize": "^1.2.0",
-        "find-up": "^4.1.0",
-        "get-caller-file": "^2.0.1",
-        "require-directory": "^2.1.1",
-        "require-main-filename": "^2.0.0",
-        "set-blocking": "^2.0.0",
-        "string-width": "^4.2.0",
-        "which-module": "^2.0.0",
-        "y18n": "^4.0.0",
-        "yargs-parser": "^16.1.0"
-      },
-      "dependencies": {
-        "find-up": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-          "dev": true,
-          "requires": {
-            "locate-path": "^5.0.0",
-            "path-exists": "^4.0.0"
-          }
-        },
-        "locate-path": {
-          "version": "5.0.0",
-          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-          "dev": true,
-          "requires": {
-            "p-locate": "^4.1.0"
-          }
-        },
-        "p-locate": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-          "dev": true,
-          "requires": {
-            "p-limit": "^2.2.0"
-          }
-        },
-        "path-exists": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-          "dev": true
-        }
-      }
-    },
-    "yargs-parser": {
-      "version": "16.1.0",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-16.1.0.tgz",
-      "integrity": "sha512-H/V41UNZQPkUMIT5h5hiwg4QKIY1RPvoBV4XcjUbRM8Bk2oKqqyZ0DIEbTFZB0XjbtSPG8SAa/0DxCQmiRgzKg==",
-      "dev": true,
-      "requires": {
-        "camelcase": "^5.0.0",
-        "decamelize": "^1.2.0"
-      }
-    },
    "zenscroll": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/zenscroll/-/zenscroll-4.0.2.tgz",
--- a/package.json
+++ b/package.json
@ -17,7 +17,6 @@
    "@babel/plugin-transform-runtime": "7.7.6",
    "@babel/preset-env": "7.7.7",
    "@babel/runtime": "7.7.7",
-    "autoprefixer": "9.7.3",
    "babel-loader": "8.0.6",
    "core-js": "3.6.2",
    "css-loader": "3.4.1",
@ -25,10 +24,10 @@
    "eslint": "6.8.0",
    "eslint-config-airbnb-base": "14.0.0",
    "eslint-plugin-import": "2.19.1",
-    "less": "3.10.3",
+    "fast-glob": "3.1.1",
+    "less-loader": "5.0.0",
    "mini-css-extract-plugin": "0.9.0",
    "optimize-css-assets-webpack-plugin": "5.0.3",
-    "postcss-cli": "7.1.0",
    "postcss-loader": "3.0.0",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "4.0.1",
@ -39,7 +38,8 @@
    "vue-loader": "15.8.3",
    "vue-template-compiler": "2.6.11",
    "webpack": "4.41.5",
-    "webpack-cli": "3.3.10"
+    "webpack-cli": "3.3.10",
+    "webpack-fix-style-only-entries": "0.4.0"
  },
  "browserslist": [
    "defaults"
--- a/web_src/less/themes/_base.less
+++ b/web_src/less/themes/_base.less
@ -1,3 +0,0 @@
-// TODO: Instead of having each theme file define each
-//       CSS/LESS item in this file and then overide
-//       in the theme files
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@ -1,5 +1,3 @@
-@import "_base";
-
 .hljs {
    display: block;
    overflow-x: auto;
--- a/webpack.config.js
+++ b/webpack.config.js
@ -1,23 +1,38 @@
-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 fastGlob = require('fast-glob');
+const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
 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');
+const PostCSSSafeParser = require('postcss-safe-parser');
+const TerserPlugin = require('terser-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const { resolve, parse } = require('path');
+const { SourceMapDevToolPlugin } = require('webpack');
+
+const themes = {};
+for (const path of fastGlob.sync(resolve(__dirname, 'web_src/less/themes/*.less'))) {
+  themes[parse(path).name] = [path];
+}

 module.exports = {
  mode: 'production',
  entry: {
-    index: ['./web_src/js/index'],
-    swagger: ['./web_src/js/swagger'],
-    jquery: ['./web_src/js/jquery'],
+    index: [
+      resolve(__dirname, 'web_src/js/index.js'),
+      resolve(__dirname, 'web_src/less/index.less'),
+    ],
+    swagger: [
+      resolve(__dirname, 'web_src/js/swagger.js'),
+    ],
+    jquery: [
+      resolve(__dirname, 'web_src/js/jquery.js'),
+    ],
+    ...themes,
  },
  devtool: false,
  output: {
-    path: path.resolve(__dirname, 'public'),
+    path: resolve(__dirname, 'public'),
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].js',
  },
@ -88,7 +103,7 @@ module.exports = {
        ],
      },
      {
-        test: /\.css$/i,
+        test: /\.(less|css)$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
@ -96,7 +111,8 @@ module.exports = {
          {
            loader: 'css-loader',
            options: {
-              importLoaders: 1,
+              importLoaders: 2,
+              url: false,
            }
          },
          {
@ -107,12 +123,19 @@ module.exports = {
              ],
            },
          },
+          {
+            loader: 'less-loader',
+          },
        ],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
+    // needed so themes don't generate useless js files
+    new FixStyleOnlyEntriesPlugin({
+      silent: true,
+    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: 'css/[name].css',