Preprocessing

.gitignore

@@ -1 +1,3 @@
-node_modules/
+node_modules/
+.idea/
+*.iml

index.js

@@ -1,5 +1,5 @@
 const { basename, extname } = require('path');
-const { compile } = require('svelte');
+const { compile, preprocess } = require('svelte');
 const { getOptions } = require('loader-utils');
 const { statSync, utimesSync, writeFileSync } = require('fs');
 const { fileSync } = require('tmp');
@@ -20,7 +20,8 @@ function capitalize(str) {
 module.exports = function(source, map) {
 	this.cacheable();
 
-	const options = getOptions(this) || {};
+	const options = Object.assign({}, this.options, getOptions(this));
+	const callback = this.async();
 
 	options.filename = this.resourcePath;
 	options.format = this.version === 1 ? options.format || 'cjs' : 'es';
@@ -31,8 +32,8 @@ module.exports = function(source, map) {
 
 	if (!options.name) options.name = capitalize(sanitize(options.filename));
 
-	try {
-		let { code, map, css, cssMap } = compile(source, options);
+	preprocess(source, options).then(processed => {
+		let { code, map, css, cssMap } = compile(processed.toString(), options);
 
 		if (options.emitCss && css) {
 			const tmpobj = fileSync({ postfix: '.css' });
@@ -44,10 +45,10 @@ module.exports = function(source, map) {
 			utimesSync(tmpobj.name, stats.atimeMs - 9999, stats.mtimeMs - 9999);
 		}
 
-		this.callback(null, code, map);
-	} catch (err) {
-		// wrap error to provide correct
-		// context when logging to console
-		this.callback(new Error(err.toString() + '\n' + err.frame));
-	}
+		callback(null, code, map);
+	}, err => callback(err)).catch(err => {
+      // wrap error to provide correct
+      // context when logging to console
+		callback(new Error(`${err.name}: ${err.toString()}`));
+	});
 };

package.json

@@ -25,10 +25,10 @@
     "mocha": "^3.2.0",
     "sinon": "^1.17.6",
     "sinon-chai": "^2.8.0",
-    "svelte": "^1.6.0"
+    "svelte": "^1.47.2"
   },
   "peerDependencies": {
-    "svelte": "^1.0.7"
+    "svelte": "^1.44.0"
   },
   "repository": {
     "type": "git",

test/fixtures/style-valid.html

@@ -0,0 +1,8 @@
+<button>+1</button>
+​
+<style type="text/scss">
+  button {
+    width: $size;
+    height: $size;
+  }
+</style>

test/loader.spec.js

@@ -14,24 +14,32 @@ function d([str]) {
 
 describe('loader', () => {
 	function testLoader(fileName, callback, query, version = 2) {
-		return () => {
+		return (done) => {
+			function cb() {
+				try {
+					callback(...[].slice.call(arguments));
+				} catch (err) {
+					expect(callbackSpy).to.have.been.called;
+					return done(err);
+				}
+				expect(callbackSpy).to.have.been.called;
+				done();
+			}
+
 			const fileContents = readFile(fileName);
-			const cacheableSpy = spy(() => {});
-			const callbackSpy = spy(callback);
-
-			loader.call(
-				{
-					cacheable: cacheableSpy,
-					callback: callbackSpy,
-					resourcePath: fileName,
-					version,
-					query
-				},
-				fileContents,
-				null
-			);
 
-			expect(callbackSpy).to.have.been.called;
+			const cacheableSpy = spy(function() { });
+
+			const callbackSpy = spy(cb);
+
+			loader.call({
+				cacheable: cacheableSpy,
+				async: () => callbackSpy,
+				resourcePath: fileName,
+				version,
+				query,
+			}, fileContents, null);
+
 			expect(cacheableSpy).to.have.been.called;
 		};
 	}
@@ -57,7 +65,7 @@ describe('loader', () => {
 				expect(err).to.exist;
 
 				expect(err.message).to.eql(d`
-					ParseError: Expected }}}
+					ParseError: Expected }}} (1:18)
 					1: <p>Count: {{{count}}</p>
 					                     ^
 					2: <button on:click='set({ count: count + 1 })'>+1</button>`
@@ -79,7 +87,7 @@ describe('loader', () => {
 				expect(err).to.exist;
 
 				expect(err.message).to.eql(d`
-					ParseError: Unexpected token
+					ParseError: Unexpected token (5:7)
 					3: <script>
 					4:   export {
 					5:     foo: 'BAR'
@@ -104,7 +112,7 @@ describe('loader', () => {
 				expect(err).to.exist;
 
 				expect(err.message).to.eql(d`
-					ValidationError: Computed properties can be function expressions or arrow function expressions
+					ValidationError: Computed properties can be function expressions or arrow function expressions (6:11)
 					4:   export default {
 					5:     computed: {
 					6:       foo: 'BAR'
@@ -253,6 +261,79 @@ describe('loader', () => {
 				)
 			);
 		});
+
+		describe('preprocess', () => {
+			it('should preprocess successfully', (done) => {
+				function callback(err, code, map) {
+					expect(err).not.to.exist;
+					expect(code).to.exist;
+					expect(code).to.contain('button{width:50px;height:50px}');
+					expect(map).to.exist;
+				}
+
+				function cb() {
+					try {
+						callback(...[].slice.call(arguments));
+					} catch (err) {
+						expect(callbackSpy).to.have.been.called;
+						return done(err);
+					}
+					expect(callbackSpy).to.have.been.called;
+					done();
+				}
+
+				const fileContents = readFileSync('test/fixtures/style-valid.html',
+            'utf-8');
+				const cacheableSpy = spy(() => {
+				});
+				const callbackSpy = spy(cb);
+				const options = {
+					style: ({ content }) => {
+						return {
+							code: content.replace(/\$size/gi, '50px'),
+						};
+					},
+				};
+
+				loader.call(
+					{
+						cacheable: cacheableSpy,
+						async: () => callbackSpy,
+						resourcePath: 'test/fixtures/style-valid.html',
+						options,
+					},
+            fileContents,
+            null
+        );
+
+				expect(cacheableSpy).to.have.been.called;
+			});
+
+			it('should not preprocess successfully', () => {
+				const fileContents = readFileSync('test/fixtures/style-valid.html', 'utf-8');
+				const cacheableSpy = spy(() => {
+				});
+				const options = {
+					style: () => {
+						throw new Error('Error while preprocessing');
+					},
+				};
+
+				loader.call(
+					{
+						cacheable: cacheableSpy,
+						async: () => (err) => {
+							expect(err).to.exist;
+						},
+						resourcePath: 'test/fixtures/style-valid.html',
+						options,
+					},
+            fileContents,
+            null
+        );
+
+			});
+		});
 	});
 });