Fix parsing the contents of imported stylesheets

Author: maxmilton

.gitignore

@@ -2,6 +2,7 @@ node_modules
 package-lock.json
 *.log*
 *.result.css
+*.result.scss
 .*
 !.editorconfig
 !.gitignore

.tape.js

@@ -89,6 +89,15 @@ module.exports = {
 				syntax: require('postcss-scss')
 			}
 		},
+		'import-scss': {
+			message: 'supports @import with scss syntax',
+			source: 'imports-scss.scss',
+			expect: 'imports-scss.expect.scss',
+			result: 'imports-scss.result.scss',
+			processOptions: {
+				syntax: require('postcss-scss')
+			}
+		},
 		'unresolved:ignore': {
 			message: 'supports { unresolved: "ignore" } option',
 			expect: 'unresolved.expect.css',

src/lib/transform-import-atrule.js

@@ -12,6 +12,10 @@ export default function transformImportAtrule(rule, opts) {
 		// @import options
 		const { id, media, cwf, cwd } = getImportOpts(rule, opts);
 
+		// PostCSS options
+		const options = opts.result.opts;
+		const parser = options.parser || options.syntax && options.syntax.parse || null;
+
 		if (
 			opts.importFilter instanceof Function && opts.importFilter(id, media) ||
 			opts.importFilter instanceof RegExp && opts.importFilter.test(id)
@@ -28,7 +32,7 @@ export default function transformImportAtrule(rule, opts) {
 
 			return importPromise.then(
 				// promise the processed file
-				({ file, contents }) => processor.process(contents, { from: file }).then(
+				({ file, contents }) => processor.process(contents, { from: file, parser: parser }).then(
 						({ root }) => {
 							// push a dependency message
 							opts.result.messages.push({ type: 'dependency', file: file, parent: cwf });

test/imports-scss.expect.scss

@@ -0,0 +1,21 @@
+.scss {
+	.nested {
+		// inline comment
+		content: "pass";
+	}
+
+	.name {
+		content: "pass";
+
+		.mixin {
+	-webkit-border-radius: 1em;
+	-moz-border-radius: 1em;
+	-ms-border-radius: 1em;
+	border-radius: 1em;
+		}
+	}
+}
+
+.imported {
+	content: "name";
+}

test/imports-scss.scss

@@ -0,0 +1,7 @@
+$pass: "pass";
+
+@import "imports/scss";
+
+.imported {
+	content: "$(name)";
+}

test/imports/scss.scss

@@ -0,0 +1,18 @@
+@import "./mixins";
+
+$name: name;
+
+.scss {
+	.nested {
+		// inline comment
+		content: $pass;
+	}
+
+	.#{$name} {
+		content: $pass;
+
+		.mixin {
+			@include mixin-test-1;
+		}
+	}
+}