├── .eslintrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── ChangeLog.md ├── LICENSE ├── README.md ├── gulpfile.js ├── index.js ├── package.json └── test └── test.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "no-unused-expressions": [0], 4 | "no-underscore-dangle": [0], 5 | "no-reserved-keys": [2], 6 | "no-multi-spaces": [0], 7 | "no-extra-parens": [2], 8 | "no-unused-vars": [2], 9 | "no-loop-func": [0], 10 | "key-spacing": [0], 11 | "max-len": [2], 12 | "strict": [0], 13 | "indent": [2], 14 | "quotes": [2, "single", "avoid-escape"], 15 | "curly": [0] 16 | }, 17 | "env": { 18 | "mocha": true, 19 | "node": true 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | 3 | node_modules/ 4 | 5 | test/ 6 | .travis.yml 7 | 8 | gulpfile.js 9 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - iojs 5 | - "0.12" 6 | - "0.10" 7 | -------------------------------------------------------------------------------- /ChangeLog.md: -------------------------------------------------------------------------------- 1 | # 1.0.0 - 2015-04-04 2 | 3 | ✨ Initial release -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright 2015 Alex 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # postcss-image-set [![Build Status](https://travis-ci.org/alex499/postcss-image-set.svg)](https://travis-ci.org/alex499/postcss-image-set) 2 | 3 | [PostCSS] plugin for fallback image-set. 4 | 5 | [PostCSS]: https://github.com/postcss/postcss 6 | 7 | ```css 8 | .foo { 9 | /* Input example */ 10 | background-image: image-set(url(img/test.png) 1x, 11 | url(img/test-2x.png) 2x, 12 | url(my-img-print.png) 600dpi); 13 | } 14 | ``` 15 | 16 | ```css 17 | .foo { 18 | /* Output example */ 19 | background-image: url(img/test.png); 20 | background-image: image-set(url(img/test.png) 1x, 21 | url(img/test-2x.png) 2x, 22 | url(my-img-print.png) 600dpi); 23 | } 24 | ``` 25 | 26 | ## Usage 27 | 28 | ```js 29 | postcss([ require('postcss-image-set') ]) 30 | ``` 31 | 32 | See [PostCSS] docs for examples for your environment. 33 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'); 2 | 3 | gulp.task('lint', function () { 4 | var eslint = require('gulp-eslint'); 5 | return gulp.src(['index.js', 'test/*.js', 'gulpfile.js']) 6 | .pipe(eslint()) 7 | .pipe(eslint.format()) 8 | .pipe(eslint.failAfterError()); 9 | }); 10 | 11 | gulp.task('test', function () { 12 | var mocha = require('gulp-mocha'); 13 | return gulp.src('test/*.js', { read: false }).pipe(mocha()); 14 | }); 15 | 16 | gulp.task('default', ['lint', 'test']); 17 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var postcss = require('postcss'); 2 | 3 | function getDefaultImage(images) { 4 | return images.match(/url\(.+?\)/)[0]; 5 | } 6 | 7 | module.exports = postcss.plugin('postcss-image-set', function (opts) { 8 | opts = opts || {}; 9 | 10 | return function (css) { 11 | css.eachDecl('background-image', function (decl) { 12 | if (!decl.value || decl.value.indexOf('image-set') === -1) { 13 | return; 14 | } 15 | var image = getDefaultImage(decl.value); 16 | decl.cloneBefore({ 17 | prop: 'background-image', 18 | value: image 19 | }); 20 | }); 21 | }; 22 | }); 23 | 24 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "postcss-image-set", 3 | "version": "0.0.1", 4 | "description": "PostCSS plugin for fallback image-set", 5 | "keywords": ["postcss", "css", "postcssplugin", "image-set"], 6 | "author": "Alex ", 7 | "license": "MIT", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/Alex499/postcss-image-set.git" 11 | }, 12 | "dependencies": { 13 | "postcss": "^4.1.0" 14 | }, 15 | "devDependencies": { 16 | "gulp-eslint": "0.8.0", 17 | "gulp-mocha": "2.0.1", 18 | "chai": "2.2.0", 19 | "gulp": "3.8.11" 20 | }, 21 | "scripts": { 22 | "test": "gulp" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /test/test.js: -------------------------------------------------------------------------------- 1 | var postcss = require('postcss'); 2 | var expect = require('chai').expect; 3 | 4 | var imageSet = require('../'); 5 | 6 | var test = function (input, output, opts, done) { 7 | expect(postcss(imageSet).process(input).css).to.eql(output); 8 | done(); 9 | }; 10 | 11 | describe('postcss-image-set', function () { 12 | 13 | it('parses the image-set', function (done) { 14 | test('a{ background-image: image-set(' + 15 | 'url(img/test.png) 1x, ' + 16 | 'url(img/test-2x.png) 2x, ' + 17 | 'url(my-img-print.png) 600dpi); }', 18 | 'a{ background-image: url(img/test.png); ' + 19 | 'background-image: image-set(' + 20 | 'url(img/test.png) 1x, ' + 21 | 'url(img/test-2x.png) 2x, ' + 22 | 'url(my-img-print.png) 600dpi); }', 23 | { }, done); 24 | }); 25 | 26 | it('parses the -webkit-image-set', function (done) { 27 | test('a{ background-image: -webkit-image-set(' + 28 | 'url(img/test.png) 1x, ' + 29 | 'url(img/test-2x.png) 2x, ' + 30 | 'url(my-img-print.png) 600dpi); }', 31 | 'a{ background-image: url(img/test.png); ' + 32 | 'background-image: -webkit-image-set(' + 33 | 'url(img/test.png) 1x, ' + 34 | 'url(img/test-2x.png) 2x, ' + 35 | 'url(my-img-print.png) 600dpi); }', 36 | { }, done); 37 | }); 38 | }); 39 | --------------------------------------------------------------------------------