Remove -sprite-location after creating the sprites

assetgraph · May 22, 2020 · 79532c6 · 79532c6
1 parent 82b50a1
commit 79532c6
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 24 deletions.
diff --git a/lib/spriteBackgroundImages.js b/lib/spriteBackgroundImages.js
@@ -360,6 +360,7 @@ module.exports = () =>
               [
                 '-sprite-selector-for-group',
                 '-sprite-packer',
+                '-sprite-location',
                 '-sprite-image-format',
                 '-sprite-background-color',
                 '-sprite-important',

diff --git a/test/spriteBackgroundImages.js b/test/spriteBackgroundImages.js
@@ -139,32 +139,56 @@ describe('spriteBackgroundImages', () => {
     );
   });
 
-  it('should process two sprites with -sprite-location properties in the group selector', async () => {
-    const assetGraph = new AssetGraph({
-      root: pathModule.resolve(
-        __dirname,
-        '..',
-        'testdata',
-        'spriteBackgroundImages',
-        'spriteLocation'
-      ),
+  describe('with -sprite-location', function () {
+    it('should process two sprites with -sprite-location properties in the group selector', async () => {
+      const assetGraph = new AssetGraph({
+        root: pathModule.resolve(
+          __dirname,
+          '..',
+          'testdata',
+          'spriteBackgroundImages',
+          'spriteLocation'
+        ),
+      });
+      await assetGraph.loadAssets('style.css');
+      await assetGraph.populate();
+
+      expect(assetGraph, 'to contain assets', 'Png', 4);
+
+      await assetGraph.queue(spriteBackgroundImages());
+
+      expect(assetGraph, 'to contain assets', 'Png', 2);
+      expect(assetGraph, 'to contain relations', 'CssImage', 2);
+
+      const cssImageHrefs = pluck(
+        assetGraph.findRelations({ type: 'CssImage' }),
+        'href'
+      ).sort();
+      expect(cssImageHrefs[0], 'to equal', 'myImage.png?pngquant=128');
+      expect(
+        cssImageHrefs[1],
+        'to match',
+        /^sprite-.*?-\d+\.png\?pngquant=128$/
+      );
     });
-    await assetGraph.loadAssets('style.css');
-    await assetGraph.populate();
-
-    expect(assetGraph, 'to contain assets', 'Png', 4);
-
-    await assetGraph.queue(spriteBackgroundImages());
 
-    expect(assetGraph, 'to contain assets', 'Png', 2);
-    expect(assetGraph, 'to contain relations', 'CssImage', 2);
-
-    const cssImageHrefs = pluck(
-      assetGraph.findRelations({ type: 'CssImage' }),
-      'href'
-    ).sort();
-    expect(cssImageHrefs[0], 'to equal', 'myImage.png?pngquant=128');
-    expect(cssImageHrefs[1], 'to match', /^sprite-.*?-\d+\.png\?pngquant=128$/);
+    it('should remove the -sprite-location properties', async () => {
+      const assetGraph = new AssetGraph({
+        root: pathModule.resolve(
+          __dirname,
+          '..',
+          'testdata',
+          'spriteBackgroundImages',
+          'spriteLocation'
+        ),
+      });
+      const [cssAsset] = await assetGraph.loadAssets('style.css');
+      await assetGraph.populate();
+
+      await assetGraph.queue(spriteBackgroundImages());
+
+      expect(cssAsset.text, 'not to contain', '-sprite-location');
+    });
   });
 
   it('should handle an existing background-image property in the group selector', async () => {