From 1019913eaba0e8ad3a67174a1a13c673ee832406 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 28 Jan 2020 08:30:39 +0100
Subject: [PATCH] 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>
---
.drone.yml | 2 +-
.editorconfig | 3 +
CONTRIBUTING.md | 10 +-
Makefile | 47 +--
.../doc/advanced/hacking-on-gitea.en-us.md | 19 +-
package-lock.json | 376 +-----------------
package.json | 8 +-
web_src/less/themes/_base.less | 3 -
.../{arc-green.less => theme-arc-green.less} | 2 -
webpack.config.js | 45 ++-
10 files changed, 89 insertions(+), 426 deletions(-)
delete mode 100644 web_src/less/themes/_base.less
rename web_src/less/themes/{arc-green.less => theme-arc-green.less} (99%)
diff --git a/.drone.yml b/.drone.yml
index 716e7b1d5..5796ad503 100644
--- 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
diff --git a/.editorconfig b/.editorconfig
index ff5c1b2d4..15a88a14e 100644
--- 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
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 460152297..48d072d88 100644
--- 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
diff --git a/Makefile b/Makefile
index ecdc5dac3..e02da3e89 100644
--- a/Makefile
+++ b/Makefile
@@ -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:
diff --git a/docs/content/doc/advanced/hacking-on-gitea.en-us.md b/docs/content/doc/advanced/hacking-on-gitea.en-us.md
index fd7e96268..fdccdf192 100644
--- 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**
diff --git a/package-lock.json b/package-lock.json
index e879bfe40..39c35a526 100644
--- 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",
diff --git a/package.json b/package.json
index 5a10c1041..506fcde6e 100644
--- 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"
diff --git a/web_src/less/themes/_base.less b/web_src/less/themes/_base.less
deleted file mode 100644
index e339a6fa8..000000000
--- a/web_src/less/themes/_base.less
+++ /dev/null
@@ -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
diff --git a/web_src/less/themes/arc-green.less b/web_src/less/themes/theme-arc-green.less
similarity index 99%
rename from web_src/less/themes/arc-green.less
rename to web_src/less/themes/theme-arc-green.less
index 3ac35570b..a40c2fc1a 100644
--- a/web_src/less/themes/arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -1,5 +1,3 @@
-@import "_base";
-
.hljs {
display: block;
overflow-x: auto;
diff --git a/webpack.config.js b/webpack.config.js
index 356627b03..0a37ddb70 100644
--- 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',