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.

.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