Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(style): migrate from @functions to @plugin usage #8552

Merged
merged 5 commits into from
May 30, 2024

Conversation

HyperLife1119
Copy link
Collaborator

@HyperLife1119 HyperLife1119 commented May 27, 2024

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[x] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Issue Number: N/A

What is the new behavior?

此 PR 基于 #8545.

由于 ZORRO 已经同步了最新的 antd4 的样式,并且 antd4 已进入维护模式,因此我们在这里直接修改 antd 的样式文件应该是被允许的。

在此 PR 中,我们将所有废弃的 @functions 语法替换为 @plugin,并且关闭 less 的 javascriptEnabled 选项,消除了编译警告。

Does this PR introduce a breaking change?

[x] Yes
[ ] No

由于 @functions 改为了 @plugin,在使用这些函数时,不再需要使用 ~` ` 语法对函数调用进行包裹,迁移方法为:

旧用法:

color(~`colorPalette('@{primary-color}', 5)`)

新用法:

color(colorPalette('@{primary-color}', 5))

注意:我们需要在 v18 发行日志中提及这一点。

Other information

Copy link

zorro-bot bot commented May 27, 2024

This preview will be available after the AzureCI is passed.

Copy link

codecov bot commented May 27, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 91.57%. Comparing base (61df74d) to head (434ce5a).

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #8552      +/-   ##
==========================================
- Coverage   91.58%   91.57%   -0.02%     
==========================================
  Files         532      532              
  Lines       18334    18334              
  Branches     2802     2802              
==========================================
- Hits        16791    16789       -2     
- Misses       1226     1227       +1     
- Partials      317      318       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@HyperLife1119 HyperLife1119 added ✏️ Style PR: unreviewed PR: target-major 💔 Breaking Change This PR or the solution to this issue would introduce breaking changes labels May 27, 2024
@HyperLife1119 HyperLife1119 marked this pull request as ready for review May 27, 2024 07:07
@HyperLife1119 HyperLife1119 added this to the v18 Support milestone May 27, 2024
@HyperLife1119 HyperLife1119 mentioned this pull request May 27, 2024
3 tasks
@HyperLife1119 HyperLife1119 self-assigned this May 27, 2024
@HyperLife1119 HyperLife1119 force-pushed the refactor/less-plugin branch 2 times, most recently from 3e3a391 to df56cdb Compare May 28, 2024 17:36
@HyperLife1119
Copy link
Collaborator Author

image

需要在 CodeFactor 配置中忽略 components/style/color/tinycolor2.js 文件。

@Laffery Laffery linked an issue May 29, 2024 that may be closed by this pull request
Copy link
Collaborator

@Laffery Laffery left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. I'll try to configure the codefactor settings to ignore tinycolor2.js

@Laffery Laffery merged commit 7e873c8 into NG-ZORRO:master May 30, 2024
7 of 9 checks passed
@Laffery
Copy link
Collaborator

Laffery commented Jul 17, 2024

hi @HyperLife1119
我在使用动态切换主题 时遇到一个问题,看起来可能和这个 pr 有关。

reproduction link -> https://github.com/Laffery/nz-theme-issue

https://github.com/Laffery/nz-theme-issue/blob/main/src/app/pages/welcome/welcome.component.less#L10 中使用了zorro 内置变量 @gold-3,运行 npm start 抛错如下:

image

断点调试定位到抛错位置在 https://github.com/less/less.js/blob/master/packages/less/src/less/functions/color.js#L435
image

如果有时间请看下这个问题,期待和你一起探讨!

@HyperLife1119
Copy link
Collaborator Author

HyperLife1119 commented Jul 17, 2024

我试了一下,看起来似乎是因为在 mixin 内部使用 import,会影响在外部使用 antd 内置的几个 @plugins(可能与插件的作用域有关),我在顶部添加一个 colorPalette.less 的导入就可以解决这个问题了:

@import '../../../node_modules/ng-zorro-antd/src/style/color/colorPalette.less';

.themeMixin(@rules) {
  html {
    &.default {
      @import './default.less';
      @rules();
    }
    &.dark {
      @import './dark.less';
      @rules();
    }
  }
}

或者说必须在顶部导入 antd 的某个 theme,它们已经包含了那几个 plugins,或者直接在顶部导入 plugin 对应的 less 文件。🧐

@Laffery
Copy link
Collaborator

Laffery commented Jul 17, 2024

或者说必须在顶部导入 antd 的某个 theme,它们已经包含了那几个 plugins,或者直接在顶部导入 plugin 对应的 less 文件。🧐

动态主题场景下可能不太会在顶部就导入某个 theme,目前看最好就是在顶部导入 plugin。
我觉得可以在 动态切换主题 文档里补充下说明

BBboy01 added a commit to BBboy01/ng-zorro-antd-mobile that referenced this pull request Jul 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💔 Breaking Change This PR or the solution to this issue would introduce breaking changes PR: reviewed-approved PR: target-major ✏️ Style
Projects
None yet
2 participants