Merge pull request #73 from evandavis/file-relative-sprites

locate sprites relative to the stylesheet

src/core.js

@@ -30,7 +30,7 @@ const TYPE_VECTOR = 'vector';
  */
 export const defaults = {
 	basePath: './',
-	stylesheetPath: './',
+	stylesheetPath: null,
 	spritePath: './',
 	relativeTo: 'file',
 	filterBy: [],
@@ -403,7 +403,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

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');

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';

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; }

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; }