GithubHelp home page GithubHelp logo

madlittlemods / gulp-css-spriter Goto Github PK

View Code? Open in Web Editor NEW
38.0 38.0 19.0 89 KB

Sprite Sheet Generation from CSS source files. The best and different approach to sprite sheets.

Home Page: https://www.npmjs.com/package/gulp-css-spriter

JavaScript 80.29% CSS 19.71%

gulp-css-spriter's People

Contributors

dqmmpb avatar madlittlemods avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar avatar

Forkers

duheng jincdream fwon threeq alexstacker liming881227 qiruiyin spencerxiong kamis3ci mishakovpetr dqmmpb dwd-fe water-ice kvkens wanby artgou mingjiu xiaopig123456 fenlgy

gulp-css-spriter's Issues

Image in keyframes not generate into sprite sheet

Hi, I use this gulp plugin generate sprite sheet. But the image in keyframes (I use css3 animation).The css not change, like below:

@keyframes good-morning {
  0% {
    background-image: url("../../images/animation/a1.png");
  }
  14.28571429% {
    background-image: url("../../images/animation/a2.png");
  }
  28.57142857% {
    background-image: url("../../images/animation/a3.png");
  }
  42.85714286% {
    background-image: url("../../images/animation/a4.png");
  }
  57.14285714% {
    background-image: url("../../images/animation/a5.png");
  }
  71.42857143% {
    background-image: url("../../images/animation/a6.png");
  }
  85.71428571% {
    background-image: url("../../images/animation/a7.png");
  }
  100% {
    background-image: url("../../images/animation/a1.png");
  }
}

so, i fork the source code and add rule.type with keyframes map-over-styles-and-transform-background-image-declarations.js. The code is below:

if(rule.type === 'keyframes') {
	// Get keyframe from keyframes
	rule.keyframes = transformMap(rule.keyframes, function(keyframe, keyframeIndex, keyframes) {
		// Get declarations from keyframe
		keyframe.declarations = transformMap(keyframe.declarations, function(declaration, declarationIndex, declarations) {
			// Clone the declartion to keep it immutable
			var transformedDeclaration = extend(true, {}, declaration);
			transformedDeclaration = attachInfoToDeclaration(declarations, declarationIndex);

			// background-image always has a url
			if(transformedDeclaration.property === 'background-image') {
				return cb(transformedDeclaration, declarationIndex, declarations);
			}
			// Background is a shorthand property so make sure `url()` is in there
			else if(transformedDeclaration.property === 'background') {
				var hasImageValue = spriterUtil.backgroundURLRegex.test(transformedDeclaration.value);

				if(hasImageValue) {
					return cb(transformedDeclaration, declarationIndex, declarations);
				}
			}

			// Wrap in an object so that the declaration doesn't get interpreted
			return {
				'value': transformedDeclaration
			};
		});

	});
}

Now, the css will be:

@keyframes good-morning {
	0% {
		background-image: url("../../images/spritesheet.png");
		background-position: -0px -0px;
	}

	14.28571429% {
		background-image: url("../../images/spritesheet.png");
		background-position: -180px -0px;
	}

	28.57142857% {
		background-image: url("../../images/spritesheet.png");
		background-position: -360px -0px;
	}

	42.85714286% {
		background-image: url("../../images/spritesheet.png");
		background-position: -540px -0px;
	}

	57.14285714% {
		background-image: url("../../images/spritesheet.png");
		background-position: -0px -300px;
	}

	71.42857143% {
		background-image: url("../../images/spritesheet.png");
		background-position: -180px -300px;
	}

	85.71428571% {
		background-image: url("../../images/spritesheet.png");
		background-position: -360px -300px;
	}

	100% {
		background-image: url("../../images/spritesheet.png");
		background-position: -0px -0px;
	}
}

Hope to merge or fix this bug.

Multiple declarations on a single line get messed up

When you have minified/compressed CSS or have multiple background image declarations on a single line. The whole declarations get messed up.

This is caused by not having a column offset when you find/replace the first declaration.

Image compatibility

hello~ uh, I try this plugin to make a spriter pic. but, gulp throw an error message: error creating sprite sheet image :unsupported interlace method. finally( about 2 hours later hahahah),I import some png with AI instead of PS. This plugin runs successful. So er... my question is ：Is PS‘s image algorithm make gulp-css-spriter throw such error message?

Support Media Query (at-rules)

Add support for the @media at-rule.

When I add a background-image declaration into a media query, it doesn't get picked up and sprited.

Conditional spriting based on image url

Add an option to conditionally filter images based on the image URL

For example, any image with ?__spriter will be sprited

background-image: url('./images/test.png?__spriter');

Images appear multiple times in the spritemap, when multiple chunks fed in with the same image

The example will produce a image,spritesheet.png, that will have two instances of aenean-purple.png.

This seems to be a bug introduced in v0.3.0.

gulp.task('sprite', function() {

    // './test-css/minimal-for-bare-testing.css'
    return gulp.src(['./test1.css', './test2.css'])
        .pipe(spriter({
            'includeMode': 'implicit',
            'spriteSheet': './spritesheet.png',
        }));
});

test1.css:

.aenean
{
    width: 120px;
    height: 100px;
    background: url('../test-images/aenean-purple.png');
}

test2.css:

.aenean2
{
    width: 120px;
    height: 100px;
    background: url('../test-images/aenean-purple.png');
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.