feat: css preprocessors

Author: yyx990803

packages/@vue/cli-plugin-eslint/generator.js

@@ -7,7 +7,7 @@ module.exports = (api, { config, lintOn }) => {
       extends: ['plugin:vue/essential']
     },
     devDependencies: {
-      'eslint-plugin-vue': '^4.0.0'
+      'eslint-plugin-vue': '^4.1.0'
     }
   }
 

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

@@ -44,4 +44,25 @@ module.exports = (api, options) => {
       }
     })
   }
+
+  if (options.cssPreprocessor) {
+    const deps = {
+      sass: {
+        'node-sass': '^4.7.2',
+        'sass-loader': '^6.0.6'
+      },
+      less: {
+        'less': '^2.7.3',
+        'less-loader': '^4.0.5'
+      },
+      stylus: {
+        'stylus': '^0.54.5',
+        'stylus-loader': '^3.0.1'
+      }
+    }
+
+    api.extendPackage({
+      devDependencies: deps[options.cssPreprocessor]
+    })
+  }
 }

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

@@ -39,8 +39,8 @@ export default {
   margin-top: 60px;
   <%_ } _%>
 }
-
 <%_ if (options.router) { _%>
+
 #nav {
   padding: 30px;
 }

packages/@vue/cli-service/lib/util/CSSLoaderResolver.js

@@ -50,7 +50,6 @@ module.exports = class CSSLoaderResolver {
    */
   getLoader (test, loader, options = {}) {
     const cssLoaderOptions = {
-      autoprefixer: false,
       sourceMap: this.sourceMap,
       minimize: this.minimize
     }

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

@@ -71,11 +71,9 @@ module.exports = class Creator {
     }
 
     // inject core service
-    options.plugins['@vue/cli-service'] = {
-      projectName: name,
-      router: options.router,
-      vuex: options.vuex
-    }
+    options.plugins['@vue/cli-service'] = Object.assign({
+      projectName: name
+    }, options)
 
     const packageManager = (
       cliOptions.packageManager ||

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

@@ -38,6 +38,7 @@ async function create (projectName, options) {
     'babel',
     'router',
     'vuex',
+    'cssPreprocessors',
     'eslint',
     'unit',
     'e2e',

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

@@ -16,7 +16,8 @@ const rcPath = exports.rcPath = (
 const schema = createSchema(joi => joi.object().keys({
   router: joi.boolean(),
   vuex: joi.boolean(),
-  useTaobaoRegistry: joi.any().only([true, false, null]),
+  cssPreprocessor: joi.string().only(['sass', 'less', 'stylus']),
+  useTaobaoRegistry: joi.boolean(),
   packageManager: joi.string().only(['yarn', 'npm']),
   plugins: joi.object().required()
 }))
@@ -26,7 +27,8 @@ exports.validate = options => validate(options, schema)
 exports.defaults = {
   router: false,
   vuex: false,
-  useTaobaoRegistry: null,
+  cssPreprocessor: undefined,
+  useTaobaoRegistry: undefined,
   packageManager: hasYarn ? 'yarn' : 'npm',
   plugins: {
     '@vue/cli-plugin-babel': {},

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

@@ -0,0 +1,33 @@
+module.exports = cli => {
+  cli.injectFeature({
+    name: 'CSS Pre-processors',
+    value: 'css-preprocessor'
+  })
+
+  cli.injectPrompt({
+    name: 'cssPreprocessor',
+    when: answers => answers.features.includes('css-preprocessor'),
+    type: 'list',
+    message: 'Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):',
+    choices: [
+      {
+        name: 'SCSS/SASS',
+        value: 'sass'
+      },
+      {
+        name: 'LESS',
+        value: 'less'
+      },
+      {
+        name: 'Stylus',
+        value: 'stylus'
+      }
+    ]
+  })
+
+  cli.onPromptComplete((answers, options) => {
+    if (answers.cssPreprocessor) {
+      options.cssPreprocessor = answers.cssPreprocessor
+    }
+  })
+}

packages/@vue/cli/lib/promptModules/unit.js

@@ -12,7 +12,7 @@ module.exports = cli => {
     message: 'Pick a unit testing solution:',
     choices: [
       {
-        name: 'Mocha (with better webpack integration, https://mochajs.org/)',
+        name: 'Mocha via mocha-webpack (https://mochajs.org/)',
         value: 'mocha',
         short: 'Mocha'
       },

scripts/syncDeps.js

@@ -7,7 +7,22 @@ const globby = require('globby')
 const { execSync } = require('child_process')
 
 const localPackageRE = /'(@vue\/[\w-]+)': '\^(\d+\.\d+\.\d+)'/g
-const npmPackageRE = /'(vue|vue-template-compiler|vuex|vue-router|vue-test-utils)': '\^(\d+\.\d+\.\d+[^']*)'/g
+
+const packagesToCheck = [
+  'vue',
+  'vue-template-compiler',
+  'vuex',
+  'vue-router',
+  'vue-test-utils',
+  'eslint-plugin-vue',
+  'node-sass',
+  'sass-loader',
+  'less',
+  'less-loader',
+  'stylus',
+  'stylus-loader'
+]
+const npmPackageRE = new RegExp(`'(${packagesToCheck.join('|')})': '\\^(\\d+\\.\\d+\\.\\d+[^']*)'`)
 
 ;(async () => {
   const paths = await globby(['packages/@vue/**/*.js'])