Rewrite the sprites CSS builder with XQuery
This makes the CSS file 3 times lighter (1.8KB→0.6KB)
This commit is contained in:
parent
852326c558
commit
79daa5d690
2
Makefile
2
Makefile
|
@ -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 $@
|
||||
|
|
19
xquery/build_sprites_css.xqy
Normal file
19
xquery/build_sprites_css.xqy
Normal 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; }")
|
||||
)
|
||||
)
|
Loading…
Reference in New Issue
Block a user