feat: less support "globalVars" (#1465)

* feat: less support globalVars * test: add globalVars test case * test case text * docs * test case
umijs · Aug 6, 2024 · 1b01436 · 1b01436
1 parent 2a9d2b5
commit 1b01436
Show file tree

Hide file tree

Showing 14 changed files with 118 additions and 3 deletions.
diff --git a/docs/config.md b/docs/config.md
@@ -374,7 +374,7 @@ Specify the size limit of the assets file that needs to be converted to `base64`
 
 ### less
 
-- Type: `{ modifyVars?: Record<string, string>, sourceMap?: { sourceMapFileInline?: boolean, outputSourceFiles?: boolean }, math?: "always" | "strict" | "parens-division" | "parens" | "strict-legacy" | number, plugins?: ([string, Record<string, any>]|string)[] }`
+- Type: `{ modifyVars?: Record<string, string>, globalVars?: Record<string, string>, sourceMap?: { sourceMapFileInline?: boolean, outputSourceFiles?: boolean }, math?: "always" | "strict" | "parens-division" | "parens" | "strict-legacy" | number, plugins?: ([string, Record<string, any>]|string)[] }`
 - Default: `{}`
 
 Specify the less configuration.
@@ -387,6 +387,10 @@ e.g.
     'primary-color': '#1DA57A',
     'link-color': '#1DA57A',
   },
+  globalVars: {
+    'primary-color': '#ffff00',
+    hack: 'true; @import "your-global-less-file.less";',
+  },
   sourceMap: {
     sourceMapFileInline: true,
     outputSourceFiles: true,

diff --git a/docs/config.zh-CN.md b/docs/config.zh-CN.md
@@ -375,7 +375,7 @@ e.g.
 
 ### less
 
-- 类型：`{ modifyVars?: Record<string, string>, sourceMap?: { sourceMapFileInline?: boolean, outputSourceFiles?: boolean }, math?: "always" | "strict" | "parens-division" | "parens" | "strict-legacy" | number, plugins?: ([string, Record<string, any>]|string)[] }`
+- 类型：`{ modifyVars?: Record<string, string>, globalVars?: Record<string, string>, sourceMap?: { sourceMapFileInline?: boolean, outputSourceFiles?: boolean }, math?: "always" | "strict" | "parens-division" | "parens" | "strict-legacy" | number, plugins?: ([string, Record<string, any>]|string)[] }`
 - 默认值：`{}`
 
 指定 less 配置。
@@ -388,6 +388,10 @@ e.g.
     'primary-color': '#1DA57A',
     'link-color': '#1DA57A',
   },
