feat: sass option support function (#1461)

docs/config.md

@@ -669,14 +669,13 @@ Child configuration items:
 
 ### sass
 
-- Type: `Omit<sass.Options<'async'>,'functions'>`
+- Type: `Options<'async'>`
 - Default: `{}`
 
 > The "sass" package is not installed. Please run "npm install sass" to install it.
 
 Specify the sass [configuration](https://sass-lang.com/documentation/js-api/interfaces/options/).
 
-> [functions configuration not supported](https://github.com/piscinajs/piscina/issues/130#issuecomment -842164393), functions can be defined in the scss file and then introduced for use in the header file.
 
 e.g.
 

docs/config.zh-CN.md

@@ -669,14 +669,13 @@ function App() {
 
 ### sass
 
-- 类型: `Omit<sass.Options<'async'>,'functions'>`
+- 类型: `Options<'async'>`
 - 默认值: `{}`
 
 > 未安装 `sass` 包。请运行 `npm install sass` 进行安装。
 
 指定 sass [配置](https://sass-lang.com/documentation/js-api/interfaces/options/).
 
-> [不支持 functions 配置](https://github.com/piscinajs/piscina/issues/130#issuecomment-842164393)，可以在 scss 文件中定义 functions ，然后在头文件中引入使用。
 
 例如：
 

e2e/fixtures.umi/config.sassLoader/.umirc.ts

@@ -1,6 +1,19 @@
+import sass from 'sass';
+
 export default {
   mfsu: false,
   mako: {},
   sassLoader: {
+    functions: {
+      // Note: in real code, you should use `math.pow()` from the built-in
+      // `sass:math` module.
+      'pow($base, $exponent)': function(args) {
+        const base = args[0].assertNumber('base').assertNoUnits('base');
+        const exponent =
+            args[1].assertNumber('exponent').assertNoUnits('exponent');
+
+        return new sass.SassNumber(Math.pow(base.value, exponent.value));
+      }
+    }
   },
 };

e2e/fixtures.umi/config.sassLoader/expect.js

@@ -5,3 +5,4 @@ const { files } = parseBuildResult(__dirname);
 let content = files["pages_index_tsx-async.css"];
 content = content.replace(/\s/g, "");
 assert(content.includes(`background:#79caf2;`), "sassLoader should support");
+assert(content.includes(`font-size:32px`), "functions should support");

e2e/fixtures.umi/config.sassLoader/pages/index.scss

@@ -2,5 +2,6 @@ $primary-color: rgb(121, 202, 242);
 
 .title {
   background: $primary-color;
+  font-size: pow(2, 5) * 1px;
   display: inline-block;
 }

packages/mako/src/index.ts

@@ -11,7 +11,7 @@ import { sassLoader } from './sassLoader';
 type Config = binding.BuildParams['config'] & {
   plugins?: binding.BuildParams['plugins'];
   less?: LessLoaderOpts;
-  sass?: Omit<Options<'async'>, 'functions'>;
+  sass?: Options<'async'> & { resources: string[] };
   forkTSChecker?: boolean;
 };
 
@@ -117,13 +117,7 @@ export async function build(params: BuildParams) {
       ...(makoConfig?.sass || {}),
       ...(params.config?.sass || {}),
     };
-    if (sassOpts?.functions) {
-      console.warn('sass.functions is no support');
-    }
-    // Symbols cannot be cloned by the structured cloning algorithm that is used behind the scenes when using postMessage with the worker thread. Since you didn't provide a full example I assume you are trying to pass your custom class to or from a worker. That's not possible. Even without symbols in your object it would always end up as a plain Object on the other end without any prototype information.
-    // https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
-    // https://nodejs.org/api/worker_threads.html#worker_threads_port_postmessage_value_transferlist
-    let sass = sassLoader(null, omit(sassOpts, ['functions']));
+    let sass = sassLoader(null, sassOpts);
     params.config.plugins.push({
       name: 'sass',
       async load(filePath: string) {

packages/mako/src/sassLoader/index.ts

@@ -1,12 +1,7 @@
 import url from 'url';
 import { type Options } from 'sass';
-import { createParallelLoader } from './parallelSassLoader';
 
-function sassLoader(
-  fn: Function | null,
-  opts: Omit<Options<'async'>, 'functions'>,
-) {
-  let parallelSassLoader: ReturnType<typeof createParallelLoader> | undefined;
+function sassLoader(fn: Function | null, opts: Options<'async'>) {
   return {
     render: async (filePath: string) => {
       let filename = '';
@@ -16,17 +11,14 @@ function sassLoader(
         return;
       }
       if (filename?.endsWith('.scss')) {
-        parallelSassLoader ||= createParallelLoader();
-        return await parallelSassLoader.run({ filename, opts });
+        const { render } = require('./render');
+        return render({ filename, opts });
       } else {
         // TODO: remove this
         fn && fn(filePath);
       }
     },
-    terminate: () => {
-      parallelSassLoader?.destroy();
-      parallelSassLoader = undefined;
-    },
+    terminate: () => {},
   };
 }
 

packages/mako/src/sassLoader/render.ts

@@ -1,8 +1,8 @@
 import { type Options } from 'sass';
 
-module.exports = async function render(param: {
+async function render(param: {
   filename: string;
-  opts: Omit<Options<'async'>, 'functions'>;
+  opts: Options<'async'> & { resources: string[] };
 }): Promise<{ content: string; type: 'css' }> {
   let sass;
   try {
@@ -18,4 +18,6 @@ module.exports = async function render(param: {
       throw new Error(err.toString());
     });
   return { content: result.css, type: 'css' };
-};
+}
+
+export { render };