feat!: update auto import and styles Vite plugins (#271)

* feat!: update auto import and styles vite plugins

* chore: disable inlineStyles when SSR enabled

* chore: exclude vuetify styles plugin

* chore: use `sass-embedded` in playgrounds

* chore: allow disabling

* chore: update module options in docs

* chore: cleanup scss file

* cleanup scss file

* Removed `features.inlineStyles` from playground configs

---------

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

Author: userquin

date-io-playground/nuxt.config.ts

@@ -50,7 +50,6 @@ export default defineNuxtConfig({
   },
   features: {
     devLogs: false,
-    inlineStyles: false,
   },
   experimental: {
     payloadExtraction: false,

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,3 @@
-/* DON'T USE @use here */
-@forward 'vuetify/settings' with (
-  /*$utilities: false,*/
-  $button-height: 40px,
+@use 'vuetify/settings' with (
+  $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,9 @@ export default defineNuxtConfig({
       ],
     },
   },
-  /*
   css: ['~/assets/main.scss'],
-*/
   features: {
     devLogs: 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/assets/main.scss

@@ -1,4 +1,9 @@
+/* Any variables in the sass files in this folder - https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/ */
+
+// $font-family: 'Inter var', 'Inter', 'Roboto', 'Helvetica Neue', sans-serif;
 @use 'vuetify' with (
   $utilities: false,
+  // $reset: false,
   $color-pack: false,
+  // $body-font-family: $font-family
 );