feat: support link css from shadow dom (youzan#12526)

CatsAndMice · Apr 8, 2024 · 150f41e · 150f41e
1 parent 9e7c83b
commit 150f41e
Show file tree

Hide file tree

Showing 86 changed files with 172 additions and 86 deletions.
diff --git a/packages/vant-cli/site/common/style/vars.less b/packages/vant-cli/site/common/style/vars.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   // colors
   --van-doc-black: #000;
   --van-doc-white: #fff;

diff --git a/packages/vant/src/action-bar-button/index.less b/packages/vant/src/action-bar-button/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-action-bar-button-height: 40px;
   --van-action-bar-button-warning-color: var(--van-gradient-orange);
   --van-action-bar-button-danger-color: var(--van-gradient-red);

diff --git a/packages/vant/src/action-bar-icon/index.less b/packages/vant/src/action-bar-icon/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-action-bar-icon-width: 48px;
   --van-action-bar-icon-height: 100%;
   --van-action-bar-icon-color: var(--van-text-color);

diff --git a/packages/vant/src/action-bar/index.less b/packages/vant/src/action-bar/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-action-bar-background: var(--van-background-2);
   --van-action-bar-height: 50px;
 }

diff --git a/packages/vant/src/action-sheet/index.less b/packages/vant/src/action-sheet/index.less
@@ -1,6 +1,7 @@
 @import '../style/mixins/hairline';
 
