feat: support dart-sass as default sass implementation (#3321)

Author: haoqunjiang

packages/@vue/cli-service/__tests__/css.spec.js

@@ -62,7 +62,7 @@ test('default loaders', () => {
     })
   })
   // sass indented syntax
-  expect(findOptions(config, 'sass', 'sass')).toEqual({ indentedSyntax: true, sourceMap: false })
+  expect(findOptions(config, 'sass', 'sass')).toMatchObject({ indentedSyntax: true, sourceMap: false })
 })
 
 test('production defaults', () => {
@@ -193,8 +193,14 @@ test('css.loaderOptions', () => {
     }
   })
 
-  expect(findOptions(config, 'scss', 'sass')).toEqual({ data, sourceMap: false })
-  expect(findOptions(config, 'sass', 'sass')).toEqual({ data, indentedSyntax: true, sourceMap: false })
+  expect(findOptions(config, 'scss', 'sass')).toMatchObject({ data, sourceMap: false })
+  expect(findOptions(config, 'sass', 'sass')).toMatchObject({ data, indentedSyntax: true, sourceMap: false })
+})
+
+test('should use dart sass implementation whenever possible', () => {
+  const config = genConfig()
+  expect(findOptions(config, 'scss', 'sass')).toMatchObject({ fiber: require('fibers'), implementation: require('sass') })
+  expect(findOptions(config, 'sass', 'sass')).toMatchObject({ fiber: require('fibers'), implementation: require('sass') })
 })
 
 test('skip postcss-loader if no postcss config found', () => {

packages/@vue/cli-service/__tests__/generator.spec.js

@@ -0,0 +1,47 @@
+const generateWithPlugin = require('@vue/cli-test-utils/generateWithPlugin')
+
+test('node sass (legacy)', async () => {
+  const { pkg, files } = await generateWithPlugin([
+    {
+      id: '@vue/cli-service',
+      apply: require('../generator'),
+      options: {
+        cssPreprocessor: 'sass'
+      }
+    }
+  ])
+
+  expect(files['src/App.vue']).toMatch('<style lang="scss">')
+  expect(pkg).toHaveProperty(['devDependencies', 'node-sass'])
+})
+
+test('node sass', async () => {
+  const { pkg, files } = await generateWithPlugin([
+    {
+      id: '@vue/cli-service',
+      apply: require('../generator'),
+      options: {
+        cssPreprocessor: 'node-sass'
+      }
+    }
+  ])
+
+  expect(files['src/App.vue']).toMatch('<style lang="scss">')
+  expect(pkg).toHaveProperty(['devDependencies', 'node-sass'])
+})
+
+test('dart sass', async () => {
+  const { pkg, files } = await generateWithPlugin([
+    {
+      id: '@vue/cli-service',
+      apply: require('../generator'),
+      options: {
+        cssPreprocessor: 'dart-sass'
+      }
+    }
+  ])
+
+  expect(files['src/App.vue']).toMatch('<style lang="scss">')
+  expect(pkg).toHaveProperty(['devDependencies', 'sass'])
+  expect(pkg).toHaveProperty(['devDependencies', 'fibers'])
+})

packages/@vue/cli-service/__tests__/serve.spec.js

@@ -93,3 +93,14 @@ test('serve with no public dir', async () => {
     }
   )
 })
+
+test('dart sass', async () => {
+  const project = await create('test-dart-sass', exports.defaultPreset = {
+    useConfigFiles: false,
+    cssPreprocessor: 'dart-sass',
+    plugins: {}
+  })
+
+  // should build successfully
+  await project.run('vue-cli-service build')
+})

packages/@vue/cli-service/generator/index.js

