From 1019913eaba0e8ad3a67174a1a13c673ee832406 Mon Sep 17 00:00:00 2001 From: silverwind 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 --- .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 716e7b1d59..5796ad503a 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 ff5c1b2d41..15a88a14eb 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 4601522970..48d072d880 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 ecdc5dac3a..e02da3e893 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 fd7e962687..fdccdf1921 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 e879bfe40d..39c35a526b 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 5a10c10418..506fcde6e2 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 e339a6fa8e..0000000000 --- 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 3ac35570bb..a40c2fc1a5 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 356627b03b..0a37ddb70c 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',