Add option to use modern API in dart-sass (#312)

Author: mattyrob

gruntfile.js

@@ -1,5 +1,5 @@
 'use strict';
-const sass = require('node-sass');
+const sass = require('sass');
 
 module.exports = grunt => {
 	grunt.initConfig({
@@ -13,6 +13,15 @@ module.exports = grunt => {
 					'test/tmp/compile2.css': 'test/fixtures/test.scss'
 				}
 			},
+			modernCompile: {
+				options: {
+					api: 'modern'
+				},
+				files: {
+					'test/tmp/modern-compile.css': 'test/fixtures/test.scss',
+					'test/tmp/modern-compile2.css': 'test/fixtures/test.scss'
+				}
+			},
 			includePaths: {
 				options: {
 					includePaths: ['test/fixtures']

package.json

@@ -29,11 +29,11 @@
 		"libsass"
 	],
 	"devDependencies": {
-		"grunt": "^1.0.3",
+		"grunt": "^1.6.0",
 		"grunt-cli": "^1.3.1",
-		"grunt-contrib-clean": "^2.0.0",
+		"grunt-contrib-clean": "^2.0.1",
 		"grunt-contrib-nodeunit": "^2.0.0",
-		"node-sass": "^4.9.3",
+		"sass": "1.78.0",
 		"xo": "^0.23.0"
 	},
 	"peerDependencies": {

tasks/sass.js

@@ -19,15 +19,20 @@ module.exports = grunt => {
 		(async () => {
 			await Promise.all(this.files.map(async item => {
 				const [src] = item.src;
+				let result;
 
 				if (!src || path.basename(src)[0] === '_') {
 					return;
 				}
 
-				const result = await util.promisify(options.implementation.render)(Object.assign({}, options, {
-					file: src,
-					outFile: item.dest
-				}));
+				if (options.api === 'modern') {
+					result = await options.implementation.compileAsync(src, options);
+				} else {
+					result = await util.promisify(options.implementation.render)(Object.assign({}, options, {
+						file: src,
+						outFile: item.dest
+					}));
+				}
 
 				grunt.file.write(item.dest, result.css);
 

test/expected/compile.css

@@ -1,13 +1,16 @@
 li {
   font-family: serif;
   font-weight: bold;
-  font-size: 1.2em; }
+  font-size: 1.2em;
+}
 
 .content-navigation {
   border-color: #3bbfce;
-  color: #2ca2af; }
+  color: #2ca2af;
+}
 
 .border {
   padding: 8px;
   margin: 8px;
-  border-color: #3bbfce; }
+  border-color: #3bbfce;
+}

test/expected/include-paths.css

@@ -1,13 +1,16 @@
 li {
   font-family: serif;
   font-weight: bold;
-  font-size: 1.2em; }
+  font-size: 1.2em;
+}
 
 .content-navigation {
   border-color: #3bbfce;
-  color: #2ca2af; }
+  color: #2ca2af;
+}
 
 .border {
   padding: 8px;
   margin: 8px;
-  border-color: #3bbfce; }
+  border-color: #3bbfce;
+}

test/fixtures/include-paths.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import 'imported';
 
 $blue: #3bbfce;
@@ -10,7 +11,7 @@ $margin: 16px;
 }
 
 .border {
-  padding: $margin / 2;
-  margin: $margin / 2;
+  padding: math.div($margin, 2);
+  margin: math.div($margin, 2);
   border-color: $blue;
 }

test/fixtures/test.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @import 'imported';
 
 $blue: #3bbfce;
@@ -10,7 +11,7 @@ $margin: 16px;
 }
 
 .border {
-	padding: $margin / 2;
-	margin: $margin / 2;
+	padding: math.div($margin, 2);
+	margin: math.div($margin, 2);
 	border-color: $blue;
 }

test/test.js

@@ -13,6 +13,17 @@ exports.sass = {
 
 		test.done();
 	},
+	modernCompile(test) {
+		test.expect(2);
+
+		const actual = grunt.file.read('test/tmp/modern-compile.css');
+		const actual2 = grunt.file.read('test/tmp/modern-compile2.css');
+		const expected = grunt.file.read('test/expected/compile.css');
+		test.equal(actual, expected, 'should compile SCSS to CSS');
+		test.equal(actual2, expected, 'should compile SCSS to CSS');
+
+		test.done();
+	},
 	includePaths(test) {
 		test.expect(1);