feat: support meta.load-css()

Author: KaelWD

dev/src/App.vue

@@ -11,6 +11,12 @@
           <v-btn></v-btn>
 <!--          <v-list>-->
 <!--            <v-list-item title="List"></v-list-item>-->
+<!--            <v-list-group>-->
+<!--              <template #activator="{ props }">-->
+<!--                <v-list-item title="Group" v-bind="props"></v-list-item>-->
+<!--              </template>-->
+<!--              <v-list-item title="Sub item"></v-list-item>-->
+<!--            </v-list-group>-->
 <!--          </v-list>-->
         </v-card-text>
       </v-card>

dev/src/main.scss

@@ -1,5 +1,12 @@
 @use 'vuetify/styles' with (
   $color-pack: false,
-  $alert-padding: 24px,
   $utilities: false,
+  $alert-padding: 24px,
 );
+
+//@use 'sass:meta';
+//@include meta.load-css('vuetify/styles', (
+//        color-pack: false,
+//        utilities: false,
+//        alert-padding: 24px,
+//));

dev/vite.config.js

@@ -39,5 +39,8 @@ export default {
         // additionalData: `@forward '@/src/_variables'\n`,
       }
     }
+  },
+  optimizeDeps: {
+    exclude: ['vuetify']
   }
 }

package.json

@@ -18,7 +18,7 @@
     "@vue/compiler-sfc": "^3.2.24",
     "conventional-changelog-conventionalcommits": "^4.6.1",
     "lerna": "^3.22.1",
-    "sass": "^1.49.9",
+    "sass": "^1.52.3",
     "typescript": "^4.4.2",
     "vite": "^2.7.1",
     "vue": "^3.2.19",

packages/vite-plugin/src/stylesPlugin.ts

@@ -14,7 +14,7 @@ function isSubdir (root: string, test: string) {
   return relative && !relative.startsWith('..') && !path.isAbsolute(relative)
 }
 
-const styleImportRegexp = /@use ['"]vuetify(\/lib)?\/styles(\/main(\.sass)?)?['"]/
+const styleImportRegexp = /(@use |meta\.load-css\()['"](vuetify(?:\/lib)?\/styles(?:\/main(?:\.sass)?)?)['"]/
 
 export function stylesPlugin (options: Options): PluginOption {
   const vuetifyBase = path.dirname(require.resolve('vuetify/package.json'))
@@ -166,7 +166,7 @@ export function stylesPlugin (options: Options): PluginOption {
         await awaitResolve(id)
         debug(`returning ${id}`)
 
-        return code.replace(styleImportRegexp, '@use ".cache/vuetify/styles.scss"')
+        return code.replace(styleImportRegexp, '$1".cache/vuetify/styles.scss"')
       }
     },
     load (id) {

yarn.lock

@@ -7695,10 +7695,10 @@ sass-loader@^12.6.0:
     klona "^2.0.4"
     neo-async "^2.6.2"
 
-sass@^1.49.9:
-  version "1.49.9"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.9.tgz#b15a189ecb0ca9e24634bae5d1ebc191809712f9"
-  integrity sha512-YlYWkkHP9fbwaFRZQRXgDi3mXZShslVmmo+FVK3kHLUELHHEYrCmL1x6IUjC7wLS6VuJSAFXRQS/DxdsC4xL1A==
+sass@^1.52.3:
+  version "1.52.3"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.52.3.tgz#b7cc7ffea2341ccc9a0c4fd372bf1b3f9be1b6cb"
+  integrity sha512-LNNPJ9lafx+j1ArtA7GyEJm9eawXN8KlA1+5dF6IZyoONg1Tyo/g+muOsENWJH/2Q1FHbbV4UwliU0cXMa/VIA==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"