feat!: update auto import and styles Vite plugins

date-io-playground/package.json

@@ -32,7 +32,7 @@
     "moment-hijri": "^2.1.2",
     "moment-jalaali": "0.9.2",
     "nuxt": "^3.12.4",
-    "sass": "^1.77.8",
+    "sass-embedded": "^1.77.8",
     "typescript": "^5.5.4",
     "vue-tsc": "^2.0.29",
     "vuetify-nuxt-module": "workspace:*"

docs/guide/index.md

@@ -118,6 +118,29 @@ export interface MOptions {
   styles?: true | 'none' | 'sass' | {
     configFile: string
   }
+  /**
+   * The module will add `vuetify/styles` in Nuxt `css` option.
+   *
+   * If you want to add custom styles, you should enable this flag to avoid registering `vuetify/styles`.
+   *
+   * @see https://github.com/vuetifyjs/nuxt-module/pull/213
+   * @default false
+   */
+  disableVuetifyStyles?: boolean
+  /**
+   * Disable the modern SASS compiler and API.
+   *
+   * The module will check for `sass-embedded` dev dependency:
+   * - if `disableModernSassCompiler` is enabled, the module will configure the legacy SASS compiler.
+   * - if `sass-embedded` dependency is installed, the module will configure the modern SASS compiler.
+   * - otherwise, the module will configure the modern SASS API and will enable [preprocessorMaxWorkers](https://vitejs.dev/config/shared-options.html#css-preprocessormaxworkers), only if not configured from user land.
+   *
+   * @https://vitejs.dev/config/shared-options.html#css-preprocessoroptions
+   * @see https://vitejs.dev/config/shared-options.html#css-preprocessormaxworkers
+   *
+   * @default false
+   */
+  disableModernSassCompiler?: boolean
   /**
    * Add Vuetify Vite Plugin `transformAssetsUrls`?
    *

docs/guide/server-side-rendering.md

@@ -19,6 +19,10 @@ The [HTTP Client hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client
 
 ## Vuetify SASS Variables
 
+::: tip
+From version `v0.18.0`, when SSR is enabled the module will disable `features.inlineStyles / experimental.inlineSSRStyles`.
+:::
+
 If you are customising Vuetify SASS Variables via [configFile](https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#customising-variables) module option with SSR enabled, you have to disable `features.inlineStyles` (`experimental.inlineSSRStyles` for Nuxt version prior to `3.9.0`) in your Nuxt config file, otherwise you will get an error when building your application:
 ```ts
 // Nuxt config file

modern-sass-compiler/assets/main.scss

@@ -1,4 +1,6 @@
-@use 'vuetify' with (
-  $utilities: false,
-  $color-pack: false,
-);
+.gradient {
+  &.primary {
+    background: linear-gradient(to top right, #2563eb, #4b8efb);
+    color: white;
+  }
+}

modern-sass-compiler/assets/settings.scss

@@ -1,5 +1,4 @@
-/* DON'T USE @use here */
-@forward 'vuetify/settings' with (
+@use 'vuetify/settings' with (
   /*$utilities: false,*/
-  $button-height: 40px,
+  $button-border-radius: 8px
 );

modern-sass-compiler/nuxt.config.ts

@@ -1,5 +1,6 @@
 export default defineNuxtConfig({
   compatibilityDate: '2024-08-15',
+  ssr: true,
   sourcemap: true,
   imports: {
     autoImport: true,
@@ -16,7 +17,8 @@ export default defineNuxtConfig({
         },
         viewportSize: true,
       },
-      // styles: { configFile: 'assets/settings.scss' },
+      // styles: 'sass',
+      styles: { configFile: 'assets/settings.scss' },
     },
   },
   vite: {
@@ -51,12 +53,10 @@ export default defineNuxtConfig({
       ],
     },
   },
-  /*
   css: ['~/assets/main.scss'],
-*/
   features: {
     devLogs: false,
-    // inlineStyles: false,
+    inlineStyles: false,
   },
   experimental: {
     payloadExtraction: false,

modern-sass-compiler/package.json

@@ -15,7 +15,6 @@
     "@nuxt/devtools": "latest",
     "@unocss/nuxt": "^0.62.1",
     "nuxt": "^3.12.4",
-    "sass": "^1.77.8",
     "sass-embedded": "^1.77.8",
     "typescript": "^5.5.4",
     "vue-tsc": "^2.0.29",

package.json

@@ -73,7 +73,8 @@
     "perfect-debounce": "^1.0.0",
     "ufo": "^1.5.4",
     "unconfig": "^0.5.5",
-    "vite-plugin-vuetify": "^2.0.3",
+    "upath": "^2.0.1",
+    "vite-plugin-vuetify": "^2.0.4",
     "vuetify": "^3.7.0"
   },
   "devDependencies": {

playground/nuxt.config.ts

@@ -87,9 +87,9 @@ export default defineNuxtConfig({
   },
   // css: ['vuetify/styles'],
   // css: ['~/assets/main.scss'],
-  future: {
+  /* future: {
     typescriptBundlerResolution: false,
-  },
+  }, */
   features: {
     devLogs: false,
     inlineStyles: false,

playground/package.json

@@ -22,7 +22,7 @@
     "@nuxtjs/i18n": "^8.3.3",
     "@unocss/nuxt": "^0.62.1",
     "nuxt": "^3.12.4",
-    "sass": "^1.77.8",
+    "sass-embedded": "^1.77.8",
     "typescript": "^5.5.4",
     "vue-tsc": "^2.0.29",
     "vuetify-nuxt-module": "workspace:*"