Rewrite the sprites CSS builder with XQuery

This makes the CSS file 3 times lighter (1.8KB→0.6KB)
This commit is contained in:
~lucidiot 2023-10-13 02:04:03 +02:00
parent 852326c558
commit 79daa5d690
2 changed files with 20 additions and 1 deletions

View File

@ -16,5 +16,5 @@ img/sprites.png: $(sprites)
chmod a+r $@
css/sprites.css: img/sprites.png
find img/sprites -mindepth 1 -maxdepth 1 -type f -name '*.png' -printf '%f\n' | sort | awk '{ sub(/\.png$$/, ""); print ".icon-" $$0 " {\n\tdisplay: inline-block;\n\tposition: relative;\n\ttop: 4px;\n\tmargin-right: 2px;\n\tbackground-image: url(../img/sprites.png);\n\twidth: 16px;\n\theight: 16px;\n\tbackground-position: " (-(NR-1)*16) "px;\n}" }' > $@
xidel --silent --extract-kind=xquery3 --extract-file=xquery/build_sprites_css.xqy > $@
chmod a+r $@

View File

@ -0,0 +1,19 @@
xquery version "3.0" encoding "utf-8";
let $sprites :=
for $file in file:children(file:resolve-path("./img/sprites/"))
where ends-with($file, ".png")
order by $file
return concat(".icon-", substring-before(file:name($file), ".png"))
return concat(
(: Styles that apply to all icons at once :)
string-join($sprites, ", "),
" { display: inline-block; position: relative; top: 4px; margin-right: 2px; background-image: url(../img/sprites.png); width: 16px; height: 16px; }",
(: Add an offset for the position of each sprite within the image :)
string-join(
for $sprite in $sprites
count $i
return concat($sprite, " { background-position: ", -($i - 1)*16, "px; }")
)
)