-:root {
+:root,
+:host {
   --van-action-sheet-max-height: 80%;
   --van-action-sheet-header-height: 48px;
   --van-action-sheet-header-font-size: var(--van-font-size-lg);

diff --git a/packages/vant/src/address-edit/index.less b/packages/vant/src/address-edit/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-address-edit-padding: var(--van-padding-sm);
   --van-address-edit-buttons-padding: var(--van-padding-xl)
     var(--van-padding-base);

diff --git a/packages/vant/src/address-list/index.less b/packages/vant/src/address-list/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-address-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;
   --van-address-list-disabled-text-color: var(--van-text-color-2);
   --van-address-list-disabled-text-padding: calc(var(--van-padding-base) * 5) 0;

diff --git a/packages/vant/src/back-top/index.less b/packages/vant/src/back-top/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-back-top-size: 40px;
   --van-back-top-right: 30px;
   --van-back-top-bottom: 40px;

diff --git a/packages/vant/src/badge/index.less b/packages/vant/src/badge/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-badge-size: 16px;
   --van-badge-color: var(--van-white);
   --van-badge-padding: 0 3px;

diff --git a/packages/vant/src/barrage/index.less b/packages/vant/src/barrage/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-barrage-font-size: 16px;
   --van-barrage-space: 10px;
   --van-barrage-font: inherit;

diff --git a/packages/vant/src/button/index.less b/packages/vant/src/button/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-button-mini-height: 24px;
   --van-button-mini-padding: 0 var(--van-padding-base);
   --van-button-mini-font-size: var(--van-font-size-xs);

diff --git a/packages/vant/src/calendar/index.less b/packages/vant/src/calendar/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-calendar-background: var(--van-background-2);
   --van-calendar-popup-height: 80%;
   --van-calendar-header-shadow: 0 2px 10px rgba(125, 126, 128, 0.16);

diff --git a/packages/vant/src/card/index.less b/packages/vant/src/card/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-card-padding: var(--van-padding-xs) var(--van-padding-md);
   --van-card-font-size: var(--van-font-size-sm);
   --van-card-text-color: var(--van-text-color);

diff --git a/packages/vant/src/cascader/index.less b/packages/vant/src/cascader/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-cascader-header-height: 48px;
   --van-cascader-header-padding: 0 var(--van-padding-md);
   --van-cascader-title-font-size: var(--van-font-size-lg);

diff --git a/packages/vant/src/cell-group/index.less b/packages/vant/src/cell-group/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-cell-group-background: var(--van-background-2);
   --van-cell-group-title-color: var(--van-text-color-2);
   --van-cell-group-title-padding: var(--van-padding-md) var(--van-padding-md);

diff --git a/packages/vant/src/cell/index.less b/packages/vant/src/cell/index.less
@@ -1,6 +1,7 @@
 @import '../style/mixins/hairline';
 
-:root {
+:root,
+:host {
   --van-cell-font-size: var(--van-font-size-md);
   --van-cell-line-height: 24px;
   --van-cell-vertical-padding: 10px;

diff --git a/packages/vant/src/checkbox/index.less b/packages/vant/src/checkbox/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-checkbox-size: 20px;
   --van-checkbox-border-color: var(--van-gray-5);
   --van-checkbox-duration: var(--van-duration-fast);

diff --git a/packages/vant/src/circle/index.less b/packages/vant/src/circle/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-circle-size: 100px;
   --van-circle-color: var(--van-primary-color);
   --van-circle-layer-color: var(--van-white);

diff --git a/packages/vant/src/collapse-item/index.less b/packages/vant/src/collapse-item/index.less
@@ -1,6 +1,7 @@
 @import '../style/mixins/hairline';
 
-:root {
+:root,
+:host {
   --van-collapse-item-duration: var(--van-duration-base);
   --van-collapse-item-content-padding: var(--van-padding-sm)
     var(--van-padding-md);

diff --git a/packages/vant/src/contact-card/index.less b/packages/vant/src/contact-card/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-contact-card-padding: var(--van-padding-md);
   --van-contact-card-add-icon-size: 40px;
   --van-contact-card-add-icon-color: var(--van-primary-color);

diff --git a/packages/vant/src/contact-edit/index.less b/packages/vant/src/contact-edit/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-contact-edit-padding: var(--van-padding-md);
   --van-contact-edit-fields-radius: var(--van-radius-md);
   --van-contact-edit-buttons-padding: var(--van-padding-xl) 0;

diff --git a/packages/vant/src/contact-list/index.less b/packages/vant/src/contact-list/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-contact-list-padding: var(--van-padding-sm) var(--van-padding-sm) 80px;
   --van-contact-list-edit-icon-size: 16px;
   --van-contact-list-add-button-z-index: 999;

diff --git a/packages/vant/src/count-down/index.less b/packages/vant/src/count-down/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-count-down-text-color: var(--van-text-color);
   --van-count-down-font-size: var(--van-font-size-md);
   --van-count-down-line-height: var(--van-line-height-md);

diff --git a/packages/vant/src/coupon-cell/index.less b/packages/vant/src/coupon-cell/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-coupon-cell-selected-text-color: var(--van-text-color);
 }
 

diff --git a/packages/vant/src/coupon-list/index.less b/packages/vant/src/coupon-list/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-coupon-list-background: var(--van-background);
   --van-coupon-list-field-padding: 5px 0 5px var(--van-padding-md);
   --van-coupon-list-exchange-button-height: 32px;

diff --git a/packages/vant/src/coupon/index.less b/packages/vant/src/coupon/index.less
@@ -1,6 +1,7 @@
 @import '../style/mixins/ellipsis';
 
-:root {
+:root,
+:host {
   --van-coupon-margin: 0 var(--van-padding-sm) var(--van-padding-sm);
   --van-coupon-content-height: 84px;
   --van-coupon-content-padding: 14px 0;

diff --git a/packages/vant/src/dialog/index.less b/packages/vant/src/dialog/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-dialog-width: 320px;
   --van-dialog-small-screen-width: 90%;
   --van-dialog-font-size: var(--van-font-size-lg);

diff --git a/packages/vant/src/divider/index.less b/packages/vant/src/divider/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-divider-margin: var(--van-padding-md) 0;
   --van-divider-vertical-margin: 0 var(--van-padding-xs);
   --van-divider-text-color: var(--van-text-color-2);

diff --git a/packages/vant/src/dropdown-item/index.less b/packages/vant/src/dropdown-item/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-dropdown-item-z-index: 10;
 }
 

diff --git a/packages/vant/src/dropdown-menu/index.less b/packages/vant/src/dropdown-menu/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-dropdown-menu-height: 48px;
   --van-dropdown-menu-background: var(--van-background-2);
   --van-dropdown-menu-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);

diff --git a/packages/vant/src/empty/index.less b/packages/vant/src/empty/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-empty-padding: var(--van-padding-xl) 0;
   --van-empty-image-size: 160px;
   --van-empty-description-margin-top: var(--van-padding-md);

diff --git a/packages/vant/src/field/index.less b/packages/vant/src/field/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-field-label-width: 6.2em;
   --van-field-label-color: var(--van-text-color);
   --van-field-label-margin-right: var(--van-padding-sm);

diff --git a/packages/vant/src/floating-bubble/index.less b/packages/vant/src/floating-bubble/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-floating-bubble-size: 48px;
   --van-floating-bubble-initial-gap: 24px;
   --van-floating-bubble-icon-size: 28px;

diff --git a/packages/vant/src/floating-panel/index.less b/packages/vant/src/floating-panel/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-floating-panel-border-radius: 16px;
   --van-floating-panel-header-height: 30px;
   --van-floating-panel-z-index: 999;

diff --git a/packages/vant/src/grid-item/index.less b/packages/vant/src/grid-item/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-grid-item-content-padding: var(--van-padding-md) var(--van-padding-xs);
   --van-grid-item-content-background: var(--van-background-2);
   --van-grid-item-content-active-color: var(--van-active-color);

diff --git a/packages/vant/src/highlight/index.less b/packages/vant/src/highlight/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-highlight-tag-color: var(--van-primary-color);
 }
 

diff --git a/packages/vant/src/image-preview/index.less b/packages/vant/src/image-preview/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-image-preview-index-text-color: var(--van-white);
   --van-image-preview-index-font-size: var(--van-font-size-md);
   --van-image-preview-index-line-height: var(--van-line-height-md);

diff --git a/packages/vant/src/image/index.less b/packages/vant/src/image/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-image-placeholder-text-color: var(--van-text-color-2);
   --van-image-placeholder-font-size: var(--van-font-size-md);
   --van-image-placeholder-background: var(--van-background);

diff --git a/packages/vant/src/index-anchor/index.less b/packages/vant/src/index-anchor/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-index-anchor-z-index: 1;
   --van-index-anchor-padding: 0 var(--van-padding-md);
   --van-index-anchor-text-color: var(--van-text-color);

diff --git a/packages/vant/src/index-bar/index.less b/packages/vant/src/index-bar/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-index-bar-sidebar-z-index: 2;
   --van-index-bar-index-font-size: var(--van-font-size-xs);
   --van-index-bar-index-line-height: var(--van-line-height-xs);

diff --git a/packages/vant/src/list/index.less b/packages/vant/src/list/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-list-text-color: var(--van-text-color-2);
   --van-list-text-font-size: var(--van-font-size-md);
   --van-list-text-line-height: 50px;

diff --git a/packages/vant/src/loading/index.less b/packages/vant/src/loading/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-loading-text-color: var(--van-text-color-2);
   --van-loading-text-font-size: var(--van-font-size-md);
   --van-loading-spinner-color: var(--van-gray-5);

diff --git a/packages/vant/src/nav-bar/index.less b/packages/vant/src/nav-bar/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-nav-bar-height: 46px;
   --van-nav-bar-background: var(--van-background-2);
   --van-nav-bar-arrow-size: 16px;

diff --git a/packages/vant/src/notice-bar/index.less b/packages/vant/src/notice-bar/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-notice-bar-height: 40px;
   --van-notice-bar-padding: 0 var(--van-padding-md);
   --van-notice-bar-wrapable-padding: var(--van-padding-xs) var(--van-padding-md);

diff --git a/packages/vant/src/notify/index.less b/packages/vant/src/notify/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-notify-text-color: var(--van-white);
   --van-notify-padding: var(--van-padding-xs) var(--van-padding-md);
   --van-notify-font-size: var(--van-font-size-md);

diff --git a/packages/vant/src/number-keyboard/index.less b/packages/vant/src/number-keyboard/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-number-keyboard-background: var(--van-gray-2);
   --van-number-keyboard-key-height: 48px;
   --van-number-keyboard-key-font-size: 28px;

diff --git a/packages/vant/src/overlay/index.less b/packages/vant/src/overlay/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-overlay-z-index: 1;
   --van-overlay-background: rgba(0, 0, 0, 0.7);
 }

diff --git a/packages/vant/src/pagination/index.less b/packages/vant/src/pagination/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-pagination-height: 40px;
   --van-pagination-font-size: var(--van-font-size-md);
   --van-pagination-item-width: 36px;

diff --git a/packages/vant/src/password-input/index.less b/packages/vant/src/password-input/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-password-input-height: 50px;
   --van-password-input-margin: 0 var(--van-padding-md);
   --van-password-input-font-size: 20px;

diff --git a/packages/vant/src/picker-group/index.less b/packages/vant/src/picker-group/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-picker-group-background: var(--van-background-2);
 }
 

diff --git a/packages/vant/src/picker/index.less b/packages/vant/src/picker/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-picker-background: var(--van-background-2);
   --van-picker-toolbar-height: 44px;
   --van-picker-title-font-size: var(--van-font-size-lg);

diff --git a/packages/vant/src/popover/index.less b/packages/vant/src/popover/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-popover-arrow-size: 6px;
   --van-popover-radius: var(--van-radius-lg);
   --van-popover-action-width: 128px;

diff --git a/packages/vant/src/popup/index.less b/packages/vant/src/popup/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-popup-background: var(--van-background-2);
   --van-popup-transition: transform var(--van-duration-base);
   --van-popup-round-radius: 16px;

diff --git a/packages/vant/src/progress/index.less b/packages/vant/src/progress/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-progress-height: 4px;
   --van-progress-color: var(--van-primary-color);
   --van-progress-inactive-color: var(--van-gray-5);

diff --git a/packages/vant/src/pull-refresh/index.less b/packages/vant/src/pull-refresh/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-pull-refresh-head-height: 50px;
   --van-pull-refresh-head-font-size: var(--van-font-size-md);
   --van-pull-refresh-head-text-color: var(--van-text-color-2);

diff --git a/packages/vant/src/radio/index.less b/packages/vant/src/radio/index.less
@@ -1,4 +1,5 @@
-:root {
+:root,
+:host {
   --van-radio-size: 20px;
   --van-radio-dot-size: 8px;
   --van-radio-border-color: var(--van-gray-5);