fix(styles): resolve new scss component styles (#345)

Co-authored-by: Kael <[email protected]>

Author: userquin

dev/src/App.vue

@@ -9,6 +9,7 @@
         <v-card-text>
           <v-text-field></v-text-field>
           <v-btn></v-btn>
+          <v-icon-btn icon="$vuetify"></v-icon-btn>
 <!--          <v-list>-->
 <!--            <v-list-item title="List"></v-list-item>-->
 <!--            <v-list-group>-->

dev/vite.config.mjs

@@ -10,7 +10,9 @@ export default defineConfig(({ command }) => ({
   plugins: [
     vue(),
     vuetify({
-      autoImport: true,
+      autoImport: {
+        labs: true,
+      },
       styles: {
         configFile: 'settings.scss',
       },

dev/webpack.config.js

@@ -91,6 +91,9 @@ module.exports = {
   plugins: [
     new VueLoaderPlugin(),
     new VuetifyPlugin({
+      autoImport: {
+        labs: true,
+      },
       styles: {
         configFile: './src/settings.scss',
       },

packages/vite-plugin/src/stylesPlugin.ts

@@ -1,4 +1,5 @@
 import path from 'upath'
+import fs from 'node:fs/promises'
 import { resolveVuetifyBase, normalizePath, isObject } from '@vuetify/loader-shared'
 
 import type { Plugin } from 'vite'
@@ -18,6 +19,23 @@ export function stylesPlugin (options: Options): Plugin {
 
   let configFile: string
   const tempFiles = new Map<string, string>()
+  const mappings = new Map<string, string>()
+
+  async function resolveCss(target: string) {
+    let mapping = mappings.get(target)
+    if (!mapping) {
+      try {
+        mapping = target.replace(/\.css$/, '.sass')
+        await fs.access(mapping, fs.constants.R_OK)
+      } catch (err) {
+        if (!(err instanceof Error && 'code' in err && err.code === 'ENOENT')) throw err
+        mapping = target.replace(/\.css$/, '.scss')
+      }
+      mappings.set(target, mapping)
+    }
+
+    return mapping
+  }
 
   return {
     name: 'vuetify:styles',
@@ -42,16 +60,17 @@ export function stylesPlugin (options: Options): Plugin {
         if (options.styles === 'none') {
           return `${PLUGIN_VIRTUAL_PREFIX}__void__`
         } else if (options.styles === 'sass') {
-          const target = source.replace(/\.css$/, '.sass')
+          const target = await resolveCss(source)
           return this.resolve(target, importer, { skipSelf: true, custom })
         } else if (isObject(options.styles)) {
           const resolution = await this.resolve(source, importer, { skipSelf: true, custom })
 
           if (!resolution) return null
 
-          const target = resolution.id.replace(/\.css$/, '.sass')
+          const target = await resolveCss(resolution.id)
           const file = path.relative(path.join(vuetifyBase, 'lib'), target)
-          const contents = `@use "${normalizePath(configFile)}"\n@use "${normalizePath(target)}"`
+          const suffix = target.match(/\.scss/) ? ';\n' : '\n'
+          const contents = `@use "${normalizePath(configFile)}"${suffix}@use "${normalizePath(target)}"${suffix}`
 
           tempFiles.set(file, contents)
 

packages/webpack-plugin/src/plugin.ts

@@ -1,5 +1,5 @@
 import { URLSearchParams } from 'url'
-import { writeFile } from 'fs/promises'
+import fs from 'fs/promises'
 
 import path from 'upath'
 import mkdirp from 'mkdirp'
@@ -76,6 +76,22 @@ export class VuetifyPlugin {
       })
     }
 
+    const stylesCache = new Map<string, string>()
+    async function resolveCSS (target: string) {
+      let result = stylesCache.get(target)
+      if (!result) {
+        try {
+          result = target.replace(/\.css$/, '.sass')
+          await fs.access(result, fs.constants.R_OK)
+        } catch (err) {
+          if (!(err instanceof Error && 'code' in err && err.code === 'ENOENT')) throw err
+          result = target.replace(/\.css$/, '.scss')
+        }
+        stylesCache.set(target, result)
+      }
+      return result
+    }
+
     if (this.options.styles === 'none') {
       compiler.options.module.rules.push({
         enforce: 'pre',
@@ -85,7 +101,7 @@ export class VuetifyPlugin {
         loader: 'null-loader',
       })
     } else if (this.options.styles === 'sass') {
-      hookResolve(file => file.replace(/\.css$/, '.sass'))
+      hookResolve(resolveCSS)
     } else if (isObject(this.options.styles)) {
       const findCacheDir = (await import('find-cache-dir')).default
       const cacheDir = findCacheDir({
@@ -100,12 +116,14 @@ export class VuetifyPlugin {
         )
 
       hookResolve(async request => {
-        const target = request.replace(/\.css$/, '.sass')
+        const target = await resolveCSS(request)
         const file = path.relative(vuetifyBase, target)
         const cacheFile = path.join(cacheDir, file)
+        const suffix = target.match(/\.scss/) ? ';\n' : '\n'
+        const contents = `@use "${normalizePath(configFile)}"${suffix}@use "${normalizePath(target)}"${suffix}`
 
         await mkdirp(path.dirname(cacheFile))
-        await writeFile(cacheFile, `@use "${normalizePath(configFile)}"\n@use "${normalizePath(target)}"`)
+        await fs.writeFile(cacheFile, contents)
 
         return cacheFile
       })