@@ -36,9 +36,19 @@ module.exports = (api, options) => {
 
   if (options.cssPreprocessor) {
     const deps = {
+      // TODO: remove 'sass' option in v4 or rename 'dart-sass' to 'sass'
       sass: {
         'node-sass': '^4.9.0',
-        'sass-loader': '^7.0.1'
+        'sass-loader': '^7.1.0'
+      },
+      'node-sass': {
+        'node-sass': '^4.9.0',
+        'sass-loader': '^7.1.0'
+      },
+      'dart-sass': {
+        fibers: '^3.1.1',
+        sass: '^1.16.0',
+        'sass-loader': '^7.1.0'
       },
       less: {
         'less': '^3.0.4',

packages/@vue/cli-service/generator/template/src/App.vue

@@ -39,7 +39,7 @@ export default {
 <style<%-
   rootOptions.cssPreprocessor
     ? ` lang="${
-        rootOptions.cssPreprocessor === 'sass'
+        rootOptions.cssPreprocessor.includes('sass')
           ? 'scss'
           : rootOptions.cssPreprocessor
       }"`

packages/@vue/cli-service/generator/template/src/components/HelloWorld.vue

@@ -46,7 +46,7 @@ export default {
 <style scoped<%-
   rootOptions.cssPreprocessor
     ? ` lang="${
-        rootOptions.cssPreprocessor === 'sass'
+        rootOptions.cssPreprocessor.includes('sass')
           ? 'scss'
           : rootOptions.cssPreprocessor
       }"`

packages/@vue/cli-service/lib/config/css.js

@@ -15,6 +15,12 @@ module.exports = (api, options) => {
     const shadowMode = !!process.env.VUE_CLI_CSS_SHADOW_MODE
     const isProd = process.env.NODE_ENV === 'production'
 
+    const defaultSassLoaderOptions = {}
+    try {
+      defaultSassLoaderOptions.implementation = require('sass')
+      defaultSassLoaderOptions.fiber = require('fibers')
+    } catch (e) {}
+
     const {
       modules = false,
       extract = isProd,
@@ -158,8 +164,8 @@ module.exports = (api, options) => {
 
     createCSSRule('css', /\.css$/)
     createCSSRule('postcss', /\.p(ost)?css$/)
-    createCSSRule('scss', /\.scss$/, 'sass-loader', loaderOptions.sass)
-    createCSSRule('sass', /\.sass$/, 'sass-loader', Object.assign({
+    createCSSRule('scss', /\.scss$/, 'sass-loader', Object.assign(defaultSassLoaderOptions, loaderOptions.sass))
+    createCSSRule('sass', /\.sass$/, 'sass-loader', Object.assign(defaultSassLoaderOptions, {
       indentedSyntax: true
     }, loaderOptions.sass))
     createCSSRule('less', /\.less$/, 'less-loader', loaderOptions.less)

packages/@vue/cli-service/package.json

@@ -76,6 +76,9 @@
     "vue-template-compiler": "^2.0.0"
   },
   "devDependencies": {
+    "fibers": "^3.1.1",
+    "sass": "^1.16.1",
+    "sass-loader": "^7.1.0",
     "vue": "^2.5.21",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.21",

packages/@vue/cli/lib/options.js

@@ -13,7 +13,8 @@ const presetSchema = createSchema(joi => joi.object().keys({
   router: joi.boolean(),
   routerHistoryMode: joi.boolean(),
   vuex: joi.boolean(),
-  cssPreprocessor: joi.string().only(['sass', 'less', 'stylus']),
+  // TODO: remove 'sass' or make it equivalent to 'dart-sass' in v4
+  cssPreprocessor: joi.string().only(['sass', 'dart-sass', 'node-sass', 'less', 'stylus']),
   plugins: joi.object().required(),
   configs: joi.object()
 }))

packages/@vue/cli/lib/promptModules/__tests__/cssPreprocessors.spec.js

@@ -14,13 +14,13 @@ test('CSS pre-processor ', async () => {
     },
     {
       message: 'Pick a CSS pre-processor',
-      choices: ['Sass', 'Less', 'Stylus'],
+      choices: ['Sass/SCSS (with dart-sass)', 'Sass/SCSS (with node-sass)', 'Less', 'Stylus'],
       choose: 0
     }
   ]
 
   const expectedOptions = {
-    cssPreprocessor: 'sass',
+    cssPreprocessor: 'dart-sass',
     plugins: {}
   }