fix: Less Maximum call stack size exceeded error (#32063)

* chore: create additional entry

* fix: rm recv call

* chore: Add default.less as index.less

* chore: update entry

* fix: row should also translate

* chore: rename index-default to index and add index-pure instead

* fix: missing transfer customize styl

.antd-tools.config.js

@@ -25,7 +25,7 @@ function finalizeCompile() {
           componentsLessContent += `@import "../${path.posix.join(
             file,
             'style',
-            'index.less',
+            'index-pure.less',
           )}";\n`;
         }
       });
@@ -35,6 +35,24 @@ function finalizeCompile() {
       );
     });
   }
+
+  // Create entry for babel plugin import
+  function patchEntry(styleEntry) {
+    if (fs.existsSync(styleEntry)) {
+      fs.writeFileSync(
+        path.join(styleEntry, 'style', 'index-default.less'),
+        [
+          // Inject variable
+          '@root-entry-name: default;',
+          // Point to origin file
+          "@import './index';",
+        ].join('\n'),
+      );
+    }
+  }
+
+  patchEntry(path.join(process.cwd(), 'lib'));
+  patchEntry(path.join(process.cwd(), 'es'));
 }
 
 function buildThemeFile(theme, vars) {
@@ -78,7 +96,7 @@ function finalizeDist() {
     // Build less entry file: dist/antd.less
     fs.writeFileSync(
       path.join(process.cwd(), 'dist', 'antd.less'),
-      '@import "../lib/style/index.less";\n@import "../lib/style/components.less";',
+      '@import "../lib/style/default.less";\n@import "../lib/style/components.less";',
     );
     // eslint-disable-next-line no-console
     fs.writeFileSync(
@@ -126,25 +144,26 @@ module.exports = {
   }
 }
 
-function isComponentStyle(file) {
+function isComponentStyleEntry(file) {
   return file.path.match(/style(\/|\\)index\.tsx/);
 }
 
 function needTransformStyle(content) {
-  return content.includes('./index.less');
+  return content.includes('../../style/index.less') || content.includes('./index.less');
 }
 
 module.exports = {
   compile: {
     transformTSFile(file) {
-      if (isComponentStyle(file)) {
+      if (isComponentStyleEntry(file)) {
         let content = file.contents.toString();
 
         if (needTransformStyle(content)) {
           const cloneFile = file.clone();
 
           // Origin
-          content = content.replace('./index.less', './index-default.less');
+          content = content.replace('../../style/index.less', '../../style/index-default.less');
+          // content = content.replace('./index.less', './index-default.less');
           cloneFile.contents = Buffer.from(content);
 
           return cloneFile;
@@ -152,23 +171,31 @@ module.exports = {
       }
     },
     transformFile(file) {
-      if (isComponentStyle(file)) {
+      if (isComponentStyleEntry(file)) {
-        const content = file.contents.toString();
+        const indexLessFilePath = file.path.replace('index.tsx', 'index.less');
 
-        if (needTransformStyle(content)) {
+        if (fs.existsSync(indexLessFilePath)) {
-          const cloneFile = file.clone();
+          // We put origin `index.less` file to `index-pure.less`
-          cloneFile.contents = Buffer.from(
+          const pureFile = file.clone();
+          pureFile.contents = Buffer.from(fs.readFileSync(indexLessFilePath, 'utf8'));
+          pureFile.path = pureFile.path.replace('index.tsx', 'index-pure.less');
+
+          // Rewrite `index.less` file with `root-entry-name`
+          const indexLessFile = file.clone();
+          indexLessFile.contents = Buffer.from(
             [
               // Inject variable
               '@root-entry-name: default;',
               // Point to origin file
-              "@import './index';",
+              "@import './index-pure.less';",
             ].join('\n\n'),
           );
-          cloneFile.path = cloneFile.path.replace('index.tsx', 'index-default.less');
+          indexLessFile.path = indexLessFile.path.replace('index.tsx', 'index.less');
-          return cloneFile;
+
+          return [indexLessFile, pureFile];
         }
       }
+
       return [];
     },
     lessConfig: {

components/cascader/style/rtl.less

@@ -1,4 +1,6 @@
-@import (reference) './index';
+// We can not import reference of `./index` directly since it will make dead loop in less
+@import (reference) '../../style/themes/index';
+@cascader-prefix-cls: ~'@{ant-prefix}-cascader';
 
 .@{cascader-prefix-cls}-rtl {
   .@{cascader-prefix-cls}-menu-item {

components/drawer/style/customize.less

@@ -1,3 +0,0 @@
-@import './index.less';
-
-.popover-customize-bg(@drawer-prefix-cls, @popover-background);

components/drawer/style/index.less

@@ -1,5 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import './drawer';
-@import './customize';
 @import './rtl';
+
+.popover-customize-bg(@drawer-prefix-cls, @popover-background);

components/dropdown/style/status.less

@@ -1,4 +1,6 @@
-@import './index';
+@import (reference) '../../style/themes/index';
+
+@dropdown-prefix-cls: ~'@{ant-prefix}-dropdown';
 
 .@{dropdown-prefix-cls}-menu-item {
   &&-danger {

components/form/style/components.less

@@ -1,4 +1,7 @@
-@import './index';
+@import (reference) '../../style/themes/index';
+
+@form-prefix-cls: ~'@{ant-prefix}-form';
+@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
 
 // ================================================================
 // =                      Children Component                      =

components/form/style/horizontal.less

@@ -1,4 +1,7 @@
-@import './index';
+@import (reference) '../../style/themes/index';
+
+@form-prefix-cls: ~'@{ant-prefix}-form';
+@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
 
 .@{form-prefix-cls}-horizontal {
   .@{form-item-prefix-cls}-label {

components/form/style/inline.less

@@ -1,4 +1,7 @@
-@import './index';
+@import (reference) '../../style/themes/index';
+
+@form-prefix-cls: ~'@{ant-prefix}-form';
+@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
 
 .@{form-prefix-cls}-inline {
   display: flex;

components/form/style/status.less

@@ -1,4 +1,7 @@
-@import './index.less';
+@import (reference) '../../style/themes/index';
+
+@form-prefix-cls: ~'@{ant-prefix}-form';
+@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
 
 .@{form-item-prefix-cls} {
   // ================================================================

components/form/style/vertical.less

@@ -1,4 +1,7 @@
-@import './index';
+@import (reference) '../../style/themes/index';
+
+@form-prefix-cls: ~'@{ant-prefix}-form';
+@form-item-prefix-cls: ~'@{form-prefix-cls}-item';
 
 // ================== Label ==================
 .make-vertical-layout-label() {

components/input/style/affix.less

@@ -1,6 +1,8 @@
-@import './index';
 @import './mixin';
 
+@import (reference) '../../style/themes/index';
+@input-prefix-cls: ~'@{ant-prefix}-input';
+
 @input-affix-margin: 4px;
 
 .@{ant-prefix}-input {

components/input/style/allow-clear.less

@@ -1,4 +1,5 @@
-@import './index';
+@import (reference) '../../style/themes/index';
+@input-prefix-cls: ~'@{ant-prefix}-input';
 
 // ========================= Input =========================
 .@{iconfont-css-prefix}.@{ant-prefix}-input-clear-icon {

components/list/style/customize.less

@@ -1,5 +1,6 @@
-@import './index.less';
+@import '../../style/themes/index';
 
+@list-prefix-cls: ~'@{ant-prefix}-list';
 @card-prefix-cls: ~'@{ant-prefix}-card';
 
 .@{list-prefix-cls} {

components/menu/style/status.less

@@ -1,4 +1,5 @@
-@import './index';
+@import (reference) '../../style/themes/index';
+@menu-prefix-cls: ~'@{ant-prefix}-menu';
 
 .@{menu-prefix-cls} {
   // Danger

components/modal/style/customize.less

@@ -1,3 +0,0 @@
-@import './index.less';
-
-.popover-customize-bg(@dialog-prefix-cls, @popover-background);

components/modal/style/index.less

@@ -2,5 +2,6 @@
 @import '../../style/mixins/index';
 @import './modal';
 @import './confirm';
-@import './customize';
 @import './rtl';
+
+.popover-customize-bg(@dialog-prefix-cls, @popover-background);

components/notification/style/customize.less

@@ -1,3 +0,0 @@
-@import './index.less';
-
-.popover-customize-bg(@notification-prefix-cls, @popover-background);

components/notification/style/index.less

@@ -1,6 +1,7 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
-@import './customize.less';
+
+.popover-customize-bg(@notification-prefix-cls, @popover-background);
 
 @notification-prefix-cls: ~'@{ant-prefix}-notification';
 @notification-width: 384px;

components/popover/style/customize.less

@@ -1,3 +0,0 @@
-@import './index.less';
-
-.popover-customize-bg(@popover-prefix-cls, @popover-background);

components/select/style/multiple.less

@@ -1,4 +1,5 @@
-@import './index';
+@import (reference) '../../style/themes/index';
+@select-prefix-cls: ~'@{ant-prefix}-select';
 
 @select-overflow-prefix-cls: ~'@{select-prefix-cls}-selection-overflow';
 @select-multiple-item-border-width: 1px;

components/select/style/single.less

@@ -1,4 +1,5 @@
-@import './index';
+@import (reference) '../../style/themes/index';
+@select-prefix-cls: ~'@{ant-prefix}-select';
 
 @selection-item-padding: ceil(@font-size-base * 1.25);
 

components/style/default.less

@@ -0,0 +1,4 @@
+// This is same as `index.less` but given `root-entry-name` for `dist/antd.less` usage
+@root-entry-name: default;
+
+@import './index';

components/switch/style/rtl.less

@@ -1,9 +1,11 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
-@import './index';
 
 @switch-prefix-cls: ~'@{ant-prefix}-switch';
 
+@switch-pin-size: @switch-height - 4px;
+@switch-sm-pin-size: @switch-sm-height - 4px;
+
 .@{switch-prefix-cls}-rtl {
   direction: rtl;
 

components/table/style/bordered.less

@@ -1,6 +1,8 @@
-@import './index';
 @import './size';
 
+@import (reference) '../../style/themes/index';
+@table-prefix-cls: ~'@{ant-prefix}-table';
+
 @table-border: @border-width-base @border-style-base @table-border-color;
 
 .@{table-prefix-cls}.@{table-prefix-cls}-bordered {

components/table/style/size.less

@@ -1,4 +1,6 @@
-@import './index';
+@import (reference) '../../style/themes/index';
+
+@table-prefix-cls: ~'@{ant-prefix}-table';
 
 .table-size(@size, @padding-vertical, @padding-horizontal, @font-size) {
   .@{table-prefix-cls}.@{table-prefix-cls}-@{size} {

components/tabs/style/card.less

@@ -1,6 +1,7 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
-@import './index';
+
+@tab-prefix-cls: ~'@{ant-prefix}-tabs';
 
 .@{tab-prefix-cls}-card {
   > .@{tab-prefix-cls}-nav,

components/tabs/style/dropdown.less

@@ -1,6 +1,7 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
-@import './index';
+
+@tab-prefix-cls: ~'@{ant-prefix}-tabs';
 
 .@{tab-prefix-cls}-dropdown {
   .reset-component();

components/tabs/style/position.less

@@ -1,4 +1,5 @@
-@import './index';
+@import '../../style/themes/index';
+@tab-prefix-cls: ~'@{ant-prefix}-tabs';
 
 .@{tab-prefix-cls} {
   // ========================== Top & Bottom ==========================

components/tabs/style/size.less

@@ -1,6 +1,7 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
-@import './index';
+
+@tab-prefix-cls: ~'@{ant-prefix}-tabs';
 
 .@{tab-prefix-cls} {
   &-small {

components/transfer/style/customize.less

@@ -1,4 +1,6 @@
-@import './index.less';
+@import '../../style/themes/index';
+
+@transfer-prefix-cls: ~'@{ant-prefix}-transfer';
 
 @table-prefix-cls: ~'@{ant-prefix}-table';
 @input-prefix-cls: ~'@{ant-prefix}-input';