fix(plugin-sass-palette): avoid using @import (#281)

plugins/development/plugin-sass-palette/src/node/prepare/prepareConfigSass.ts

@@ -1,16 +1,19 @@
 import type { App } from 'vuepress/core'
-import { getIdPrefix, getPath } from '../utils.js'
+import { getFileContent, getIdPrefix } from '../utils.js'
 
-export const prepareConfigSass = (
+export const prepareConfigSass = async (
   app: App,
   id: string,
   defaultConfig: string,
   userConfig: string,
-): Promise<string> =>
-  app.writeTemp(
+): Promise<string> => {
+  const contents = await Promise.all([
+    getFileContent(defaultConfig),
+    getFileContent(userConfig),
+  ])
+
+  return app.writeTemp(
     `sass-palette/${getIdPrefix(id)}config.scss`,
-    `\
-@import "file:///${getPath(defaultConfig)}";
-@import "file:///${getPath(userConfig)}";
-`,
+    `${contents.join('\n')}\n`,
   )
+}

plugins/development/plugin-sass-palette/src/node/prepare/preparePaletteSass.ts

@@ -1,5 +1,5 @@
 import type { App } from 'vuepress/core'
-import { getIdPrefix, getPath } from '../utils.js'
+import { getFileContent, getIdPrefix } from '../utils.js'
 
 export interface PreparePaletteOptions {
   id: string
@@ -8,15 +8,18 @@ export interface PreparePaletteOptions {
   userPalette: string
 }
 
-export const preparePaletteSass = (
+export const preparePaletteSass = async (
   app: App,
   { id, defaultPalette, generator, userPalette }: PreparePaletteOptions,
-): Promise<string> =>
-  app.writeTemp(
+): Promise<string> => {
+  const contents = await Promise.all([
+    defaultPalette ? getFileContent(defaultPalette) : '',
+    getFileContent(userPalette),
+    getFileContent(generator),
+  ])
+
+  return app.writeTemp(
     `sass-palette/${getIdPrefix(id)}palette.scss`,
-    `\
-${defaultPalette ? `@import "file:///${getPath(defaultPalette)}";` : ''}
-@import "file:///${getPath(userPalette)}";
-@import "file:///${getPath(generator)}";
-`,
+    `${contents.join('\n')}\n`,
   )
+}

plugins/development/plugin-sass-palette/src/node/sassPalettePlugin.ts

@@ -1,4 +1,4 @@
-import { addViteConfig, chainWebpack } from '@vuepress/helper'
+import { addViteConfig } from '@vuepress/helper'
 import { watch } from 'chokidar'
 import type { PluginFunction } from 'vuepress/core'
 import { getDirname, path } from 'vuepress/utils'
@@ -68,39 +68,19 @@ export const sassPalettePlugin =
       },
 
       extendsBundlerOptions: (bundlerOptions: unknown): void => {
-        // switch to modern api and silent import deprecation for vite
+        // switch to modern api for vite
         addViteConfig(bundlerOptions, app, {
           css: {
             preprocessorOptions: {
               sass: {
                 api: 'modern',
-                silenceDeprecations: ['import'],
               },
               scss: {
                 api: 'modern',
-                silenceDeprecations: ['import'],
               },
             },
           },
         })
-        // silent import deprecation for webpack
-        chainWebpack(bundlerOptions, app, (webpackOptions) => {
-          webpackOptions.module
-            .rule('scss')
-            .use('sass-loader')
-            .tap((loaderOptions) => ({
-              ...loaderOptions,
-              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-              sassOptions: {
-                ...loaderOptions.sassOptions,
-                silenceDeprecations: [
-                  'import',
-                  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
-                  ...(loaderOptions.sassOptions?.silenceDeprecations ?? []),
-                ],
-              },
-            }))
-        })
         injectScssConfigModule(bundlerOptions, app, id)
       },
 

plugins/development/plugin-sass-palette/src/node/utils.ts

@@ -9,6 +9,11 @@ export const PLUGIN_NAME = '@vuepress/plugin-sass-palette'
 
 export const logger = new Logger(PLUGIN_NAME)
 
+export const getFileContent = async (filePath: string): Promise<string> =>
+  fs.pathExistsSync(filePath)
+    ? fs.readFile(filePath, { encoding: 'utf-8' })
+    : ''
+
 export const getPath = (filePath: string): string =>
   fs.pathExistsSync(filePath) ? filePath : EMPTY_FILE