Apply background-size to all sprites

vvasilev- · vvasilev- · commit 828f0e464223 · 2016-12-07T10:12:34.000+02:00
Fix #76
diff --git a/src/core.js b/src/core.js
@@ -449,14 +449,12 @@ export function updateRule(rule, token, image) {
 	rule.insertAfter(token, backgroundImageDecl);
 	rule.insertAfter(backgroundImageDecl, backgroundPositionDecl);
 
-	if (retina) {
-		const backgroundSizeDecl = postcss.decl({
-			prop: 'background-size',
-			value: `${sizeX}px ${sizeY}px`
-		});
+	const backgroundSizeDecl = postcss.decl({
+		prop: 'background-size',
+		value: `${sizeX}px ${sizeY}px`
+	});
 
-		rule.insertAfter(backgroundPositionDecl, backgroundSizeDecl);
-	}
+	rule.insertAfter(backgroundPositionDecl, backgroundSizeDecl);
 }
 
 /////////////////////////
diff --git a/test/expectations/absolute/style.css b/test/expectations/absolute/style.css
@@ -1,2 +1,2 @@
-.selector-a { background-image: url(sprite.png); background-position: 0px 0px; }
-.selector-b { background-image: url(sprite.png); background-position: -25px 0px; }
+.selector-a { background-image: url(sprite.png); background-position: 0px 0px; background-size: 50px 25px; }
+.selector-b { background-image: url(sprite.png); background-position: -25px 0px; background-size: 50px 25px; }
diff --git a/test/expectations/basic-on-update-rule-hook/style.css b/test/expectations/basic-on-update-rule-hook/style.css
@@ -1,2 +1,2 @@
-.selector-a { background-image: url(sprite.png); background-position: 0px 0px; background-color: #000; }
-.selector-b { background-image: url(sprite.png); background-position: -25px 0px; background-color: #000; }
+.selector-a { background-image: url(sprite.png); background-position: 0px 0px; background-size: 50px 25px; background-color: #000; }
+.selector-b { background-image: url(sprite.png); background-position: -25px 0px; background-size: 50px 25px; background-color: #000; }
diff --git a/test/expectations/basic/style.css b/test/expectations/basic/style.css
@@ -1,2 +1,2 @@
-.selector-a { background-image: url(sprite.png); background-position: 0px 0px; }
-.selector-b { background-image: url(sprite.png); background-position: -25px 0px; }
+.selector-a { background-image: url(sprite.png); background-position: 0px 0px; background-size: 50px 25px; }
+.selector-b { background-image: url(sprite.png); background-position: -25px 0px; background-size: 50px 25px; }
diff --git a/test/expectations/color/style.css b/test/expectations/color/style.css
@@ -1,3 +1,3 @@
-.selector-a { background-image: url(sprite.png); background-position: 0px 0px; }
-.selector-b { background-image: url(sprite.png); background-position: -25px 0px; background-color: #000; }
-.selector-c { background-image: url(sprite.png); background-position: -25px 0px; background-color: rgba(255, 255, 255, .2); }
+.selector-a { background-image: url(sprite.png); background-position: 0px 0px; background-size: 50px 25px; }
+.selector-b { background-image: url(sprite.png); background-position: -25px 0px; background-size: 50px 25px; background-color: #000; }
+.selector-c { background-image: url(sprite.png); background-position: -25px 0px; background-size: 50px 25px; background-color: rgba(255, 255, 255, .2); }
diff --git a/test/expectations/example-filter-by/style.css b/test/expectations/example-filter-by/style.css
@@ -1,4 +1,4 @@
-.selector-a { background-image: url(sprite.png); background-position: 0px 0px; }
-.selector-b { background-image: url(sprite.png); background-position: -25px 0px; }
+.selector-a { background-image: url(sprite.png); background-position: 0px 0px; background-size: 50px 25px; }
+.selector-b { background-image: url(sprite.png); background-position: -25px 0px; background-size: 50px 25px; }
 .selector-c { background: url(a.jpg) no-repeat 0 0; }
 .selector-d { background: url(b.jpg) no-repeat 0 0; }
diff --git a/test/expectations/example-group-by/style.css b/test/expectations/example-group-by/style.css
@@ -1,2 +1,2 @@
-.selector-a { background-image: url(sprite.shapes.png); background-position: 0px 0px; }
-.selector-b { background-image: url(sprite.shapes.png); background-position: -25px 0px; }
+.selector-a { background-image: url(sprite.shapes.png); background-position: 0px 0px; background-size: 50px 25px; }
+.selector-b { background-image: url(sprite.shapes.png); background-position: -25px 0px; background-size: 50px 25px; }
diff --git a/test/expectations/example-output-dimensions/style.css b/test/expectations/example-output-dimensions/style.css
@@ -1,2 +1,2 @@
-.selector-a { background-image: url(sprite.png); background-position: 0px 0px; width: 25px; height: 25px; }
-.selector-b { background-image: url(sprite.png); background-position: -25px 0px; width: 25px; height: 25px; }
+.selector-a { background-image: url(sprite.png); background-position: 0px 0px; background-size: 50px 25px; width: 25px; height: 25px; }
+.selector-b { background-image: url(sprite.png); background-position: -25px 0px; background-size: 50px 25px; width: 25px; height: 25px; }
diff --git a/test/expectations/example-skip-prefix/style.css b/test/expectations/example-skip-prefix/style.css
@@ -1,2 +1,2 @@
-.selector-a { background-image: url(shapes.png); background-position: 0px 0px; }
-.selector-b { background-image: url(shapes.png); background-position: -25px 0px; }
+.selector-a { background-image: url(shapes.png); background-position: 0px 0px; background-size: 50px 25px; }
+.selector-b { background-image: url(shapes.png); background-position: -25px 0px; background-size: 50px 25px; }
diff --git a/test/expectations/filter-by/style.css b/test/expectations/filter-by/style.css
@@ -1,2 +1,2 @@
 .selector-a { background-image: url(circle.png); }
-.selector-b { background-image: url(sprite.png); background-position: 0px 0px; }
+.selector-b { background-image: url(sprite.png); background-position: 0px 0px; background-size: 25px 25px; }
diff --git a/test/expectations/group-by/style.css b/test/expectations/group-by/style.css
@@ -1,2 +1,2 @@
-.selector-a { background-image: url(sprite.shapes.png); background-position: 0px 0px; }
-.selector-b { background-image: url(sprite.shapes.png); background-position: -25px 0px; }
+.selector-a { background-image: url(sprite.shapes.png); background-position: 0px 0px; background-size: 50px 25px; }
+.selector-b { background-image: url(sprite.shapes.png); background-position: -25px 0px; background-size: 50px 25px; }
diff --git a/test/expectations/relative/style.css b/test/expectations/relative/style.css
@@ -1,2 +1,2 @@
-.selector-a { background-image: url(../../build/relative/sprite.png); background-position: 0px 0px; }
-.selector-b { background-image: url(../../build/relative/sprite.png); background-position: -25px 0px; }
+.selector-a { background-image: url(../../build/relative/sprite.png); background-position: 0px 0px; background-size: 50px 25px; }
+.selector-b { background-image: url(../../build/relative/sprite.png); background-position: -25px 0px; background-size: 50px 25px; }
diff --git a/test/expectations/retina/style.css b/test/expectations/retina/style.css
@@ -1,5 +1,5 @@
-.selector-a { background-image: url(sprite.png); background-position: 0px 0px; }
-.selector-b { background-image: url(sprite.png); background-position: -25px 0px; }
+.selector-a { background-image: url(sprite.png); background-position: 0px 0px; background-size: 50px 25px; }
+.selector-b { background-image: url(sprite.png); background-position: -25px 0px; background-size: 50px 25px; }
 
 @media (max-width: 767px) {
 	.selector-a { background-image: url(sprite.@2x.png); background-position: 0px 0px; background-size: 50px 25px; }
diff --git a/test/expectations/svg-basic/style.css b/test/expectations/svg-basic/style.css
@@ -1,2 +1,2 @@
-.selector-a { background-image: url(sprite.svg); background-position: 0px 0px; }
-.selector-b { background-image: url(sprite.svg); background-position: -600px 0px; }
+.selector-a { background-image: url(sprite.svg); background-position: 0px 0px; background-size: 962px 600px; }
+.selector-b { background-image: url(sprite.svg); background-position: -600px 0px; background-size: 962px 600px; }

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,2 @@`
`1`	`1`	`.selector-a { background-image: url(circle.png); }`
`2`		`-.selector-b { background-image: url(sprite.png); background-position: 0px 0px; }`
	`2`	`+.selector-b { background-image: url(sprite.png); background-position: 0px 0px; background-size: 25px 25px; }`