postcss-athena-spritesmith

Generate sprites from stylesheets Just For Athena.

Usage no npm install needed!

<script type="module">
  import postcssAthenaSpritesmith from 'https://cdn.skypack.dev/postcss-athena-spritesmith';
</script>

README

postcss-athena-spritesmith

针对Athena订制的CSS雪碧图工具，源码改自postcss-sprite

  • 增加了只对?__sprite后缀的样式做雪碧图处理
  • 修复了Athena的层级依赖关系

Install

npm install postcss-athena-spritesmith -D

How To Use

gulpfile.js

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var sprites = require('postcss-sprites');
var opts = {
  stylesheetPath: modulePath + '/dist/_static/css/',
  spritePath: modulePath + '/dist/_static/images/sprite.png',
  retina: true,
  verbose: true
}
gulp.src( modulePath + '/dist/_static/css' )
    .pipe(postcss(sprites(opts)))
    .dest( modulePath + '/dist/_static/css' )

source.css

直接在需要合并雪碧图的CSS的url图片带?__sprite后缀即可

/* 请确保需要合并雪碧图的后缀带有`?__sprite` */
body {
  background: url('images/ball.png?__sprite'); 
}

h1 {
 background-image: url('images/help.png?__sprite');
}

ball.png and help.png

ball.png

help.png

output.min.css

body,h1{background-image:url(../images/sprite.png)}
body{background-position:-104px 0;background-repeat:no-repeat;}
h1{background-position:0 0;background-repeat:no-repeat;}

sprite.png

sprite.png