Skip to content

Commit 97e6fe0

Browse files
userquinTechAkayy
userquin
and
TechAkayy
authored
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]>
1 parent 4373b53 commit 97e6fe0

24 files changed

+605
-963
lines changed

‎date-io-playground/nuxt.config.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ export default defineNuxtConfig({
5050
},
5151
features: {
5252
devLogs: false,
53-
inlineStyles: false,
5453
},
5554
experimental: {
5655
payloadExtraction: false,

‎date-io-playground/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"moment-hijri": "^2.1.2",
3333
"moment-jalaali": "0.9.2",
3434
"nuxt": "^3.12.4",
35-
"sass": "^1.77.8",
35+
"sass-embedded": "^1.77.8",
3636
"typescript": "^5.5.4",
3737
"vue-tsc": "^2.0.29",
3838
"vuetify-nuxt-module": "workspace:*"

‎docs/guide/index.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,29 @@ export interface MOptions {
118118
styles?: true | 'none' | 'sass' | {
119119
configFile: string
120120
}
121+
/**
122+
* The module will add `vuetify/styles` in Nuxt `css` option.
123+
*
124+
* If you want to add custom styles, you should enable this flag to avoid registering `vuetify/styles`.
125+
*
126+
* @see https://github.com/vuetifyjs/nuxt-module/pull/213
127+
* @default false
128+
*/
129+
disableVuetifyStyles?: boolean
130+
/**
131+
* Disable the modern SASS compiler and API.
132+
*
133+
* The module will check for `sass-embedded` dev dependency:
134+
* - if `disableModernSassCompiler` is enabled, the module will configure the legacy SASS compiler.
135+
* - if `sass-embedded` dependency is installed, the module will configure the modern SASS compiler.
136+
* - 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.
137+
*
138+
* @https://vitejs.dev/config/shared-options.html#css-preprocessoroptions
139+
* @see https://vitejs.dev/config/shared-options.html#css-preprocessormaxworkers
140+
*
141+
* @default false
142+
*/
143+
disableModernSassCompiler?: boolean
121144
/**
122145
* Add Vuetify Vite Plugin `transformAssetsUrls`?
123146
*

‎docs/guide/server-side-rendering.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ The [HTTP Client hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client
1919

2020
## Vuetify SASS Variables
2121

22+
::: tip
23+
From version `v0.18.0`, when SSR is enabled the module will disable `features.inlineStyles / experimental.inlineSSRStyles`.
24+
:::
25+
2226
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:
2327
```ts
2428
// Nuxt config file

‎modern-sass-compiler/assets/main.scss

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
@use 'vuetify' with (
2-
$utilities: false,
3-
$color-pack: false,
4-
);
1+
.gradient {
2+
&.primary {
3+
background: linear-gradient(to top right, #2563eb, #4b8efb);
4+
color: white;
5+
}
6+
}

‎modern-sass-compiler/assets/settings.scss

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/* DON'T USE @use here */
2-
@forward 'vuetify/settings' with (
3-
/*$utilities: false,*/
4-
$button-height: 40px,
1+
@use 'vuetify/settings' with (
2+
$button-border-radius: 8px
53
);

‎modern-sass-compiler/nuxt.config.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export default defineNuxtConfig({
22
compatibilityDate: '2024-08-15',
3+
ssr: true,
34
sourcemap: true,
45
imports: {
56
autoImport: true,
@@ -16,7 +17,8 @@ export default defineNuxtConfig({
1617
},
1718
viewportSize: true,
1819
},
19-
// styles: { configFile: 'assets/settings.scss' },
20+
// styles: 'sass',
21+
styles: { configFile: 'assets/settings.scss' },
2022
},
2123
},
2224
vite: {
@@ -51,12 +53,9 @@ export default defineNuxtConfig({
5153
],
5254
},
5355
},
54-
/*
5556
css: ['~/assets/main.scss'],
56-
*/
5757
features: {
5858
devLogs: false,
59-
// inlineStyles: false,
6059
},
6160
experimental: {
6261
payloadExtraction: false,

‎modern-sass-compiler/package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@
1515
"@nuxt/devtools": "latest",
1616
"@unocss/nuxt": "^0.62.1",
1717
"nuxt": "^3.12.4",
18-
"sass": "^1.77.8",
1918
"sass-embedded": "^1.77.8",
2019
"typescript": "^5.5.4",
2120
"vue-tsc": "^2.0.29",

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,8 @@
7373
"perfect-debounce": "^1.0.0",
7474
"ufo": "^1.5.4",
7575
"unconfig": "^0.5.5",
76-
"vite-plugin-vuetify": "^2.0.3",
76+
"upath": "^2.0.1",
77+
"vite-plugin-vuetify": "^2.0.4",
7778
"vuetify": "^3.7.0"
7879
},
7980
"devDependencies": {

‎playground/assets/main.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1+
/* Any variables in the sass files in this folder - https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/ */
2+
3+
// $font-family: 'Inter var', 'Inter', 'Roboto', 'Helvetica Neue', sans-serif;
14
@use 'vuetify' with (
25
$utilities: false,
6+
// $reset: false,
37
$color-pack: false,
8+
// $body-font-family: $font-family
49
);

‎playground/assets/settings.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
/* DON'T USE @use here */
1+
/* Any sass variables of individual V[Component] components */
2+
/* used in index.vue page's style block, do not change @forward to @use */
23
@forward 'vuetify/settings' with (
3-
$utilities: false,
44
$button-height: 40px,
55
);

‎playground/nuxt.config.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,12 +87,11 @@ export default defineNuxtConfig({
8787
},
8888
// css: ['vuetify/styles'],
8989
// css: ['~/assets/main.scss'],
90-
future: {
90+
/* future: {
9191
typescriptBundlerResolution: false,
92-
},
92+
}, */
9393
features: {
9494
devLogs: false,
95-
inlineStyles: false,
9695
},
9796
experimental: {
9897
payloadExtraction: false,

‎playground/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"@nuxtjs/i18n": "^8.3.3",
2323
"@unocss/nuxt": "^0.62.1",
2424
"nuxt": "^3.12.4",
25-
"sass": "^1.77.8",
25+
"sass-embedded": "^1.77.8",
2626
"typescript": "^5.5.4",
2727
"vue-tsc": "^2.0.29",
2828
"vuetify-nuxt-module": "workspace:*"

‎playground/pages/index.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,5 +118,16 @@ watch(current, () => {
118118
<v-date-picker />
119119
</v-locale-provider> -->
120120
</div>
121+
<button class="mb-2 ml-2 px-2 my-button text-white bg-primary rounded-lg">
122+
Reserve
123+
</button>
121124
</div>
122125
</template>
126+
127+
<style lang="scss">
128+
@use '../assets/settings';
129+
130+
.my-button {
131+
height: settings.$button-height;
132+
}
133+
</style>

0 commit comments

Comments
 (0)