+  globalVars: {
+    'primary-color': '#ffff00',
+    hack: 'true; @import "your-global-less-file.less";',
+  },
   sourceMap: {
     sourceMapFileInline: true,
     outputSourceFiles: true,

diff --git a/e2e/fixtures.umi/config.less.globalVars/.umirc.ts b/e2e/fixtures.umi/config.less.globalVars/.umirc.ts
@@ -0,0 +1,12 @@
+export default {
+  mfsu: false,
+  mako: {},
+  lessLoader: {
+    globalVars: {
+      globalColorInConfig: '#ff0033',
+      hack: 'true; @import "./var.less";',
+      overrideInConfig: '#000012',
+      '@useAtPrefix': '#000013',
+    },
+  },
+};
diff --git a/e2e/fixtures.umi/config.less.globalVars/expect.js b/e2e/fixtures.umi/config.less.globalVars/expect.js
@@ -0,0 +1,56 @@
+const assert = require("assert");
+const { parseBuildResult, moduleReg } = require("../../../scripts/test-utils");
+const { files } = parseBuildResult(__dirname);
+
+/** @type string */
+let content = files["pages_index_tsx-async.css"];
+
+// remove sourcemap
+content = content.slice(0, content.indexOf("/*")).trim();
+
+// 分割成单条 rule
+// .a{...}
+// .b{...}
+let cssRules = content
+  .split(".")
+  .filter((item) => !!item)
+  .map((item) => "." + item.replace(/\s/g, ""));
+
+/** @type {Record<string, string>} */
+let cssDecls = cssRules.reduce((pre, cur) => {
+  let splitIndex = cur.indexOf("{");
+  let selector = cur.slice(0, splitIndex);
+  let decl = cur.slice(splitIndex);
+  pre[selector] = decl;
+
+  return pre;
+}, {});
+
+assert(
+  cssDecls[".normal"].includes("color:#ff0000;"),
+  "should available globalVars"
+);
+assert(
+  cssDecls[".override"].includes("color:#ff0022;"),
+  "should available override globalVars"
+);
+assert(
+  cssDecls[".inConfig"].includes("color:#ff0033;"),
+  "should available globalVars in .umirc config"
+);
+assert(
+  cssDecls[".overrideInConfig"].includes("color:#000012"),
+  "should available override globalVars in .umirc config"
+);
+assert(
+  cssDecls[".useAtPrefix"].includes("color:#000013"),
+  "should available use '@' prefix"
+);
+assert(
+  cssDecls[".normalA"].includes("color:#ff0000;"),
+  "should available globalVars in all less files"
+);
+assert(
+  cssDecls[".normalB"].includes("color:#ff0000;"),
+  "should available globalVars in all less files"
+);
diff --git a/e2e/fixtures.umi/config.less.globalVars/pages/a.less b/e2e/fixtures.umi/config.less.globalVars/pages/a.less
@@ -0,0 +1,3 @@
+.normalA {
+  color: @primaryColor;
+}
diff --git a/e2e/fixtures.umi/config.less.globalVars/pages/b.less b/e2e/fixtures.umi/config.less.globalVars/pages/b.less
@@ -0,0 +1,3 @@
+.normalB {
+  color: @primaryColor;
+}
diff --git a/e2e/fixtures.umi/config.less.globalVars/pages/index.less b/e2e/fixtures.umi/config.less.globalVars/pages/index.less
@@ -0,0 +1,21 @@
+@testOverride: #ff0022;
+
+.normal {
+  color: @primaryColor;
+}
+
+.override {
+  color: @testOverride;
+}
+
+.inConfig {
+  color: @globalColorInConfig;
+}
+
+.overrideInConfig {
+  color: @overrideInConfig;
+}
+
+.useAtPrefix {
+  color: @useAtPrefix;
+}
diff --git a/e2e/fixtures.umi/config.less.globalVars/pages/index.tsx b/e2e/fixtures.umi/config.less.globalVars/pages/index.tsx
@@ -0,0 +1,3 @@
+import React from 'react';
+import './index.less';
+export default () => <div>1</div>;
diff --git a/e2e/fixtures.umi/config.less.globalVars/var.less b/e2e/fixtures.umi/config.less.globalVars/var.less
@@ -0,0 +1,3 @@
+@primaryColor: #ff0000;
+@testOverride: #ff0011;
+@overrideInConfig: #000011;
diff --git a/packages/bundler-mako/index.js b/packages/bundler-mako/index.js
@@ -364,6 +364,7 @@ function checkConfig(opts) {
       .difference(Object.keys(opts.config.lessLoader), [
         'javascriptEnabled',
         'modifyVars',
+        'globalVars',
         'math',
         'plugins',
       ])
@@ -637,6 +638,7 @@ async function getMakoConfig(opts) {
     forkTSChecker: !!forkTSChecker,
     less: {
       modifyVars: opts.config.lessLoader?.modifyVars || opts.config.theme,
+      globalVars: opts.config.lessLoader?.globalVars,
       sourceMap: getLessSourceMapConfig(normalizedDevtool),
       math: opts.config.lessLoader?.math,
       plugins: opts.config.lessLoader?.plugins,

diff --git a/packages/mako/src/index.ts b/packages/mako/src/index.ts
@@ -90,6 +90,7 @@ export async function build(params: BuildParams) {
   // built-in less-loader
   let less = lessLoader(null, {
     modifyVars: params.config.less?.modifyVars || {},
+    globalVars: params.config.less?.globalVars,
     math: params.config.less?.math,
     sourceMap: params.config.less?.sourceMap || false,
     plugins: [

diff --git a/packages/mako/src/lessLoader/index.ts b/packages/mako/src/lessLoader/index.ts
@@ -3,6 +3,7 @@ import { createParallelLoader } from './parallelLessLoader';
 
 export interface LessLoaderOpts {
   modifyVars: Record<string, string>;
+  globalVars?: Record<string, string>;
   math:
     | 'always'
     | 'strict'

diff --git a/packages/mako/src/lessLoader/render.ts b/packages/mako/src/lessLoader/render.ts
@@ -6,7 +6,7 @@ module.exports = async function render(param: {
   filename: string;
   opts: LessLoaderOpts;
 }): Promise<{ content: string; type: 'css' }> {
-  const { modifyVars, math, sourceMap, plugins } = param.opts;
+  const { modifyVars, globalVars, math, sourceMap, plugins } = param.opts;
   const input = fs.readFileSync(param.filename, 'utf-8');
 
   const pluginInstances: Less.Plugin[] | undefined = plugins?.map((p) => {
@@ -26,6 +26,7 @@ module.exports = async function render(param: {
       math,
       plugins: pluginInstances,
       modifyVars,
+      globalVars,
       sourceMap,
       rewriteUrls: 'all',
     } as unknown as Less.Options)

diff --git a/scripts/mako.js b/scripts/mako.js
@@ -40,6 +40,7 @@ function getMakoConfig() {
   makoConfig.resolve.alias = makoConfig.resolve.alias || [];
   makoConfig.less = {
     modifyVars: makoConfig.less?.theme || {},
+    globalVars: makoConfig.less?.globalVars,
   };
   makoConfig.plugins = getPlugins();
   makoConfig.resolve.alias.forEach((alias) => {