add make targets for js and css, add js linter (go-gitea#6952)

* add make targets for js,css, add javascript linter

- add `make js`, deprecating `make javascripts`
- add `make css`, deprecating `make generate-stylesheets` and
  `make stylesheets-check`
- changed the unclean css check to only run on CI
- add JS linting via eslint with basic configuration and fixed
  discovered issues
- changed autoprefixer to use official `postcss-cli` avoiding the need
  to loop in the makefile
- moved browserslist to package.json so other future tools can use it
  too.
- update documentation for new make targets and added JS section

* fix indentation

* move functions used in html to 'exported' list

* Run lessc binary without having to install anything to node_modules

* use relative paths to node bin scripts, removing npx

* Revert "use relative paths to node bin scripts, removing npx"

This reverts commit 119b725.

* fix lessc and postcss plugins

* check for node_modules and use actual bin names

.drone.yml

@@ -50,7 +50,8 @@ pipeline:
     pull: true
     commands:
       - npm install
-      - make stylesheets-check
+      - make css
+      - make js
     when:
       event: [ push, tag, pull_request ]
 

.eslintrc

@@ -0,0 +1,25 @@
+root: true
+
+extends:
+  - eslint:recommended
+
+parserOptions:
+  ecmaVersion: 2015
+
+env:
+  browser: true
+  jquery: true
+  es6: true
+
+globals:
+  Clipboard: false
+  CodeMirror: false
+  emojify: false
+  SimpleMDE: false
+  Vue: false
+  Dropzone: false
+  u2fApi: false
+  hljs: false
+
+rules:
+  no-unused-vars: [error, {args: all, argsIgnorePattern: ^_, varsIgnorePattern: ^_, ignoreRestSiblings: true}]

CONTRIBUTING.md

@@ -65,17 +65,17 @@ high-level discussions.
 ## Testing redux
 
 Before submitting a pull request, run all the tests for the whole tree
-to make sure your changes don't cause regression elsewhere.  
+to make sure your changes don't cause regression elsewhere.
 
-Here's how to run the test suite: 
+Here's how to run the test suite:
 
 - Install the correct version of the drone-cli package.  As of this
   writing, the correct drone-cli version is
   [0.8.6](https://0-8-0.docs.drone.io/cli-installation/).
 - Ensure you have enough free disk space.  You will need at least
   15-20 Gb of free disk space to hold all of the containers drone
   creates (a default AWS or GCE disk size won't work -- see
-  [#6243](https://github.com/go-gitea/gitea/issues/6243)).  
+  [#6243](https://github.com/go-gitea/gitea/issues/6243)).
 - Change into the base directory of your copy of the gitea repository,
   and run `drone exec --local --build-event pull_request`.
 
@@ -114,7 +114,7 @@ Generally, the go build tools are installed as-needed in the `Makefile`.
 An exception are the tools to build the CSS and images.
 
 - To build CSS: Install [Node.js](https://nodejs.org/en/download/package-manager) at version 8.0 or above
-  with `npm` and then run `npm install` and `make generate-stylesheets`.
+  with `npm` and then run `npm install` and `make css`.
 - To build Images: ImageMagick, inkscape and zopflipng binaries must be
   available in your `PATH` to run `make generate-images`.
 
@@ -214,7 +214,7 @@ to the maintainers team. If a maintainer is inactive for more than 3
 months and forgets to leave the maintainers team, the owners may move
 him or her from the maintainers team to the advisors team.
 For security reasons, Maintainers should use 2FA for their accounts and
-if possible provide gpg signed commits. 
+if possible provide gpg signed commits.
 https://help.github.com/articles/securing-your-account-with-two-factor-authentication-2fa/
 https://help.github.com/articles/signing-commits-with-gpg/
 
@@ -281,7 +281,7 @@ be reviewed by two maintainers and must pass the automatic tests.
   * Create `-dev` tag as `git tag -s -F release.notes v$vmaj.$vmin.0-dev` and push the tag as `git push origin v$vmaj.$vmin.0-dev`.
   * When CI has finished building tag then you have to create a new branch named `release/v$vmaj.$vmin`
 * If it is bugfix version create PR for changelog on branch `release/v$vmaj.$vmin` and wait till it is reviewed and merged.
-* Add a tag as `git tag -s -F release.notes v$vmaj.$vmin.$`, release.notes file could be a temporary file to only include the changelog this version which you added to `CHANGELOG.md`. 
+* Add a tag as `git tag -s -F release.notes v$vmaj.$vmin.$`, release.notes file could be a temporary file to only include the changelog this version which you added to `CHANGELOG.md`.
 * And then push the tag as `git push origin v$vmaj.$vmin.$`. Drone CI will automatically created a release and upload all the compiled binary. (But currently it didn't add the release notes automatically. Maybe we should fix that.)
 * If needed send PR for changelog on branch `master`.
 * Send PR to [blog repository](https://github.com/go-gitea/blog) announcing the release.

Makefile

@@ -365,33 +365,55 @@ release-compress:
 	fi
 	cd $(DIST)/release/; for file in `find . -type f -name "*"`; do echo "compressing $${file}" && gxz -k -9 $${file}; done;
 
-.PHONY: javascripts
-javascripts: public/js/index.js
-
-.IGNORE: public/js/index.js
-public/js/index.js: $(JAVASCRIPTS)
-	cat $< >| $@
-
-.PHONY: stylesheets-check
-stylesheets-check: generate-stylesheets
-	@diff=$$(git diff public/css/*); \
-	if [ -n "$$diff" ]; then \
-		echo "Please run 'make generate-stylesheets' and commit the result:"; \
-		echo "$${diff}"; \
+.PHONY: js
+js:
+	@if ([ ! -d "$(PWD)/node_modules" ]); then \
+		echo "node_modules directory is absent, please run 'npm install' first"; \
 		exit 1; \
 	fi;
+	@hash npx > /dev/null 2>&1; if [ $$? -ne 0 ]; then \
+		echo "Please install npm version 5.2+"; \
+		exit 1; \
+	fi;
+	npx eslint public/js
 
-.PHONY: generate-stylesheets
-generate-stylesheets:
+.PHONY: css
+css:
+	@if ([ ! -d "$(PWD)/node_modules" ]); then \
+		echo "node_modules directory is absent, please run 'npm install' first"; \
+		exit 1; \
+	fi;
 	@hash npx > /dev/null 2>&1; if [ $$? -ne 0 ]; then \
 		echo "Please install npm version 5.2+"; \
 		exit 1; \
 	fi;
-	$(eval BROWSERS := "> 1%, last 2 firefox versions, last 2 safari versions, ie 11")
-	npx lesshint  public/less/
+
+	npx lesshint public/less/
 	npx lessc --clean-css="--s0 -b" public/less/index.less public/css/index.css
 	$(foreach file, $(filter-out public/less/themes/_base.less, $(wildcard public/less/themes/*)),npx lessc --clean-css="--s0 -b" public/less/themes/$(notdir $(file)) > public/css/theme-$(notdir $(call strip-suffix,$(file))).css;)
-	$(foreach file, $(wildcard public/css/*),npx postcss --use autoprefixer --autoprefixer.browsers $(BROWSERS) -o $(file) $(file);)
+	npx postcss --use autoprefixer --no-map --replace public/css/*
+
+	@diff=$$(git diff public/css/*); \
+	if ([ ! -z "$CI" ] && [ -n "$$diff" ]); then \
+		echo "Generated files in public/css have changed, please commit the result:"; \
+		echo "$${diff}"; \
+		exit 1; \
+	fi;
+
+.PHONY: javascripts
+javascripts:
+	echo "'make javascripts' is deprecated, please use 'make js'"
+	$(MAKE) js
+
+.PHONY: stylesheets-check
+stylesheets-check:
+	echo "'make stylesheets-check' is deprecated, please use 'make css'"
+	$(MAKE) css
+
+.PHONY: generate-stylesheets
+generate-stylesheets:
+	echo "'make generate-stylesheets' is deprecated, please use 'make css'"
+	$(MAKE) css
 
 .PHONY: swagger-ui
 swagger-ui:

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

@@ -136,30 +136,36 @@ You should lint, vet and spell-check with:
 make vet lint misspell-check
 ```
 
-### Updating the stylesheets
+### Updating CSS
 
-To generate the stylsheets, you will need [Node.js](https://nodejs.org/) at version 8.0 or above.
+To generate the CSS, you will need [Node.js](https://nodejs.org/) 8.0 or greater and the build dependencies:
 
-At present we use [less](http://lesscss.org/) and [postcss](https://postcss.org) to generate our stylesheets. Do
-**not** edit the files in `public/css/` directly, as they are generated from
-`lessc` from the files in `public/less/`.
+```bash
+npm install
+```
 
-If you wish to work on the stylesheets, you will need to install `lessc` the
-less compiler and `postcss`. The recommended way to do this is using `npm install`:
+At present we use [less](http://lesscss.org/) and [postcss](https://postcss.org) to generate our CSS. Do
+**not** edit the files in `public/css` directly, as they are generated from `lessc` from the files in `public/less`.
+
+Edit files in `public/less`, run the linter, regenerate the CSS and commit all changed files:
 
 ```bash
-cd "$GOPATH/src/code.gitea.io/gitea"
-npm install
+make css
 ```
 
-You can then edit the less stylesheets and regenerate the stylesheets using:
+### Updating JS
+
+To run the JavaScript linter you will need [Node.js](https://nodejs.org/) 8.0 or greater and the build dependencies:
 
 ```bash
-make generate-stylesheets
+npm install
 ```
 
-You should commit both the changes to the css and the less files when making
-PRs.
+Edit files in `public/js` and run the linter:
+
+```bash
+make js
+```
 
 ### Updating the API