index.js
function setTokens(images, options, css) {
	return new Promise(function (resolve) {
		css.walkAtRules('lazysprite', function (atRule) {
			// Get the directory of images from atRule value
			var params = space(atRule.params);
			var atRuleValue = getAtRuleValue(params);
			var sliceDir = atRuleValue[0];
			var sliceDirname = sliceDir.split(path.sep).pop();
			var atRuleParent = atRule.parent;
			var mediaAtRule2x = postcss.atRule({name: 'media', params: resolutions2x.join(', ')});
			var mediaAtRule3x = postcss.atRule({name: 'media', params: resolutions3x.join(', ')});

			// Tag flag
			var has2x = false;
			var has3x = false;

			if (options.outputExtralCSS) {
				var outputExtralCSSRule = postcss.rule({
					selector: '.' + options.nameSpace + (atRuleValue[1] ? atRuleValue[1] : sliceDirname),
					source: atRule.source
				});

				outputExtralCSSRule.append({prop: 'display', value: 'inline-block'});
				outputExtralCSSRule.append({prop: 'overflow', value: 'hidden'});
				outputExtralCSSRule.append({prop: 'font-size', value: '0'});
				outputExtralCSSRule.append({prop: 'line-height', value: '0'});
				atRule.before(outputExtralCSSRule);
			}

			// Foreach every image object
			_.forEach(images, function (image) {
				// Only work when equal to directory name
				if (sliceDirname === image.dir) {
					image.token = postcss.comment({
						text: image.path,
						raws: {
							between: options.cloneRaws.between,
							after: options.cloneRaws.after,
							left: '@replace|',
							right: ''
						}
					});

					// Add `source` argument for source map create.
					var singleRule = postcss.rule({
						selector: '.' + options.nameSpace + image.selector,
						source: atRule.source
					});

					singleRule.append(image.token);

					switch (image.ratio) {
					// @1x
					case 1:
						atRuleParent.insertBefore(atRule, singleRule);
						break;
						// @2x
					case 2:
						mediaAtRule2x.append(singleRule);
						has2x = true;
						break;
						// @3x
					case 3:
						mediaAtRule3x.append(singleRule);
						has3x = true;
						break;
					default:
						break;
					}
				}
			});

			// @2x @3x media rule are last.
			if (has2x) {
				atRuleParent.insertBefore(atRule, mediaAtRule2x);
			}
			if (has3x) {
				atRuleParent.insertBefore(atRule, mediaAtRule3x);
			}

			atRule.remove();
		});
		resolve([images, options]);
	});
}
function setTokens(images, options, css) {
	return new Promise(function (resolve) {
		css.walkAtRules('lazysprite', function (atRule) {
			// Get the directory of images from atRule value
			var params = space(atRule.params);
			var atRuleValue = getAtRuleValue(params);
			var sliceDir = atRuleValue[0];
			var sliceDirname = sliceDir.split(path.sep).pop();
			var atRuleParent = atRule.parent;
			var mediaAtRule2x = postcss.atRule({name: 'media', params: resolutions2x.join(', ')});
			var mediaAtRule3x = postcss.atRule({name: 'media', params: resolutions3x.join(', ')});

			// Tag flag
			var has2x = false;
			var has3x = false;

			if (options.outputExtralCSS) {
				var outputExtralCSSRule = postcss.rule({
					selector: '.' + options.nameSpace + (atRuleValue[1] ? atRuleValue[1] : sliceDirname),
					source: atRule.source
				});

				outputExtralCSSRule.append({prop: 'display', value: 'inline-block'});
				outputExtralCSSRule.append({prop: 'overflow', value: 'hidden'});
				outputExtralCSSRule.append({prop: 'font-size', value: '0'});
				outputExtralCSSRule.append({prop: 'line-height', value: '0'});
				atRule.before(outputExtralCSSRule);
			}

			// Foreach every image object
			_.forEach(images, function (image) {
				// Only work when equal to directory name
				if (sliceDirname === image.dir) {
					image.token = postcss.comment({
						text: image.path,
						raws: {
							between: options.cloneRaws.between,
							after: options.cloneRaws.after,
							left: '@replace|',
							right: ''
						}
					});

					// Add `source` argument for source map create.
					var singleRule = postcss.rule({
						selector: '.' + options.nameSpace + image.selector,
						source: atRule.source
					});

					singleRule.append(image.token);

					switch (image.ratio) {
					// @1x
					case 1:
						atRuleParent.insertBefore(atRule, singleRule);
						break;
						// @2x
					case 2:
						mediaAtRule2x.append(singleRule);
						has2x = true;
						break;
						// @3x
					case 3:
						mediaAtRule3x.append(singleRule);
						has3x = true;
						break;
					default:
						break;
					}
				}
			});

			// @2x @3x media rule are last.
			if (has2x) {
				atRuleParent.insertBefore(atRule, mediaAtRule2x);
			}
			if (has3x) {
				atRuleParent.insertBefore(atRule, mediaAtRule3x);
			}

			atRule.remove();
		});
		resolve([images, options]);
	});
}
function setTokens ( images , options , css ) { return new Promise ( function ( resolve ) { css . walkAtRules ( 'lazysprite' , function ( atRule ) { // Get the directory of images from atRule value var params = space ( atRule . params ) ; var atRuleValue = getAtRuleValue ( params ) ; var sliceDir = atRuleValue [ 0 ] ; var sliceDirname = sliceDir . split ( path . sep ) . pop ( ) ; var atRuleParent = atRule . parent ; var mediaAtRule2x = postcss . atRule ( { name : 'media' , params : resolutions2x . join ( ', ' ) } ) ; var mediaAtRule3x = postcss . atRule ( { name : 'media' , params : resolutions3x . join ( ', ' ) } ) ; // Tag flag var has2x = false ; var has3x = false ; if ( options . outputExtralCSS ) { var outputExtralCSSRule = postcss . rule ( { selector : '.' + options . nameSpace + ( atRuleValue [ 1 ] ? atRuleValue [ 1 ] : sliceDirname ) , source : atRule . source } ) ; outputExtralCSSRule . append ( { prop : 'display' , value : 'inline-block' } ) ; outputExtralCSSRule . append ( { prop : 'overflow' , value : 'hidden' } ) ; outputExtralCSSRule . append ( { prop : 'font-size' , value : '0' } ) ; outputExtralCSSRule . append ( { prop : 'line-height' , value : '0' } ) ; atRule . before ( outputExtralCSSRule ) ; } // Foreach every image object _ . forEach ( images , function ( image ) { // Only work when equal to directory name if ( sliceDirname === image . dir ) { image . token = postcss . comment ( { text : image . path , raws : { between : options . cloneRaws . between , after : options . cloneRaws . after , left : '@replace|' , right : '' } } ) ; // Add `source` argument for source map create. var singleRule = postcss . rule ( { selector : '.' + options . nameSpace + image . selector , source : atRule . source } ) ; singleRule . append ( image . token ) ; switch ( image . ratio ) { // @1x case 1 : atRuleParent . insertBefore ( atRule , singleRule ) ; break ; // @2x case 2 : mediaAtRule2x . append ( singleRule ) ; has2x = true ; break ; // @3x case 3 : mediaAtRule3x . append ( singleRule ) ; has3x = true ; break ; default : break ; } } } ) ; // @2x @3x media rule are last. if ( has2x ) { atRuleParent . insertBefore ( atRule , mediaAtRule2x ) ; } if ( has3x ) { atRuleParent . insertBefore ( atRule , mediaAtRule3x ) ; } atRule . remove ( ) ; } ) ; resolve ( [ images , options ] ) ; } ) ; }
Set the necessary tokens info to the background declarations.
@param  {Node}   css
@param  {Object} options
@param  {Array}  images
@return {Promise}
Set the necessary tokens info to the background declarations .