refactor(vue2): refactor styleProcessors to a webpack alias

Author: Toilal

src/vue2/styleProcessors.ts renamed to build/vue2StyleProcessors.ts

@@ -22,15 +22,22 @@ export interface StylePreprocessorResults {
   errors: Array<Error>
 }
 
+const customRequire = (name: string, options?: any) => {
+  const requireFn = options?.preprocessOptions?.customRequire
+  if (requireFn) {
+    return requireFn(name)
+  }
+  return require(name)
+}
+
 // .scss/.sass processor
 const scss: StylePreprocessor = {
   render(
     source: string,
     map: any | null,
-    options: any,
-    load: (id: string)=> any = require
+    options: any
   ): StylePreprocessorResults {
-    const nodeSass = load('sass')
+    const nodeSass = customRequire('sass', options)
     const finalOptions = Object.assign({}, options, {
       data: source,
       file: options.filename,
@@ -61,13 +68,11 @@ const sass = {
     source: string,
     map: any | null,
     options: any,
-    load: (id: string)=> any = require
   ): StylePreprocessorResults {
     return scss.render(
       source,
       map,
-      Object.assign({}, options, { indentedSyntax: true }),
-      load
+      Object.assign({}, options, { indentedSyntax: true })
     )
   }
 }
@@ -77,10 +82,9 @@ const less = {
   render(
     source: string,
     map: any | null,
-    options: any,
-    load: (id: string)=> any = require
+    options: any
   ): StylePreprocessorResults {
-    const nodeLess = load('less')
+    const nodeLess = customRequire('less', options)
 
     let result: any
     let error: Error | null = null
@@ -112,10 +116,9 @@ const styl = {
   render(
     source: string,
     map: any | null,
-    options: any,
-    load: (id: string)=> any = require
+    options: any
   ): StylePreprocessorResults {
-    const nodeStylus = load('stylus')
+    const nodeStylus = customRequire('stylus', options)
     try {
       const ref = nodeStylus(source)
       Object.keys(options).forEach(key => ref.set(key, options[key]))

build/webpack.config.js

@@ -208,6 +208,7 @@ ${ pkg.name } v${ pkg.version }
 				'less': false,
 				'prettier': false,
 				'./buble.js': Path.resolve(__dirname, 'fakeBuble.mjs'), // used by vue-template-es2015-compiler
+				'./styleProcessors': Path.resolve(__dirname, 'vue2StyleProcessors.ts'), // used by @vue/component-compiler-utils
 
 				...!genSourcemap ? {
 					'source-map': false,

src/createVue2SFCModule.ts

@@ -45,8 +45,6 @@ import {
 	CustomBlockCallback
 } from './types'
 
-import { processors as styleProcessors } from './vue2/styleProcessors'
-
 /**
  * the version of the library (process.env.VERSION is set by webpack, at compile-time)
  */
@@ -225,27 +223,12 @@ export async function createSFCModule(source : string, filename : string, option
 				filename,
 				id: scopeId,
 				scoped: descStyle.scoped,
-				trim: false
-			}
-
-			if (descStyle.lang) {
-				const processor = styleProcessors[descStyle.lang]
-				if (processor) {
-					const result = processor.render(
-						compileStyleOptions.source,
-						genSourcemap,
-						compileStyleOptions.preprocessOptions,
-						(id) => moduleCache[id]
-					)
-
-					if (result.errors.length) {
-						preventCache();
-						for ( const err of result.errors ) {
-							log?.('error', 'SFC style', formatError(err.message, filename, descStyle.content));
-						}
+				trim: false,
+				preprocessLang: descStyle.lang,
+				preprocessOptions: {
+					preprocessOptions: {
+						customRequire: (id: string) => moduleCache[id]
 					}
-
-					compileStyleOptions.source = result.code
 				}
 			}