Use SASS for CSS + static asset reoganization

Had been planning to use a more powerful preprocessor for CSS for a
while, so that I can also reorganize and clean up the CSS a bit. The
cleanup will come later, this is the first step to reorganize the build
system a bit and remove skingen.pl.

I moved all generated static assets to static/g/ (for _g_enerated),
including icons.png and js files. This simplifies management of
static/f/ and static/s/, which are fully in git.

Skins are now defined as sass files in css/skins/ with their images in
static/s/ using plain directory structure.

1 files changed, 24 insertions, 28 deletions

diff --git a/Makefile b/Makefile
index 9f87f2f8..ad99c196 100644
--- a/Makefile
+++ b/Makefile
@@ -3,7 +3,6 @@
 #
 # prod
 #   Create static assets for production. Requires the following additional dependencies:
-#   - CSS::Minifier::XS
 #   - uglifyjs
 #   - zopfli
 #
@@ -24,32 +23,32 @@
 
 ALL_KEEP=\
 	static/ch static/cv static/sf static/st \
-	data/log static/f www www/api \
+	data/log static/g www www/api \
 	data/conf.pl \
 	www/robots.txt static/robots.txt
 
 ALL_CLEAN=\
-	static/f/vndb.js \
-	static/f/plain.js \
-	static/f/elm.js \
+	static/g/vndb.js \
+	static/g/plain.js \
+	static/g/elm.js \
 	data/icons/icons.css \
 	sql/editfunc.sql \
