fix: colorPalette is not defined

[afc163]

[中文版模板 / Chinese template]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Internationalization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

close #26290
close #23480
close #23412

💡 Background and solution

参考 #26290 里的重现（用法来自定制主题 里的方式三），当使用 @import "~antd/dist/antd.less" 引入样式时，在 lessOptions 的 modifyVars 里添加 hack 字段如下。

modifyVars: {
  hack: `true;@import "require.resolve('antd/lib/style/color/colorPalette.less')";`;
}

此时启动项目时会报 ReferenceError: colorPalette is not defined' 的错误：

Failed to compile.

./src/App.less (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-8-3!./node_modules/less-loader/dist/cjs.js??ref--6-oneOf-8-4!./src/App.less)

.antTreeFn(@tree-prefix-cls);
^
Error evaluating function color: JavaScript evaluation error: 'ReferenceError: colorPalette is not defined'
Error in /Users/yango/react/grow-fe/node_modules/antd/lib/tree/style/index.less (line 12, column 0)

移除 hack 字段，错误消失。这段 hack 代码来自于：https://unpkg.com/antd/dist/theme.js

但是这段代码不能移除，当使用 babel-plugin-import 引入样式时（而不是 @import "~antd/dist/antd.less"），如果没有这段 hack，同样会报 ReferenceError: colorPalette is not defined。

继续排查发现是下面两段代码会导致问题，移除这两个 mixin 调用后错误消失。

ant-design/components/tree/style/index.less

Line 12 in 875e190

.antTreeFn(@tree-prefix-cls);

ant-design/components/tree-select/style/index.less

Line 39 in 875e190

.antTreeFn(@select-tree-prefix-cls);

进一步排查，发现只要在 mixin 中应用了 @primary-1 这样会使用 colorPalette 做色彩计算的变量，就会导致问题。

.antTreeFn() {
  div {
   color: @primary-1; // 使用了 colorPalette 计算的变量
  }
}

.antTreeFn(); // 报错!!!

寻找解决方案的过程中试验出，如果 mixin 的调用不在顶层，而在一个 selector 里面时，错误也会消失。

.antTreeFn() {
  div {
   color: @primary-1; // 使用了 colorPalette 计算的变量
  }
}

+ div {
  .antTreeFn(); // 错误解决
+ }

看上去和 less 解析 mixin 的顺序有关系，具体原因没有排查。

解决方式就是将 .antTreeFn() 里的一层包裹拿到调用的外面。

📝 Changelog

Language	Changelog
🇺🇸 English	Fix colorPalette is not defined when customize theme in some situation.
🇨🇳 Chinese	修复使用主题有时会报 colorPalette is not defined 的问题。

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

[ant-design-bot]

[ant-design-bot]

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit a4da6fa:

Sandbox	Source
antd reproduction template	Configuration

[github-actions]

Size Change: 0 B

Total Size: 797 kB

ℹ️ View Unchanged

Filename	Size	Change
./dist/antd-with-locales.min.js	316 kB	0 B
./dist/antd.compact.min.css	66.2 kB	0 B
./dist/antd.dark.min.css	67.4 kB	0 B
./dist/antd.min.css	66.2 kB	0 B
./dist/antd.min.js	282 kB	0 B

_{compressed-size-action}

[codecov]

Codecov Report

Merging #26395 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master   #26395   +/-   ##
=======================================
  Coverage   99.70%   99.70%           
=======================================
  Files         382      382           
  Lines        7344     7344           
  Branches     2008     2049   +41     
=======================================
  Hits         7322     7322           
  Misses         22       22           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fb839f0...a4da6fa. Read the comment docs.

[AshoneA]

The hack is really hack!