feat: Finalize sass/scss/stylus

Author: rstoenescu

generator/index.js

@@ -24,7 +24,22 @@ const iconMap = {
   mdi: 'mdi-v4'
 }
 
-const components = []
+const components = [
+  'QLayout',
+  'QHeader',
+  'QDrawer',
+  'QPageContainer',
+  'QPage',
+  'QToolbar',
+  'QToolbarTitle',
+  'QBtn',
+  'QIcon',
+  'QList',
+  'QItem',
+  'QItemSection',
+  'QItemLabel'
+]
+
 const directives = []
 const plugins = []
 
@@ -43,10 +58,21 @@ module.exports = (api, opts) => {
   const deps = {
     dependencies,
     devDependencies: {
-      'babel-plugin-transform-imports': '1.5.0',
+      'babel-plugin-transform-imports': '1.5.0'
+    }
+  }
+
+  if (opts.quasar.cssPreprocessor === 'styl') {
+    Object.assign(deps.devDependencies, {
       stylus: '^0.54.5',
       'stylus-loader': '^3.0.2'
-    }
+    })
+  }
+  else if (['sass', 'scss'].includes(opts.quasar.cssPreprocessor)) {
+    Object.assign(deps.devDependencies, {
+      'node-sass': '^4.13.0',
+      'sass-loader': '^8.0.0'
+    })
   }
 
   if (opts.quasar.rtlSupport) {
@@ -57,13 +83,13 @@ module.exports = (api, opts) => {
 
   // modify plugin options
   extendPluginOptions(api, (pluginOptions, transpileDependencies) => {
-    pluginOptions.quasar = pluginOptions.quasar || {}
-
-    if (opts.quasar.rtlSupport) {
-      pluginOptions.quasar.rtlSupport = opts.quasar.rtlSupport
-    }
-
-    pluginOptions.quasar.importStrategy = opts.quasar.importStrategy
+    pluginOptions.quasar = Object.assign(
+      pluginOptions.quasar || {},
+      {
+        importStrategy: opts.quasar.importStrategy,
+        rtlSupport: opts.quasar.rtlSupport
+      }
+    )
 
     transpileDependencies.push('quasar')
 
@@ -76,6 +102,10 @@ module.exports = (api, opts) => {
     api.render('./templates/rtl')
   }
 
+  if (opts.quasar.cssPreprocessor !== 'none') {
+    api.render(`./templates/${opts.quasar.cssPreprocessor}`)
+  }
+
   if (opts.quasar.replaceComponents) {
     const extension = hasTS ? 'ts' : 'js',
       routerFile = api.resolve(`src/router.${extension}`),
@@ -105,7 +135,12 @@ module.exports = (api, opts) => {
       opts.quasar.features.push(opts.quasar.iconSet)
     }
 
-    lines += `\nimport './styles/quasar.styl'`
+    if (opts.quasar.cssPreprocessor !== 'none') {
+      lines += `\nimport './styles/quasar.${opts.quasar.cssPreprocessor}'`
+    }
+    else {
+      lines += `\nimport 'quasar/dist/quasar.css'`
+    }
 
     if (opts.quasar.features.includes('ie')) {
       lines += `\nimport 'quasar/dist/quasar.ie.polyfills'`

generator/templates/sass/src/styles/quasar.sass

@@ -0,0 +1,3 @@
+@import './quasar.variables.sass'
+@import '~quasar-styl'
+// @import '~quasar-addon-styl'

generator/templates/sass/src/styles/quasar.variables.sass

@@ -0,0 +1,15 @@
+// It's highly recommended to change the default colors
+// to match your app's branding.
+
+$primary   : #027BE3
+$secondary : #26A69A
+$accent    : #9C27B0
+
+$dark      : #1D1D1D
+
+$positive  : #21BA45
+$negative  : #C10015
+$info      : #31CCEC
+$warning   : #F2C037
+
+@import '~quasar-variables-styl'

generator/templates/scss/src/styles/quasar.scss

@@ -0,0 +1,3 @@
+@import './quasar.variables.scss';
+@import '~quasar-styl';
+// @import '~quasar-addon-styl';

generator/templates/scss/src/styles/quasar.variables.scss

@@ -0,0 +1,15 @@
+// It's highly recommended to change the default colors
+// to match your app's branding.
+
+$primary   : #027BE3;
+$secondary : #26A69A;
+$accent    : #9C27B0;
+
+$dark      : #1D1D1D;
+
+$positive  : #21BA45;
+$negative  : #C10015;
+$info      : #31CCEC;
+$warning   : #F2C037;
+
+@import '~quasar-variables-styl'

generator/templates/common/src/styles/quasar.styl renamed to generator/templates/styl/src/styles/quasar.styl

@@ -1,3 +1,3 @@
-@import './quasar.variables'
+@import './quasar.variables.styl'
 @import '~quasar-styl'
 // @import '~quasar-addon-styl'

generator/templates/common/src/styles/quasar.variables.styl renamed to generator/templates/styl/src/styles/quasar.variables.styl

@@ -5,6 +5,8 @@ $primary   = #027BE3
 $secondary = #26A69A
 $accent    = #9C27B0
 
+$dark      = #1D1D1D
+
 $positive  = #21BA45
 $negative  = #C10015
 $info      = #31CCEC

index.js

@@ -1,27 +1,39 @@
+const fs = require('fs')
 const path = require('path')
 
+function getCssPreprocessor (api) {
+  return ['sass', 'scss', 'styl'].find(ext => {
+    return fs.existsSync(
+      api.resolve('src/styles/quasar.variables.' + ext)
+    )
+  })
+}
+
 module.exports = (api, options) => {
   if (options.pluginOptions.quasar.rtlSupport) {
     process.env.QUASAR_RTL = true
   }
 
+  const cssPreprocessor = getCssPreprocessor(api)
+  const srcCssExt = cssPreprocessor === 'scss' ? 'sass' : cssPreprocessor
+
   api.chainWebpack(chain => {
-    chain.resolve.alias
+    cssPreprocessor && chain.resolve.alias
       .set(
         'quasar-variables',
-        api.resolve('src/styles/quasar.variables.styl')
+        api.resolve(`src/styles/quasar.variables.${cssPreprocessor}`)
       )
       .set(
         'quasar-variables-styl',
-        'quasar/src/css/variables.styl'
+        `quasar/src/css/variables.${srcCssExt}`
       )
       .set(
         'quasar-styl',
-        'quasar/dist/quasar.styl'
+        `quasar/dist/quasar.${srcCssExt}`
       )
       .set(
         'quasar-addon-styl',
-        'quasar/src/css/flex-addon.styl'
+        `quasar/src/css/flex-addon.${srcCssExt}`
       )
 
     chain.performance.maxEntrypointSize(512000)

prompts.js

@@ -14,7 +14,7 @@ module.exports = [
     message: 'Pick a Quasar components & directives import strategy: (can be changed later)',
     choices: [
       {
-        name: `Auto-import in-use Quasar components & directives (kebab-case, can be later changed to 'pascal' or 'combined')`,
+        name: `Auto-import in-use Quasar components & directives (kebab-case, can be later changed to 'pascal'/'combined'/'manual')`,
         value: 'kebab',
         short: 'Auto import (kebab-case)',
         checked: true
@@ -30,7 +30,7 @@ module.exports = [
   {
     name: 'quasar.cssPreprocessor',
     type: 'list',
-    message: 'Pick your favorite CSS preprocessor: (can be changed later)',
+    message: 'Pick your favorite CSS preprocessor:',
     default: 'sass',
     choices: [
       {
@@ -45,10 +45,11 @@ module.exports = [
       },
       {
         name: 'Stylus',
-        value: 'stylus'
+        value: 'styl',
+        short: 'Stylus'
       },
       {
-        name: 'None (the others will still be available)',
+        name: `None (style variables won't be available)`,
         value: 'none',
         short: 'None'
       }