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]>
vuetifyjs · Aug 29, 2024 · 97e6fe0 · 97e6fe0
1 parent 4373b53
commit 97e6fe0
Show file tree

Hide file tree

Showing 24 changed files with 605 additions and 963 deletions.
diff --git a/date-io-playground/nuxt.config.ts b/date-io-playground/nuxt.config.ts
@@ -50,7 +50,6 @@ export default defineNuxtConfig({
   },
   features: {
     devLogs: false,
-    inlineStyles: false,
   },
   experimental: {
     payloadExtraction: false,

diff --git a/date-io-playground/package.json b/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:*"

diff --git a/docs/guide/index.md b/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`?
    *

diff --git a/docs/guide/server-side-rendering.md b/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

diff --git a/modern-sass-compiler/assets/main.scss b/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;
+  }
+}
diff --git a/modern-sass-compiler/assets/settings.scss b/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
 );
diff --git a/modern-sass-compiler/nuxt.config.ts b/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,

diff --git a/modern-sass-compiler/package.json b/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",

diff --git a/package.json b/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": {

diff --git a/playground/assets/main.scss b/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
 );
diff --git a/playground/assets/settings.scss b/playground/assets/settings.scss
@@ -1,5 +1,5 @@
-/* DON'T USE @use here */
+/* Any sass variables of individual V[Component] components */
+/* used in index.vue page's style block, do not change @forward to @use */
 @forward 'vuetify/settings' with (
-  $utilities: false,
   $button-height: 40px,
 );
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -87,12 +87,11 @@ export default defineNuxtConfig({
   },
   // css: ['vuetify/styles'],
   // css: ['~/assets/main.scss'],
-  future: {
+  /* future: {
     typescriptBundlerResolution: false,
-  },
+  }, */
   features: {
     devLogs: false,
-    inlineStyles: false,
   },
   experimental: {
     payloadExtraction: false,

diff --git a/playground/package.json b/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:*"

diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -118,5 +118,16 @@ watch(current, () => {
         <v-date-picker />
       </v-locale-provider> -->
     </div>
+    <button class="mb-2 ml-2 px-2 my-button text-white bg-primary rounded-lg">
+      Reserve
+    </button>
   </div>
 </template>
+
+<style lang="scss">
+  @use '../assets/settings';
+
+  .my-button {
+    height: settings.$button-height;
+  }
+</style>