fix/feat(vite-plugin): Improve and future-proof the transform checks

vite-plugin/package.json

@@ -32,6 +32,7 @@
     "rollup": "^2.58.0"
   },
   "peerDependencies": {
+    "@vitejs/plugin-vue": "^2.0.0 || ^3.0.0",
     "quasar": "^2.8.0",
     "vite": "^2.0.0 || ^3.0.0",
     "vue": "^3.0.0"

vite-plugin/src/js-transform.js

@@ -1,7 +1,6 @@
 import importTransformation from 'quasar/dist/transforms/import-transformation.js'
 
 const importQuasarRegex = /import\s*\{([\w,\s]+)\}\s*from\s*(['"])quasar\2;?/g
-export const jsTransformRegex = /\.[jt]sx?$/
 
 export function jsDevTransform (code) {
   return code.replace(

vite-plugin/src/plugin.js

@@ -1,9 +1,10 @@
 import { normalizePath } from 'vite'
 
 import { getViteConfig } from './vite-config'
-import { jsDevTransform, jsProdTransform, jsTransformRegex } from './js-transform'
-import { vueTransform, vueTransformRegex } from './vue-transform'
-import { sassTransformRegex, scssTransformRegex, createScssTransform } from './scss-transform'
+import { jsDevTransform, jsProdTransform } from './js-transform'
+import { vueTransform } from './vue-transform'
+import { createScssTransform } from './scss-transform'
+import { parseViteRequest } from './utils/query'
 
 const defaultOptions = {
   runMode: 'web-client',
@@ -39,13 +40,15 @@ function getScssTransformsPlugin (opts) {
     name: 'vite:quasar:scss',
     enforce: 'pre',
     transform (src, id) {
-      if (scssTransformRegex.test(id) === true) {
+      const { is } = parseViteRequest(id)
+
+      if (is.style('.scss')) {
         return {
           code: scssTransform(src),
           map: null
         }
       }
-      if (sassTransformRegex.test(id) === true) {
+      if (is.style('.sass')) {
         return {
           code: sassTransform(src),
           map: null
@@ -68,13 +71,15 @@ function getScriptTransformsPlugin (opts) {
       }
     },
     transform (src, id) {
-      if (vueTransformRegex.test(id) === true) {
+      const { is } = parseViteRequest(id)
+
+      if (is.template()) {
         return {
           code: vueTransform(src, opts.autoImportComponentCase, jsCodeTransform),
           map: null // provide source map if available
         }
       }
-      else if (jsTransformRegex.test(id) === true) {
+      else if (is.script()) {
         return {
           code: jsCodeTransform(src),
           map: null // provide source map if available

vite-plugin/src/scss-transform.js

@@ -1,7 +1,3 @@
-
-export const scssTransformRegex = /\.scss$/
-export const sassTransformRegex = /\.sass$/
-
 export function createScssTransform (fileExtension, sassVariables) {
   const sassImportCode = [ `@import 'quasar/src/css/variables.sass'`, '' ]
 

vite-plugin/src/utils/query.js

@@ -0,0 +1,57 @@
+/**
+ * @typedef {{
+ *  vue: () => boolean;
+ *  template: () => boolean;
+ *  script: (extensions?: string | string[]) => boolean;
+ *  style: (extensions?: string | string[]) => boolean;
+ * }} ViteQueryIs
+ */
+
+/**
+ * @see https://github.com/vitejs/vite/blob/364aae13f0826169e8b1c5db41ac6b5bb2756958/packages/plugin-vue/src/utils/query.ts - source of inspiration
+ * @example
+ * '/absolute/path/src/App.vue' // Can contain combined template&script -> template: true, script: true, style: false
+ * '/absolute/path/src/App.vue?vue&type=script&lang.js' // Only contains script -> template: false, script: true, style: false
+ * '/absolute/path/src/App.vue?vue&type=style&lang.sass' // Only contains style -> template: false, script: false, style: true
+ * '/absolute/path/src/script.js' // Only contains script -> template: false, script: true, style: false
+ * '/absolute/path/src/index.scss' // Only contains style -> template: false, script: false, style: true
+ *
+ * @param {string} id
+ * @returns {{ filename: string; query: { [key: string]: string; }; is: ViteQueryIs }}
+ */
+export function parseViteRequest(id) {
+  const [filename, rawQuery] = id.split('?', 2)
+  const query = Object.fromEntries(new URLSearchParams(rawQuery))
+
+  const isVueQuery = query.vue !== void 0
+
+  return {
+    filename,
+    query,
+
+    is: {
+      vue: () => isVueQuery || isOfExt({ extensions: '.vue', filename }),
+      template: () =>
+        isVueQuery
+          ? query.type === void 0 || query.type === 'template'
+          : isOfExt({ filename, extensions: '.vue' }),
+      script: (extensions = ['.js', '.jsx', '.ts', '.tsx', '.vue']) =>
+        isVueQuery
+          ? (query.type === void 0 || query.type === 'script') &&
+            isOfExt({ query, extensions })
+          : isOfExt({ filename, extensions }),
+      style: (extensions = ['.css', '.scss', '.sass']) =>
+        isVueQuery
+          ? query.type === 'style' && isOfExt({ query, extensions })
+          : isOfExt({ filename, extensions }),
+    },
+  }
+}
+
+function isOfExt({ extensions, filename, query }) {
+  extensions = Array.isArray(extensions) ? extensions : [extensions]
+
+  return extensions.some(
+    (ext) => filename?.endsWith(ext) || query?.[`lang${ext}`] !== void 0
+  )
+}

vite-plugin/src/vue-transform.js

@@ -3,8 +3,6 @@ import importTransformation from 'quasar/dist/transforms/import-transformation.j
 
 import { jsProdTransform } from './js-transform.js'
 
-export const vueTransformRegex = /\.vue(?:\?vue&type=(?:template|script)(?:&setup=true)?&lang\.(?:j|t)s)?$/
-
 const compRegex = {
   'kebab': new RegExp(`_resolveComponent\\("${autoImportData.regex.kebabComponents}"\\)`, 'g'),
   'pascal': new RegExp(`_resolveComponent\\("${autoImportData.regex.pascalComponents}"\\)`, 'g'),