move CSS build to webpack

- 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.

Author: silverwind

.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

.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

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
 

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:

docs/content/doc/advanced/hacking-on-gitea.en-us.md

@@ -140,23 +140,20 @@ 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
+make webpack
 ```
 
-### Working on JS
+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.
 
-Edit files in `web_src/js`, run the linter and build the JS files via:
+### Building Images
 
-```bash
-make js
-```
-
-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.
+To build the images, ImageMagick, `inkscape` and `zopflipng` binaries must be available in
+your `PATH` to run `make generate-images`.
 
 ### Updating the API