-	$(shell ls static/s | sed -e 's/\(.\+\)/static\/s\/\1\/style.css/g')
+	$(shell ls css/skins/*.sass | sed -e 's/css\/skins\/\(.\+\)\.sass/static\/g\/\1.css/g')
 
 PROD=\
-	static/f/vndb.min.js static/f/vndb.min.js.gz \
-	static/f/plain.min.js static/f/plain.min.js.gz \
-	static/f/elm.min.js static/f/elm.min.js.gz \
-	static/f/icons.opt.png \
-	$(shell ls static/s | sed -e 's/\(.\+\)/static\/s\/\1\/style.min.css/g') \
-	$(shell ls static/s | sed -e 's/\(.\+\)/static\/s\/\1\/style.min.css.gz/g')
+	static/g/vndb.min.js static/g/vndb.min.js.gz \
+	static/g/plain.min.js static/g/plain.min.js.gz \
+	static/g/elm.min.js static/g/elm.min.js.gz \
+	static/g/icons.opt.png \
+	$(shell ls css/skins/*.sass | sed -e 's/css\/skins\/\(.\+\)\.sass/static\/g\/\1.css.gz/g')
 
 all: ${ALL_KEEP} ${ALL_CLEAN}
 prod: all ${PROD}
 
 clean:
 	rm -f ${ALL_CLEAN} ${PROD}
-	rm -f static/f/icons.png
+	rm -f static/g/icons.png
+	rm -f static/f/{vndb,elm,plain}{,.min}.js{,.gz} static/f/icons{,.opt}.png static/s/*/style{,.min}.css{,.gz} static/s/*/boxbg.png
 	rm -rf elm/Gen/
 	rm -rf elm/elm-stuff/build-artifacts
 	$(MAKE) -C sql/c clean
@@ -64,7 +63,7 @@ static/ch static/cv static/sf static/st:
 	mkdir -p $@;
 	for i in $$(seq -w 0 1 99); do mkdir -p "$@/$$i"; done
 
-data/log www www/api static/f:
+data/log www www/api static/g:
 	mkdir -p $@
 
 data/conf.pl:
@@ -84,29 +83,26 @@ chmod: all
 
 # v2 & v2-rw
 
-data/icons/icons.css: data/icons/*.png data/icons/*/*.png util/spritegen.pl | static/f
+data/icons/icons.css: data/icons/*.png data/icons/*/*.png util/spritegen.pl | static/g
 	util/spritegen.pl
 
-static/f/icons.png: data/icons/icons.css
+static/g/icons.png: data/icons/icons.css
 
-static/f/icons.opt.png: static/f/icons.png
+static/g/icons.opt.png: static/g/icons.png
 	rm -f $@
 	zopflipng -m --lossy_transparent $< $@
 
-static/s/%/style.css: static/s/%/conf util/skingen.pl data/style.css data/icons/icons.css
-	util/skingen.pl $*
-
-static/s/%/style.min.css: static/s/%/style.css
-	perl -MCSS::Minifier::XS -e 'undef $$/; print CSS::Minifier::XS::minify(scalar <>)' <$< >$@
+static/g/%.css: css/skins/%.sass css/v2.css data/icons/icons.css | static/g
+	( echo '$$version: "$(shell git show-ref --head --abbrev -s HEAD)";'; echo '@import "css/skins/$*"' ) | sassc --stdin -I. --style compressed >$@
 
 
 
 # v2
 
-static/f/vndb.js: data/js/*.js lib/VNDB/Types.pm util/jsgen.pl data/conf.pl | static/f
+static/g/vndb.js: data/js/*.js lib/VNDB/Types.pm util/jsgen.pl data/conf.pl | static/g
 	util/jsgen.pl
 
-static/f/vndb.min.js: static/f/vndb.js
+static/g/vndb.min.js: static/g/vndb.js
 	uglifyjs $< --compress --mangle --comments '/(@license|@source|SPDX-)/' -o $@
 
 
@@ -118,7 +114,7 @@ static/f/vndb.min.js: static/f/vndb.js
 # (This trick will not work if we ever add JS files generated by this Makefile)
 JS_FILES=$(shell find elm \! -path 'elm/elm-stuff/*' -name '*.js' -exec sh -c "echo \`grep -Eo '^// *order: *[0-9]+' \"{}\" || echo 4\` \"{}\"" \; | sed -E 's/\/\/ *order: *//' | sort | sed 's/..//')
 
-static/f/plain.js: ${JS_FILES} | static/f
+static/g/plain.js: ${JS_FILES} | static/f
 	echo '// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0-only' > $@~
 	echo '// @source: https://code.blicky.net/yorhel/vndb/src/branch/master/elm' >>$@~
 	echo '// SPDX-License-Identifier: AGPL-3.0-only' >>$@~
@@ -131,7 +127,7 @@ static/f/plain.js: ${JS_FILES} | static/f
 	echo '// @license-end' >>$@~
 	mv $@~ $@
 
-static/f/plain.min.js: static/f/plain.js
+static/g/plain.min.js: static/g/plain.js
 	uglifyjs $< --comments '/(@license|@source|SPDX-)/' --compress \
 		'pure_getters,keep_fargs=false,unsafe_comps,unsafe'\
 		| uglifyjs --mangle --comments all -o $@
@@ -161,11 +157,11 @@ endef
 elm/Gen/.generated: lib/VNWeb/*.pm lib/VNWeb/*/*.pm lib/VNDB/Types.pm lib/VNDB/ExtLinks.pm lib/VNDB/Config.pm data/conf.pl
 	util/vndb.pl elmgen
 
-static/f/elm.js: ${ELM_FILES} elm/Gen/.generated | static/f
+static/g/elm.js: ${ELM_FILES} elm/Gen/.generated | static/f
 	cd elm && ELM_HOME=elm-stuff elm make ${ELM_MODULES} --output ../$@
 	${fix-elm}
 
-static/f/elm.min.js: ${ELM_FILES} elm/Gen/.generated | static/f
+static/g/elm.min.js: ${ELM_FILES} elm/Gen/.generated | static/f
 	cd elm && ELM_HOME=elm-stuff elm make --optimize ${ELM_MODULES} --output ../$@
 	${fix-elm}
 	uglifyjs $@ --comments '/(@license|@source|SPDX-)/' --compress \