feat: Support for Vue CLI v5 #52

quasarframework/quasar#12943

Author: rstoenescu

README.md

@@ -14,13 +14,13 @@ Please submit a PR to https://github.com/quasarframework/quasar-awesome with you
 
 ## Getting started
 
-:warning:  Make sure you have vue-cli 4.5.1+:
+:warning:  Make sure you have vue-cli v5:
 
 ```
 vue --version
 ```
 
-If you don't have a project created with vue-cli 4.5.1+ yet:
+If you don't have a project created with vue-cli v5 yet:
 
 ```
 # make sure to pick Vue 3 when asked:

generator/index.js

@@ -45,12 +45,12 @@ module.exports = (api, opts) => {
   if (['sass', 'scss'].includes(opts.quasar.cssPreprocessor)) {
     Object.assign(deps.devDependencies, {
       'sass': '1.32.12',
-      'sass-loader': '^10.1.0'
+      'sass-loader': '^12.0.0'
     })
   }
 
   if (opts.quasar.rtlSupport) {
-    deps.devDependencies['postcss-rtl'] = '^1.2.3'
+    deps.devDependencies['postcss-rtl'] = '^3.5.3'
   }
 
   api.extendPackage(deps)

index.js

@@ -9,39 +9,58 @@ const { version } = getDevlandFile('quasar/package.json')
 const transformAssetUrls = getDevlandFile('quasar/dist/transforms/loader-asset-urls.json')
 
 function getCssPreprocessor (api) {
-  return ['sass', 'scss', 'styl'].find(ext => {
+  return ['sass', 'scss'].find(ext => {
     return fs.existsSync(
       api.resolve('src/styles/quasar.variables.' + ext)
     )
   })
 }
 
+function applyCssRule (rule, cssPreprocessor) {
+  rule
+    .use('quasar-sass-variables-loader')
+    .loader(path.join(__dirname, `lib/loader.${cssPreprocessor}.js`))
+}
+
+function applyCssLoaders (chain, cssPreprocessor) {
+  const rule = chain.module.rule(cssPreprocessor)
+
+  applyCssRule(rule.oneOf('vue-modules'), cssPreprocessor)
+  applyCssRule(rule.oneOf('vue'), cssPreprocessor)
+  applyCssRule(rule.oneOf('normal-modules'), cssPreprocessor)
+  applyCssRule(rule.oneOf('normal'), cssPreprocessor)
+}
+
 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 => {
-    cssPreprocessor && chain.resolve.alias
-      .set(
-        'quasar-variables',
-        api.resolve(`src/styles/quasar.variables.${cssPreprocessor}`)
-      )
-      .set(
-        'quasar-variables-styl',
-        `quasar/src/css/variables.${srcCssExt}`
-      )
-      .set(
-        'quasar-styl',
-        `quasar/dist/quasar.${srcCssExt}`
-      )
-      .set(
-        'quasar-addon-styl',
-        `quasar/src/css/flex-addon.${srcCssExt}`
-      )
+    if (cssPreprocessor) {
+      chain.resolve.alias
+        .set(
+          'quasar-variables',
+          api.resolve(`src/styles/quasar.variables.${cssPreprocessor}`)
+        )
+        .set(
+          'quasar-variables-styl',
+          `quasar/src/css/variables.sass`
+        )
+        .set(
+          'quasar-styl',
+          `quasar/dist/quasar.sass`
+        )
+        .set(
+          'quasar-addon-styl',
+          `quasar/src/css/flex-addon.sass`
+        )
+
+      applyCssLoaders(chain, 'sass')
+      applyCssLoaders(chain, 'scss')
+    }
 
     chain.plugin('define-quasar')
       .use(webpack.DefinePlugin, [{
@@ -69,7 +88,7 @@ module.exports = (api, options) => {
         .use('vue-auto-import-quasar')
         .loader(path.join(__dirname, 'lib/loader.vue.auto-import-quasar.js'))
         .options({ strategy })
-        .before('cache-loader')
+        .before('vue-loader')
 
       chain.module.rule('js-transform-quasar-imports')
         .test(/\.(t|j)sx?$/)

lib/loader.js.transform-quasar-imports.js

@@ -1,4 +1,4 @@
-const getDevlandFile = require('./get-devland-file.js')
+const getDevlandFile = require('./get-devland-file')
 const importTransformation = getDevlandFile('quasar/dist/transforms/import-transformation.js')
 
 const regex = /import\s*\{([\w,\s]+)\}\s*from\s*['"]{1}quasar['"]{1}/g

lib/loader.sass.js

@@ -0,0 +1,20 @@
+
+const prefix = `@import 'quasar-variables', 'quasar/src/css/variables.sass'\n`
+
+module.exports = function (content) {
+  if (content.indexOf('$') !== -1) {
+    let useIndex = Math.max(
+      content.lastIndexOf('@use '),
+      content.lastIndexOf('@forward ')
+    )
+
+    if (useIndex === -1) {
+      return prefix + content
+    }
+
+    const newLineIndex = content.indexOf('\n', useIndex) + 1
+    return content.substr(0, newLineIndex) + prefix + content.substr(newLineIndex)
+  }
+
+  return content
+}

lib/loader.scss.js

@@ -0,0 +1,20 @@
+
+const prefix = `@import 'quasar-variables', 'quasar/src/css/variables.sass';\n`
+
+module.exports = function (content) {
+  if (content.indexOf('$') !== -1) {
+    let useIndex = Math.max(
+      content.lastIndexOf('@use '),
+      content.lastIndexOf('@forward ')
+    )
+
+    if (useIndex === -1) {
+      return prefix + content
+    }
+
+    const newLineIndex = content.indexOf('\n', useIndex) + 1
+    return content.substr(0, newLineIndex) + prefix + content.substr(newLineIndex)
+  }
+
+  return content
+}

lib/loader.vue.auto-import-quasar.js

@@ -1,9 +1,11 @@
+const { getOptions } = require('loader-utils')
+
 const stringifyRequest = require('loader-utils/lib/stringifyRequest')
-const getDevlandFile = require('./get-devland-file.js')
+const getDevlandFile = require('./get-devland-file')
+
 const autoImportData = getDevlandFile('quasar/dist/transforms/auto-import.json')
 const importTransformation = getDevlandFile('quasar/dist/transforms/import-transformation.js')
-
-const runtimePath = require.resolve('./runtime.auto-import.js')
+const autoImportRuntimePath = require.resolve('./runtime.auto-import.js')
 
 const compRegex = {
   'kebab': new RegExp(autoImportData.regex.kebabComponents || autoImportData.regex.components, 'g'),
@@ -19,11 +21,8 @@ function transform (itemArray) {
     .join(`\n`)
 }
 
-function extract (content, ctx) {
-  // Use webpack v5 getOptions or fallback to ctx.query for webpack v4
-  const { strategy } = ctx.getOptions ? ctx.getOptions() : ctx.query
-
-  let comp = content.match(compRegex[strategy])
+function extract (content, ctx, autoImportCase) {
+  let comp = content.match(compRegex[autoImportCase])
   let dir = content.match(dirRegex)
 
   if (comp === null && dir === null) {
@@ -38,11 +37,11 @@ function extract (content, ctx) {
     comp = Array.from(new Set(comp))
 
     // map comp names only if not pascal-case already
-    if (strategy !== 'pascal') {
+    if (autoImportCase !== 'pascal') {
       comp = comp.map(name => autoImportData.importName[name])
     }
 
-    if (strategy === 'combined') {
+    if (autoImportCase === 'combined') {
       // could have been transformed QIcon and q-icon too,
       // so avoid duplicates
       comp = Array.from(new Set(comp))
@@ -64,7 +63,7 @@ function extract (content, ctx) {
   // messes up consistency of hashes between builds
   return `
 ${importStatements}
