From e910a7c24e5ac5e15223100a8a79de99d6d91796 Mon Sep 17 00:00:00 2001 From: Evan Davis Date: Wed, 16 Nov 2016 17:57:40 -0500 Subject: [PATCH] locate sprites relative to the stylesheet --- src/core.js | 4 ++-- test/10-update-references.js | 18 ++++++++++++++++++ test/11-e2e.js | 10 ++++++++++ test/expectations/relative/style.css | 2 ++ test/fixtures/relative/images/circle.png | Bin 0 -> 1296 bytes test/fixtures/relative/images/square.png | Bin 0 -> 1011 bytes test/fixtures/relative/style.css | 2 ++ 7 files changed, 34 insertions(+), 2 deletions(-) create mode 100644 test/expectations/relative/style.css create mode 100755 test/fixtures/relative/images/circle.png create mode 100755 test/fixtures/relative/images/square.png create mode 100644 test/fixtures/relative/style.css diff --git a/src/core.js b/src/core.js index d883a1b..65bf961 100644 --- a/src/core.js +++ b/src/core.js @@ -30,7 +30,7 @@ const TYPE_VECTOR = 'vector'; */ export const defaults = { basePath: './', - stylesheetPath: './', + stylesheetPath: null, spritePath: './', relativeTo: 'file', filterBy: [], @@ -393,7 +393,7 @@ export function updateReferences(root, opts, images, spritesheets) { // Update the rule with background declarations if (image) { // Generate CSS url to sprite - image.spriteUrl = path.relative(opts.stylesheetPath, image.spritePath); + image.spriteUrl = path.relative(opts.stylesheetPath || path.dirname(root.source.input.file), image.spritePath); image.spriteUrl = image.spriteUrl.split(path.sep).join('/'); // Update rule diff --git a/test/10-update-references.js b/test/10-update-references.js index 52e6d85..4efee30 100644 --- a/test/10-update-references.js +++ b/test/10-update-references.js @@ -39,6 +39,24 @@ test('should update CSS declarations', async (t) => { t.deepEqual(root.toString(), expected); }); +test('should update CSS declarations with relative paths', async (t) => { + const input = await readFileAsync('./fixtures/relative/style.css'); + const expected = await readFileAsync('./expectations/relative/style.css', 'utf8'); + const ast = postcss.parse(input, { from: './fixtures/relative/style.css' }); + let images, spritesheets, opts, root; + + t.context.opts.spritePath = './build/relative'; + + [ opts, images ] = await extractImages(ast, t.context.opts); + [ root, opts, images ] = await setTokens(ast, t.context.opts, images); + [ opts, images, spritesheets ] = await runSpritesmith(t.context.opts, images); + [ opts, images, spritesheets ] = await saveSpritesheets(t.context.opts, images, spritesheets); + [ opts, images, spritesheets ] = await mapSpritesheetProps(t.context.opts, images, spritesheets); + [ root, opts, images, spritesheets ] = await updateReferences(root, t.context.opts, images, spritesheets); + + t.deepEqual(root.toString(), expected); +}); + test('should use function provided by onUpdateRule hook', async (t) => { const input = await readFileAsync('./fixtures/basic/style.css'); const expected = await readFileAsync('./expectations/basic-on-update-rule-hook/style.css', 'utf8'); diff --git a/test/11-e2e.js b/test/11-e2e.js index 7566aa4..0f40ac2 100644 --- a/test/11-e2e.js +++ b/test/11-e2e.js @@ -86,6 +86,16 @@ test('absolute path', async (t) => { return run(inputPath, expectedPath, opts, t); }); +test('relative path', async (t) => { + const inputPath = './fixtures/relative/style.css'; + const expectedPath = './expectations/relative/style.css'; + const opts = { + spritePath: './build/relative/' + }; + + return run(inputPath, expectedPath, opts, t); +}); + test('filter by', async (t) => { const inputPath = './fixtures/filter-by/style.css'; const expectedPath = './expectations/filter-by/style.css'; diff --git a/test/expectations/relative/style.css b/test/expectations/relative/style.css new file mode 100644 index 0000000..2e00d65 --- /dev/null +++ b/test/expectations/relative/style.css @@ -0,0 +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; } diff --git a/test/fixtures/relative/images/circle.png b/test/fixtures/relative/images/circle.png new file mode 100755 index 0000000000000000000000000000000000000000..49e00b2c843f720ab0e7a7060e4986c501955e57 GIT binary patch literal 1296 zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1|*NXY)uAnN?apKg7ec#$`gxH85~pclTsBt za}(23gHjVyDhp4h+AuIMD`tj7ltlRYSS9D@>Lr5I=vCwv0Ch7k*w|MTBqnF4mMA2p zrf25aD!t#mUr8Y|#a1cY)Yrhbz&SM|)1#^=HMq(zB)KX(*)m1R-cG@$!U||WZfZ%Q zLPc&)Ua?h$trFN=Dz9|8 z>y;bpKhp88yV>WRp=I1=9MH?=;jqG!%T2VElw`VEGWs$&r<-In3$Ab zT4JjNbScCOxdm`z^NOLt1Pn0!io^naLp=kKmtYEgeeo;J&4sHjE(uCSxEHIz#UYgi zsro^w#rdU0$-sz9QwCX8VC7ttnpl!w6q28x0}I7~jQo=P;*9(P1!rdkjquF8l>G8y zO|WubUn|eN;*!L?YLg$ zL5Hu+$4d3sgOvN>LY%o*OwN`+ko;rq|Igy_tcRxsuT6SZ*Z>MIb?&L|!5J z;jqCK7H<gsH&3~aAI_WJcL?co$_P$+ zSYh+cV)u`v0|!=Cc+{!X_Aj0{@n-si5R-TNZ=5fbvDZ#COn4>ABF?IR`st-}-fm*b z#u^hp-t@i_zc%dKQrD*V8Po5EH7Weqy7tP3Lm`{WA13&}i@ndp!%*>U*{7vOa~eQp Nl&7no%Q~loCIDI<)6)O| literal 0 HcmV?d00001 diff --git a/test/fixtures/relative/images/square.png b/test/fixtures/relative/images/square.png new file mode 100755 index 0000000000000000000000000000000000000000..15a84a1e6b13d660a9bbcf0993b77380bd8c62cd GIT binary patch literal 1011 zcmaJ=PiWIn7!PiU8_a_ahCN8k5GGrby#8@ZSe;$cx~dtY>s(a^OOw|%cFBv$+nVkq z3WH9?gLn}{FTzk1Lgv9TAK*k5Pog|7sSc##I?6#hWvX*94OP8-@f{qd zsJ25!CX2JmX;DKatNIw$Gi}1AsNoUMR<$C;bPmoLR*d<%_KKkmJ;qE&6<)C=STM$x z95}f&p3#BwZF|VbPa-wF=o4{tTI7M$boc} zjRrLyMCd_*1yK+g0t0l22Vss6b08c9A(0nE5T)x6L$Wz~UQEl$dM*;hm;%PO$Z@4o zi7ka$NDZK({2ywXO|*;CaHrmX3cH!I4Y@RQ(SoCq!R34XRJJHNP{qi} zAT;0T;zR*q2`8fsu8gz=6I!^z)pxjwmR#QnrcE--&@mRFo^+5&*G?=Nt!o)= zsaNOft!t55aye2A=g;-8IXAY5dHiM5wIpcz9$Lig4srEz?)7P?*v%OX4 z`L~x}-e@21AAGu!te(6L`Y)^xd{{mkFW#Kly?FT7*3AC=oj~7@o>?j|6#$hR-yitb NFqIgWACJyn{sZKdL|6a- literal 0 HcmV?d00001 diff --git a/test/fixtures/relative/style.css b/test/fixtures/relative/style.css new file mode 100644 index 0000000..242b95e --- /dev/null +++ b/test/fixtures/relative/style.css @@ -0,0 +1,2 @@ +.selector-a { background-image: url(./images/circle.png); } +.selector-b { background: url(./images/square.png) no-repeat 0 0; }