feat!: add modern SASS compiler support (#255)

* feat!: add modern SASS compiler support

* chore: add pwa dev dependencies

* chore: cleanup vite configuration

* chore: use settings.scss

* chore: update types

* chore: update compatibility matrix

* chore: include no ssr page

* chore: use vite virtual convention

* chore: include DPR in docs (not exposed)

* chore: include modern sass compiler page

* chore: don't configure `legacy` compiler, let vite use the default

* chore: update sass page

* chore: .

* chore: include vuetify link

Author: userquin

date-io-playground/nuxt.config.ts

@@ -1,4 +1,5 @@
 export default defineNuxtConfig({
+  compatibilityDate: '2024-08-15',
   // ssr: false,
   sourcemap: true,
   imports: {

date-io-playground/package.json

@@ -23,18 +23,18 @@
     "@types/moment": "^2.13.0",
     "@types/moment-hijri": "^2.1.0",
     "@types/moment-jalaali": "^0.7.6",
-    "@unocss/nuxt": "^0.61.3",
+    "@unocss/nuxt": "^0.62.1",
     "date-fns": "^2.30.0",
     "date-fns-jalali": "^2.19.0-2",
     "dayjs": "^1.11.10",
     "luxon": "^3.4.3",
     "moment": "^2.29.4",
     "moment-hijri": "^2.1.2",
     "moment-jalaali": "0.9.2",
-    "nuxt": "^3.12.3",
-    "sass": "^1.63.6",
-    "typescript": "^5.4.3",
-    "vue-tsc": "^2.0.26",
+    "nuxt": "^3.12.4",
+    "sass": "^1.77.8",
+    "typescript": "^5.5.4",
+    "vue-tsc": "^2.0.29",
     "vuetify-nuxt-module": "workspace:*"
   }
 }

docs/.vitepress/config.ts

@@ -190,6 +190,9 @@ export default withPwa(defineConfig({
       }, {
         text: 'Date Support',
         link: '/guide/date',
+      }, {
+        text: 'SASS Modern Compiler',
+        link: '/guide/sass-modern-compiler',
       }, {
         text: 'FAQ',
         link: '/guide/faq',

docs/guide/compatibility-matrix.md

@@ -6,3 +6,4 @@
 | <0.13.0     | ^3.6.5  | ^3.5.1  | ^8.0.0         |
 | >=0.13.0    | ^3.9.0  | ^3.5.1  | ^8.0.0         |
 | >0.15.0     | >=3.9.0 | ^3.6.12 | ^8.0.0         |
+| >=0.17.0    | >=3.9.0 | ^3.7.0  | ^8.0.0         |

docs/guide/sass-modern-compiler.md

@@ -0,0 +1,9 @@
+# SASS Modern Compiler
+
+From version `0.17.0`, this module will configure Nuxt to use the new SASS modern compiler (`modern-compiler`). You don't need to change anything in your configuration to use it:
+- update `vite` version to `v5.4.0` or higher (if you're using Nuxt `3.12.4` or higher, you don't need to update `vite`)
+- replace your `sass` dependency with `sass-embedded`
+
+If the `sass-embedded` dependency is not installed, the module will configure the `modern` compiler for you. In case you get errors, enable the `disableModernSassCompiler` option in the module configuration to fall back to the `legacy` compiler.
+
+Check [Build Performance](https://vuetifyjs.com/en/features/sass-variables/#build-performance) in Vuetify docs for more details.

docs/guide/server-side-rendering.md

@@ -11,6 +11,7 @@ The module includes support for the following [HTTP Client hints](https://develo
 - [Sec-CH-Prefers-Reduced-Motion](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion)
 - [Sec-CH-Viewport-Width](https://wicg.github.io/responsive-image-client-hints/#sec-ch-viewport-width)
 - [Sec-CH-Viewport-Height](https://wicg.github.io/responsive-image-client-hints/#sec-ch-viewport-height)
+- [Sec-CH-DPR](https://wicg.github.io/responsive-image-client-hints/#sec-ch-dpr)
 
 ::: warning
 The [HTTP Client hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints) headers listed above are still in draft, and only Chromium based browsers support them: Chrome, Edge, Chromium and Opera.
@@ -98,7 +99,7 @@ Check [SSR HTTP Client hints](#ssr-http-client-hints) for more details.
 ## SSR HTTP Client hints
 
 You can enable SSR **HTTP Client hints** using the `ssrClientHints` module option:
-- `viewportSize`: enable `Sec-CH-Viewport-Width` and `Sec-CH-Viewport-Height` headers (defaults to `false`)?
+- `viewportSize`: enable `Sec-CH-Viewport-Width`, `Sec-CH-Viewport-Height` and `Sec-CH-DPR` headers (defaults to `false`)?
 - `prefersColorScheme`: enable `Sec-CH-Prefers-Color-Scheme` header (defaults to `false`)? Check [Sec-CH-Prefers-Color-Scheme](#sec-ch-prefers-color-scheme) for more details
 - `prefersReducedMotion`: `Sec-CH-Prefers-Reduced-Motion` header (defaults to `false`)?
 

docs/package.json

@@ -14,12 +14,14 @@
     "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@iconify-json/carbon": "^1.1.27",
+    "@iconify-json/carbon": "^1.1.37",
     "@types/node": "^20.6.0",
-    "@vite-pwa/assets-generator": "^0.2.2",
-    "@vite-pwa/vitepress": "^0.3.1",
-    "sitemap": "^7.1.1",
-    "unocss": "^0.58.0",
-    "vitepress": "^1.0.1"
+    "@vite-pwa/assets-generator": "^0.2.4",
+    "@vite-pwa/vitepress": "^0.5.0",
+    "sitemap": "^8.0.0",
+    "unocss": "^0.62.1",
+    "vite-plugin-pwa": "^0.20.1",
+    "vitepress": "^1.3.2",
+    "workbox-window": "^7.1.0"
   }
 }

modern-sass-compiler/app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>

modern-sass-compiler/assets/custom-vuetify.scss

@@ -0,0 +1,3 @@
+@use 'vuetify/settings' with (
+  $button-font-weight: 700,
+);