soundasleep / spritify
A CSS processor to generate spritesheets
Requires
- php: >=5.2.3
Requires (Dev)
- phpunit/phpunit: ~4.0
- soundasleep/component-tests: dev-master
This package is auto-updated.
Last update: 2024-10-14 09:23:10 UTC
README
A simple PHP script that can be used to process a CSS stylesheet, perform some basic optimisation, and generate a spritesheet of all sprites used in that stylesheet.
NOTE This project is very experimental - feel free to report any issues or bugs.
Requirements
PHP, GD library (apt-get install php5-gd
)
Features
- Designed to be dropped into an existing project without requiring significant CSS changes
- Removes CSS comments
- Removes most unnecessary whitespace
- Generates spritesheets from PNG images less than a given size (default 32x32)
- Supports @media queries
- Supports full alpha PNG images
- Supports high resolution sprite scaling through
background-size
- Disable spritify for individual rules by using
x-background-sprite: false;
Installing
Include spritify as a requirement in your project composer.json
,
and run composer update
to install it into your project:
{ "require": { "soundasleep/spritify": "dev-master" } }
You can then use spritify as part of your build script:
php -f vendor/soundasleep/spritify/spritify.php --input default.css --png img/all_sprites.png --output default-compiled.css
You can also use the new grunt-contrib-spritify task in your Gruntfile.
For example, CryptFolio uses Spritify to transform this stylesheet into a compressed stylesheet with a PNG spritesheet.
Limitations
- The input CSS needs to be valid.
- Uses very basic regular expressions, so will fail with strings that contain ;s, and does not support Unicode.
- Only supports spriting of PNG images, does not support GIF.
- The output CSS file needs to be in the same directory as the input CSS file.
- All images need to be relative and accessible relative to the CSS file (no Apache Aliases, etc).
- Sprited images within @media queries are not tested yet.
- Assumes background images are of one of the following formats:
background: #123 url('foo');
(colours are added as another property 'background-color')background: url('foo');
background-image: url('foo');
background: url('foo') 0 0;
background: url('foo') 10px 20px;
background: url('foo') top 10px;
background-size: 16px 16px;
- The following are not supported:
background: #123 url('foo') bottom right;
(all other words are assumed to be 'top left')background: #123 url('foo') center center;
(something aligned 'center center' is ignored)background: url('foo') 0% 0%;
background: url('foo') 50% 100%;
background-size: 100%;
background-size: contain;
Tests
Very basic tests are provided with phpunit. The source code for these tests are available in tests/.
composer install
vendor/bin/phpunit