feat: add styles.configFile option

KaelWD · KaelWD · commit 9142e9d644ba · 2022-09-01T03:37:49.000+10:00
closes #263 closes #245 closes #221
diff --git a/dev/src/App.vue b/dev/src/App.vue
@@ -2,7 +2,7 @@
   <v-app>
     <v-container>
       <v-alert>Alert</v-alert>
-      <v-card v-ripple>
+      <v-card v-ripple class="bg-red">
         <div style="text-align: center">
           <v-img src="/vuetify.png" style="display: inline-flex"></v-img>
         </div>
diff --git a/dev/src/main.js b/dev/src/main.js
@@ -1,5 +1,5 @@
-// import 'vuetify/styles'
-import './main.scss'
+import 'vuetify/styles'
+// import './main.scss'
 import { createApp } from 'vue'
 import { createVuetify } from 'vuetify'
 
diff --git a/dev/src/main.scss b/dev/src/main.scss
@@ -1,4 +1,4 @@
-@use 'vuetify/styles' with (
+@use 'vuetify' with (
   $color-pack: false,
   $utilities: false,
   $alert-padding: 24px,
diff --git a/dev/src/settings.scss b/dev/src/settings.scss
@@ -0,0 +1,5 @@
+@forward 'vuetify/settings' with (
+  $utilities: false,
+  //$color-pack: false,
+  $button-height: 56px,
+);
diff --git a/dev/src/setup.vue b/dev/src/setup.vue
@@ -2,6 +2,6 @@
   <v-card title="Setup component"></v-card>
 </template>
 
-<script setup lang="ts">
+<script setup>
 //
 </script>
diff --git a/dev/vite.config.js b/dev/vite.config.js
@@ -8,7 +8,12 @@ export default defineConfig(({ command }) => ({
   root: path.resolve(__dirname, 'src'),
   plugins: [
     vue(),
-    vuetify({ styles: 'expose', autoImport: true }),
+    vuetify({
+      autoImport: true,
+      styles: {
+        configFile: 'settings.scss',
+      },
+    }),
     {
       name: 'configure-server',
       configureServer(server) {
diff --git a/dev/webpack.config.js b/dev/webpack.config.js
@@ -10,7 +10,7 @@ function sassLoaderOptions (indentedSyntax = false) {
   return {
     // implementation: require('sass'),
     // additionalData: `@import "~@/_variables.scss"` + (indentedSyntax ? '' : ';'),
-    api: 'modern',
+    // api: 'modern',
     sassOptions: {
       indentedSyntax,
       // importers: [{
@@ -86,12 +86,14 @@ module.exports = {
       'vue$': 'vue/dist/vue.runtime.esm-bundler.js',
       '@': path.resolve(__dirname, 'src')
     },
-    extensions: ['*', '.js', '.mjs', '.cjs', '.vue', '.json']
+    extensions: ['*', '.js', '.mjs', '.cjs', '.vue', '.json', '.sass', '.scss']
   },
   plugins: [
     new VueLoaderPlugin(),
     new VuetifyPlugin({
-      styles: 'expose',
+      styles: {
+        configFile: './src/settings.scss',
+      },
       // progressiveImages: true
     }),
     // new BundleAnalyzerPlugin({
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@types/find-cache-dir": "^3.2.1",
     "@types/loader-utils": "^2.0.3",
     "@types/node": "^16.11.12",
+    "@types/mkdirp": "^1.0.2",
     "@typescript-eslint/eslint-plugin": "^5.29.0",
     "@typescript-eslint/parser": "^5.29.0",
     "@vitejs/plugin-vue": "^3.0.1",
diff --git a/packages/shared/src/index.ts b/packages/shared/src/index.ts
@@ -2,7 +2,9 @@ import * as path from 'upath'
 
 export interface Options {
   autoImport?: importPluginOptions,
-  styles?: true | 'none' | 'expose' | 'sass',
+  styles?: true | 'none' | 'expose' | 'sass' | {
+    configFile: string,
+  },
   /** @internal Only for testing */
   stylesTimeout?: number
 }
@@ -18,3 +20,11 @@ export { cacheDir, writeStyles } from './styles/writeStyles'
 export function resolveVuetifyBase () {
   return path.dirname(require.resolve('vuetify/package.json', { paths: [process.cwd()] }))
 }
+
+export function isObject (value: any): value is object {
+  return value !== null && typeof value === 'object'
+}
+
+export function includes (arr: any[], val: any) {
+  return arr.includes(val)
+}
diff --git a/packages/vite-plugin/README.md b/packages/vite-plugin/README.md
@@ -30,6 +30,31 @@ export default createVuetify()
 ### Customising variables
 ```js
 // vite.config.js
+plugins: [
+  vue(),
+  vuetify({ styles: { configFile: 'src/settings.scss' } }),
+]
+```
+```js
+// plugins/vuetify.js
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+
+export default createVuetify()
+```
+```scss
+// settings.scss
+@use 'vuetify/settings' with (
+  $color-pack: false,
+  $utilities: false,
+);
+```
+
+`settings.scss` can be used in your own components to access vuetify's variables.
+
+### Customising variables (old method)
+```js
+// vite.config.js
 plugins: [
   vue(),
   vuetify({ styles: 'expose' }),
diff --git a/packages/vite-plugin/src/index.ts b/packages/vite-plugin/src/index.ts
@@ -1,5 +1,5 @@
 import { Plugin } from 'vite'
-import { Options } from '@vuetify/loader-shared'
+import { Options, isObject, includes } from '@vuetify/loader-shared'
 
 import { importPlugin } from './importPlugin'
 import { stylesPlugin } from './stylesPlugin'
@@ -16,7 +16,7 @@ function vuetify (_options: Options = {}): Plugin[] {
   if (options.autoImport) {
     plugins.push(importPlugin())
   }
-  if (options.styles === 'none' || options.styles === 'expose' || options.styles === 'sass') {
+  if (includes(['none', 'expose', 'sass'], options.styles) || isObject(options.styles)) {
     plugins.push(stylesPlugin(options))
   }
 
diff --git a/packages/vite-plugin/src/stylesPlugin.ts b/packages/vite-plugin/src/stylesPlugin.ts
@@ -126,6 +126,9 @@ export function stylesPlugin (options: Options): Plugin {
     return promise
   }
 
+  let configFile: string | undefined
+  const tempFiles = new Map<string, string>()
+
   return {
     name: 'vuetify:styles',
     enforce: 'pre',
@@ -137,11 +140,22 @@ export function stylesPlugin (options: Options): Plugin {
         context = this
       }
     },
+    configResolved (config) {
+      if (typeof options.styles === 'object') {
+        if (path.isAbsolute(options.styles.configFile)) {
+          configFile = options.styles.configFile
+        } else {
+          configFile = path.join(config.root || process.cwd(), options.styles.configFile)
+        }
+      }
+    },
     async resolveId (source, importer, { custom }) {
       if (
-        importer &&
-        source.endsWith('.css') &&
-        isSubdir(vuetifyBase, path.isAbsolute(source) ? source : importer)
+        source === 'vuetify/styles' || (
+          importer &&
+          source.endsWith('.css') &&
+          isSubdir(vuetifyBase, path.isAbsolute(source) ? source : importer)
+        )
       ) {
         if (options.styles === 'none') {
           return '\0__void__'
@@ -165,7 +179,21 @@ export function stylesPlugin (options: Options): Plugin {
 
             return '\0__void__'
           }
+        } else if (typeof options.styles === 'object') {
+          const resolution = await this.resolve(source, importer, { skipSelf: true, custom })
+
+          if (!resolution) return null
+
+          const target = resolution.id.replace(/\.css$/, '.sass')
+          const file = path.relative(path.join(vuetifyBase, 'lib'), target)
+          const contents = `@use "${configFile}"\n@use "${target}"`
+
+          tempFiles.set(file, contents)
+
+          return `\0plugin-vuetify:${file}`
         }
+      } else if (source.startsWith('/plugin-vuetify:')) {
+        return '\0' + source.slice(1)
       }
 
       return null
@@ -193,6 +221,12 @@ export function stylesPlugin (options: Options): Plugin {
         return ''
       }
 
+      if (id.startsWith('\0plugin-vuetify')) {
+        const file = /^\0plugin-vuetify:(.*)(\?.*)?$/.exec(id)![1]
+
+        return tempFiles.get(file)
+      }
+
       return null
     },
   }
diff --git a/packages/webpack-plugin/README.md b/packages/webpack-plugin/README.md
@@ -72,6 +72,34 @@ Will be compiled into:
 // webpack.config.js
 const { VuetifyPlugin } = require('webpack-plugin-vuetify')
 
+module.exports = {
+  plugins: [
+    new VuetifyPlugin({ styles: { configFile: 'src/settings.scss' } }),
+  ],
+}
+```
+```js
+// plugins/vuetify.js
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+
+export default createVuetify()
+```
+```scss
+// settings.scss
+@forward 'vuetify/settings' with (
+  $color-pack: false,
+  $utilities: false,
+);
+```
+
+`settings.scss` can be used in your own components to access vuetify's variables. 
+
+### Customising variables (old method)
+```js
+// webpack.config.js
+const { VuetifyPlugin } = require('webpack-plugin-vuetify')
+
 module.exports = {
   plugins: [
     new VuetifyPlugin({ styles: 'expose' }),
diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json
@@ -25,7 +25,8 @@
     "find-cache-dir": "^3.3.2",
     "loader-utils": "^2.0.0",
     "null-loader": "^4.0.1",
-    "upath": "^2.0.1"
+    "upath": "^2.0.1",
+    "mkdirp": "^1.0.4"
   },
   "peerDependencies": {
     "@vue/compiler-sfc": "^3.2.6",
diff --git a/packages/webpack-plugin/src/plugin.ts b/packages/webpack-plugin/src/plugin.ts
@@ -1,6 +1,10 @@
-import * as path from 'upath'
 import { URLSearchParams } from 'url'
-import { resolveVuetifyBase, writeStyles } from '@vuetify/loader-shared'
+import { writeFile } from 'fs/promises'
+
+import * as path from 'upath'
+import * as mkdirp from 'mkdirp'
+
+import { resolveVuetifyBase, writeStyles, includes, isObject, cacheDir } from '@vuetify/loader-shared'
 
 import type { Compiler, NormalModule, Module } from 'webpack'
 import type { Options } from '@vuetify/loader-shared'
@@ -39,10 +43,23 @@ export class VuetifyPlugin {
 
     const vuetifyBase = resolveVuetifyBase()
 
-    if (
-      this.options.styles === 'none' ||
-      this.options.styles === 'expose'
-    ) {
+    function hookResolve (transform: (file: string) => string | Promise<string>) {
+      compiler.resolverFactory.hooks.resolver.for('normal').tap('vuetify-loader', resolver => {
+        resolver.getHook('beforeResult').tapAsync('vuetify-loader', async (request, context, callback) => {
+          if (
+            request.path &&
+            request.path.endsWith('.css') &&
+            isSubdir(vuetifyBase, request.path)
+          ) {
+            request.path = await transform(request.path)
+          }
+
+          callback(null, request)
+        })
+      })
+    }
+
+    if (includes(['none', 'expose'], this.options.styles)) {
       compiler.options.module.rules.push({
         enforce: 'pre',
         test: /\.css$/,
@@ -51,21 +68,7 @@ export class VuetifyPlugin {
         loader: 'null-loader',
       })
     } else if (this.options.styles === 'sass') {
-      compiler.hooks.normalModuleFactory.tap('vuetify-loader', factory => {
-        factory.hooks.beforeResolve.tap('vuetify-loader', resolveData => {
-          if (
-            resolveData.request.endsWith('.css') &&
-            isSubdir(vuetifyBase, resolveData.context)
-          ) {
-            const match = resolveData.request.match(/.*!(.+\.css)$/)
-            if (match) {
-              resolveData.request = match[1].replace(/\.css$/, '.sass')
-            } else {
-              resolveData.request = resolveData.request.replace(/\.css$/, '.sass')
-            }
-          }
-        })
-      })
+      hookResolve(file => file.replace(/\.css$/, '.sass'))
     }
 
     if (this.options.styles === 'expose') {
@@ -164,6 +167,24 @@ export class VuetifyPlugin {
             })
         }
       })
+    } else if (isObject(this.options.styles)) {
+      const configFile = path.isAbsolute(this.options.styles.configFile)
+        ? this.options.styles.configFile
+        : path.join(
+          compiler.options.context || process.cwd(),
+          this.options.styles.configFile,
+        )
+
+      hookResolve(async request => {
+        const target = request.replace(/\.css$/, '.sass')
+        const file = path.relative(vuetifyBase, target)
+        const cacheFile = cacheDir(file)
+
+        await mkdirp(path.dirname(cacheFile))
+        await writeFile(cacheFile, `@use "${configFile}"\n@use "${target}"`)
+
+        return cacheFile
+      })
     }
   }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1909,6 +1909,13 @@
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
+"@types/mkdirp@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@types/mkdirp/-/mkdirp-1.0.2.tgz#8d0bad7aa793abe551860be1f7ae7f3198c16666"
+  integrity sha512-o0K1tSO0Dx5X6xlU5F1D6625FawhC3dU3iqr25lluNv/+/QIVH8RLNEiVokgIZo+mz+87w/3Mkg/VvQS+J51fQ==
+  dependencies:
+    "@types/node" "*"
+
 "@types/ms@*":
   version "0.7.31"
   resolved "https://registry.yarnpkg.com/@types/ms/-/ms-0.7.31.tgz#31b7ca6407128a3d2bbc27fe2d21b345397f6197"
@@ -6328,7 +6335,7 @@ mkdirp-promise@^5.0.1:
   dependencies:
     mkdirp "*"
 
-mkdirp@*:
+mkdirp@*, mkdirp@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e"
   integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@use 'vuetify/styles' with (`
	`1`	`+@use 'vuetify' with (`
`2`	`2`	`$color-pack: false,`
`3`	`3`	`$utilities: false,`
`4`	`4`	`$alert-padding: 24px,`