-import qInstall from ${stringifyRequest(ctx, runtimePath)};
+import qInstall from ${stringifyRequest(ctx, autoImportRuntimePath)};
 ${installStatements}
 `
 }
@@ -73,17 +72,21 @@ module.exports = function (content, map) {
   let newContent = content
 
   if (!this.resourceQuery) {
-    const file = this.fs.readFileSync(this.resource, 'utf-8').toString()
-    const code = extract(file, this)
+    const opts = getOptions(this)
+
+    if (opts.isServerBuild !== true) {
+      const file = this.fs.readFileSync(this.resource, 'utf-8').toString()
+      const code = extract(file, this, opts.strategy)
 
-    if (code !== void 0) {
-      const index = this.mode === 'development'
-        ? content.indexOf('/* hot reload */')
-        : -1
+      if (code !== void 0) {
+        const index = this.mode === 'development'
+          ? content.indexOf('/* hot reload */')
+          : -1
 
-      newContent = index === -1
-        ? content + code
-        : content.slice(0, index) + code + content.slice(index)
+        newContent = index === -1
+          ? content + code
+          : content.slice(0, index) + code + content.slice(index)
+      }
     }
   }
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-cli-plugin-quasar",
-  "version": "4.0.4",
-  "description": "Quasar Framework v2 plugin for Vue CLI v4+",
+  "version": "5.0.0",
+  "description": "Quasar Framework v2 plugin for Vue CLI v5",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"