scss: add support for embedding images as data URIs (#17305)

Makefile

@@ -5,7 +5,10 @@ prefix = /usr
 
 all: icons css
 
-css:
+data_uris:
+	python make_data_uris.py static/includes/
+
+css: data_uris
 	cd static/alfortville/ && sass style.scss:style.css
 	cd static/amiens/ && sass style.scss:style.css
 	cd static/bron/ && sass style.scss:style.css
@@ -73,10 +76,12 @@ icons:
 clean:
 	rm -rf sdist
 	rm -f src/tmp-*.svg
+	rm -f static/*/_data_uris.scss
 
 DIST_FILES = \
 	Makefile \
 	desc.xml template.py \
+	make_data_uris.py \
 	static templates themes.json \
 	src
 

make_data_uris.py

@@ -0,0 +1,25 @@
+#! /usr/bin/env python
+
+import base64
+import os
+import sys
+
+os.chdir(sys.argv[1])
+
+data_uris = []
+for filename in os.listdir('img/'):
+    varname, filetype = os.path.splitext(filename)
+    mimetype = {
+        '.png': 'image/png',
+        '.svg': 'image/svg+xml'
+    }.get(filetype)
+    if not mimetype:
+        continue
+    filesize = os.stat('img/' + filename).st_size
+    if filesize > 10000:
+        continue
+    filecontent = open('img/' + filename).read()
+    b64 = base64.encodestring(filecontent).replace('\n', '')
+    data_uris.append('$data_uri_%(varname)s: "data:%(mimetype)s;base64,%(b64)s";' % locals())
+
+open('_data_uris.scss', 'w').write('\n'.join(data_uris))

static/includes/_forms.scss

@@ -1,3 +1,5 @@
+@import 'data_uris';
+
 $button-background: #37a7da !default;
 $button-color: text-color($button-background) !default;
 $button-border: 1px solid transparent !default;
@@ -108,7 +110,7 @@ select {
 	background: white;
 	@include vendor-prefix('appearance', 'none');
 	padding-right: 4em;
-	background-image: url("../img/arrow-down.svg");
+	background-image: url($data_uri_arrow-down);
 	background-position: right 1.3rem center;
 	background-repeat: no-repeat;
 	background-size: 1rem auto;