bkui-vue 1.0.3-beta.26 → 1.0.3-beta.28

package/lib/checkbox/checkbox.variable.css

@@ -12,13 +12,13 @@
   --whitesmoke-color: #fafbfd;
   --disable-color: #dcdee5;
   --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
   --font-size-base: 12px;
   --font-size-medium: 14px;
   --font-size-large: 16px;
   --line-height-base: 16px;
   --line-height-medium: 16px;
   --line-height-large: 18px;
-  --border-color: #dcdee5;
   --component-size-small: 26px;
   --component-size-base: 32px;
   --component-size-large: 40px;
@@ -111,7 +111,7 @@
   --table-border-color: #dcdee5;
   --table-head-bg-color: #fafbfd;
   --table-head-font-color: #313238;
-  --table-body-font-color: #63656e;
+  --table-body-font-color: #63656E;
   --table-row-hover-bg-color: #f5f7fa;
   --table-row-active-bg-color: #f0f1f5;
   --cascader-panel-border-color: #dcdee5;
@@ -127,11 +127,11 @@
   --select-active-color: #e1ecff;
   --select-hover-color: #f5f7fa;
 }
-:where(.bk-checkbox-group) {
+.bk-checkbox-group {
   display: inline-flex;
   letter-spacing: normal;
 }
-:where(.bk-checkbox) {
+.bk-checkbox {
   display: inline-flex;
   justify-self: center;
   align-items: center;
@@ -141,19 +141,19 @@
   cursor: pointer;
   user-select: none;
 }
-:where(.bk-checkbox) ~ .bk-checkbox {
+.bk-checkbox ~ .bk-checkbox {
   margin-left: 24px;
 }
-:where(.bk-checkbox).is-checked .bk-checkbox-input {
+.bk-checkbox.is-checked .bk-checkbox-input {
   background: var(--primary-color);
   border-color: var(--primary-color);
   transition: all 0.1s;
 }
-:where(.bk-checkbox).is-checked .bk-checkbox-input.small::after {
+.bk-checkbox.is-checked .bk-checkbox-input.small::after {
   width: 3px;
   height: 6px;
 }
-:where(.bk-checkbox).is-checked .bk-checkbox-input::after {
+.bk-checkbox.is-checked .bk-checkbox-input::after {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -166,16 +166,16 @@
   transform: translate(-50%, -60%) scaleY(1) rotate(45deg);
   transform-origin: center;
 }
-:where(.bk-checkbox).is-indeterminated .bk-checkbox-input {
+.bk-checkbox.is-indeterminated .bk-checkbox-input {
   background: var(--primary-color);
   border-color: var(--primary-color);
   transition: all 0.1s;
 }
-:where(.bk-checkbox).is-indeterminated .bk-checkbox-input.small::after {
+.bk-checkbox.is-indeterminated .bk-checkbox-input.small::after {
   width: 6px;
   height: 2px;
 }
-:where(.bk-checkbox).is-indeterminated .bk-checkbox-input::after {
+.bk-checkbox.is-indeterminated .bk-checkbox-input::after {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -187,31 +187,31 @@
   content: '';
   transform: translate(-50%, -50%);
 }
-:where(.bk-checkbox).is-disabled {
+.bk-checkbox.is-disabled {
   color: #c4c6cc;
   cursor: not-allowed;
 }
-:where(.bk-checkbox).is-disabled .bk-checkbox-input {
+.bk-checkbox.is-disabled .bk-checkbox-input {
   background: #fafbfd;
   border-color: var(--disable-color);
 }
-:where(.bk-checkbox).is-disabled .bk-checkbox-input::after {
+.bk-checkbox.is-disabled .bk-checkbox-input::after {
   background: var(--disable-color);
 }
-:where(.bk-checkbox).is-disabled.is-checked .bk-checkbox-input {
+.bk-checkbox.is-disabled.is-checked .bk-checkbox-input {
   background: var(--checkbox-disabled-checked-bg);
   border-color: var(--checkbox-disabled-checked-bg);
 }
-:where(.bk-checkbox).is-disabled.is-checked .bk-checkbox-input::after {
+.bk-checkbox.is-disabled.is-checked .bk-checkbox-input::after {
   background: var(--checkbox-disabled-checked-bg);
 }
-:where(.bk-checkbox).is-prechecking {
+.bk-checkbox.is-prechecking {
   position: relative;
 }
-:where(.bk-checkbox).is-prechecking .bk-checkbox-input {
+.bk-checkbox.is-prechecking .bk-checkbox-input {
   visibility: hidden;
 }
-:where(.bk-checkbox-input) {
+.bk-checkbox-input {
   position: relative;
   display: inline-block;
   width: 16px;
@@ -220,11 +220,11 @@
   border: 1px solid #979ba5;
   border-radius: 2px;
 }
-:where(.bk-checkbox-input).small {
+.bk-checkbox-input.small {
   width: 14px;
   height: 14px;
 }
-:where(.bk-checkbox-original) {
+.bk-checkbox-original {
   position: absolute;
   top: 0;
   left: 0;
@@ -232,12 +232,12 @@
   width: 0;
   height: 0;
 }
-:where(.bk-checkbox-label) {
+.bk-checkbox-label {
   display: inline-block;
   margin-left: 6px;
   vertical-align: middle;
 }
-:where(.bk-checkbox-checking) {
+.bk-checkbox-checking {
   position: absolute;
   font-size: 16px;
   color: #3a84ff;

package/lib/checkbox/index.js

@@ -1,9 +1,7 @@
-import "../styles/reset.css";
-import "./checkbox.less";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__ from "../shared";
+import * as __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__ from "../shared";
 import * as __WEBPACK_EXTERNAL_MODULE_vue__ from "vue";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__ from "../config-provider";
-import * as __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__ from "../icon";
+import * as __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__ from "../config-provider";
+import * as __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__ from "../icon";
 /******/ // The require scope
 /******/ var __webpack_require__ = {};
 /******/ 
@@ -38,7 +36,7 @@ __webpack_require__.d(__webpack_exports__, {
 ;// CONCATENATED MODULE: external "../shared"
 var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var y = x => () => x
-const shared_namespaceObject = x({ ["EMPTY_OBJ"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.EMPTY_OBJ, ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.PropTypes, ["SizeEnum"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.SizeEnum, ["classes"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.classes, ["isEmptyObj"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.isEmptyObj, ["useFormItem"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.useFormItem, ["withInstallProps"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_shared_edbdfb03__.withInstallProps });
+const external_shared_namespaceObject = x({ ["EMPTY_OBJ"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.EMPTY_OBJ, ["PropTypes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.PropTypes, ["SizeEnum"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.SizeEnum, ["classes"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.classes, ["isEmptyObj"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.isEmptyObj, ["useFormItem"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.useFormItem, ["withInstallProps"]: () => __WEBPACK_EXTERNAL_MODULE__shared_65459f0a__.withInstallProps });
 ;// CONCATENATED MODULE: ../../node_modules/@babel/runtime/helpers/esm/typeof.js
 function _typeof(o) {
   "@babel/helpers - typeof";
@@ -149,13 +147,13 @@ var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_y = x => () => x
 const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["getCurrentInstance"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.getCurrentInstance, ["inject"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.inject, ["nextTick"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.nextTick, ["onBeforeUnmount"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onBeforeUnmount, ["onMounted"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.onMounted, ["provide"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.provide, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref, ["watch"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.watch });
 ;// CONCATENATED MODULE: external "../config-provider"
-var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var config_provider_y = x => () => x
-const config_provider_namespaceObject = config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_config_provider_fe8577a3__.usePrefix });
+var external_config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_config_provider_y = x => () => x
+const external_config_provider_namespaceObject = external_config_provider_x({ ["usePrefix"]: () => __WEBPACK_EXTERNAL_MODULE__config_provider_9d0186d9__.usePrefix });
 ;// CONCATENATED MODULE: external "../icon"
-var icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
-var icon_y = x => () => x
-const icon_namespaceObject = icon_x({ ["Loading"]: () => __WEBPACK_EXTERNAL_MODULE_bkui_vue_lib_icon_a97c79c3__.Loading });
+var external_icon_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var external_icon_y = x => () => x
+const external_icon_namespaceObject = external_icon_x({ ["Loading"]: () => __WEBPACK_EXTERNAL_MODULE__icon_85385c3e__.Loading });
 ;// CONCATENATED MODULE: ../../packages/checkbox/src/common.ts
 /*
  * Tencent is pleased to support the open source community by making
@@ -202,8 +200,8 @@ var useCheckbox = function useCheckbox() {
   var currentInstance = (0,external_vue_namespaceObject.getCurrentInstance)();
   var props = currentInstance.props,
     emit = currentInstance.emit;
-  var checkboxGroup = (0,external_vue_namespaceObject.inject)(checkboxGroupKey, shared_namespaceObject.EMPTY_OBJ);
-  var isGroup = !(0,shared_namespaceObject.isEmptyObj)(checkboxGroup);
+  var checkboxGroup = (0,external_vue_namespaceObject.inject)(checkboxGroupKey, external_shared_namespaceObject.EMPTY_OBJ);
+  var isGroup = !(0,external_shared_namespaceObject.isEmptyObj)(checkboxGroup);
   var inputRef = (0,external_vue_namespaceObject.ref)();
   var isChecked = (0,external_vue_namespaceObject.ref)(props.checked);
   var isPrechecking = (0,external_vue_namespaceObject.ref)(false);
@@ -340,16 +338,16 @@ var useCheckbox = function useCheckbox() {
 
 
 var checkboxProps = {
-  modelValue: shared_namespaceObject.PropTypes.oneOfType([String, Number, Boolean]),
-  label: shared_namespaceObject.PropTypes.oneOfType([String, Number, Boolean]),
-  trueLabel: shared_namespaceObject.PropTypes.oneOfType([String, Number, Boolean]).def(true),
-  falseLabel: shared_namespaceObject.PropTypes.oneOfType([String, Number, Boolean]).def(false),
-  disabled: shared_namespaceObject.PropTypes.bool.def(false),
-  checked: shared_namespaceObject.PropTypes.bool.def(false),
-  indeterminate: shared_namespaceObject.PropTypes.bool,
-  beforeChange: shared_namespaceObject.PropTypes.func,
-  size: shared_namespaceObject.PropTypes.size().def(shared_namespaceObject.SizeEnum.DEFAULT),
-  immediateEmitChange: shared_namespaceObject.PropTypes.bool.def(true) // 默认设置checked是否触发change事件
+  modelValue: external_shared_namespaceObject.PropTypes.oneOfType([String, Number, Boolean]),
+  label: external_shared_namespaceObject.PropTypes.oneOfType([String, Number, Boolean]),
+  trueLabel: external_shared_namespaceObject.PropTypes.oneOfType([String, Number, Boolean]).def(true),
+  falseLabel: external_shared_namespaceObject.PropTypes.oneOfType([String, Number, Boolean]).def(false),
+  disabled: external_shared_namespaceObject.PropTypes.bool.def(false),
+  checked: external_shared_namespaceObject.PropTypes.bool.def(false),
+  indeterminate: external_shared_namespaceObject.PropTypes.bool,
+  beforeChange: external_shared_namespaceObject.PropTypes.func,
+  size: external_shared_namespaceObject.PropTypes.size().def(external_shared_namespaceObject.SizeEnum.DEFAULT),
+  immediateEmitChange: external_shared_namespaceObject.PropTypes.bool.def(true) // 默认设置checked是否触发change事件
 };
 /* harmony default export */ const src_checkbox = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'Checkbox',
@@ -379,7 +377,7 @@ var checkboxProps = {
       isDisabled = _useCheckbox.isDisabled,
       setChecked = _useCheckbox.setChecked,
       handleChange = _useCheckbox.handleChange;
-    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
     return {
       inputRef: inputRef,
@@ -397,7 +395,7 @@ var checkboxProps = {
   },
   render: function render() {
     var _this = this;
-    var checkboxClass = (0,shared_namespaceObject.classes)(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(this.resolveClassName('checkbox')), true), "".concat(this.resolveClassName('checkbox'), "-").concat(this.size), true), 'is-focused', this.isFocus), 'is-checked', this.isChecked), 'is-disabled', this.isDisabled), 'is-indeterminated', this.indeterminate), 'is-prechecking', this.isPrechecking));
+    var checkboxClass = (0,external_shared_namespaceObject.classes)(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(this.resolveClassName('checkbox')), true), "".concat(this.resolveClassName('checkbox'), "-").concat(this.size), true), 'is-focused', this.isFocus), 'is-checked', this.isChecked), 'is-disabled', this.isDisabled), 'is-indeterminated', this.indeterminate), 'is-prechecking', this.isPrechecking));
     var renderLabel = function renderLabel() {
       if (!_this.label && !_this.$slots["default"]) {
         return null;
@@ -418,7 +416,7 @@ var checkboxProps = {
       "disabled": this.isDisabled || this.isPrechecking,
       "checked": this.isChecked,
       "onChange": this.handleChange
-    }, null)]), renderLabel(), this.isPrechecking && (0,external_vue_namespaceObject.createVNode)(icon_namespaceObject.Loading, {
+    }, null)]), renderLabel(), this.isPrechecking && (0,external_vue_namespaceObject.createVNode)(external_icon_namespaceObject.Loading, {
       "class": "".concat(this.resolveClassName('checkbox-checking'))
     }, null)]);
   }
@@ -455,10 +453,10 @@ var checkboxProps = {
 
 
 var checkboxGroupProps = {
-  name: shared_namespaceObject.PropTypes.string.def(''),
-  modelValue: shared_namespaceObject.PropTypes.array,
-  disabled: shared_namespaceObject.PropTypes.bool,
-  withValidate: shared_namespaceObject.PropTypes.bool.def(true)
+  name: external_shared_namespaceObject.PropTypes.string.def(''),
+  modelValue: external_shared_namespaceObject.PropTypes.array,
+  disabled: external_shared_namespaceObject.PropTypes.bool,
+  withValidate: external_shared_namespaceObject.PropTypes.bool.def(true)
 };
 /* harmony default export */ const checkbox_group = ((0,external_vue_namespaceObject.defineComponent)({
   name: 'CheckboxGroup',
@@ -472,7 +470,7 @@ var checkboxGroupProps = {
     }
   },
   setup: function setup(props, context) {
-    var formItem = (0,shared_namespaceObject.useFormItem)();
+    var formItem = (0,external_shared_namespaceObject.useFormItem)();
     var checkboxInstanceList = [];
     var register = function register(checkboxContext) {
       checkboxInstanceList.push(checkboxContext);
@@ -516,7 +514,7 @@ var checkboxGroupProps = {
         }
       });
     });
-    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+    var _usePrefix = (0,external_config_provider_namespaceObject.usePrefix)(),
       resolveClassName = _usePrefix.resolveClassName;
     return {
       resolveClassName: resolveClassName
@@ -558,7 +556,7 @@ var checkboxGroupProps = {
 
 
 
-var BkCheckbox = (0,shared_namespaceObject.withInstallProps)(src_checkbox, {
+var BkCheckbox = (0,external_shared_namespaceObject.withInstallProps)(src_checkbox, {
   Group: checkbox_group
 });
 /* harmony default export */ const src = (BkCheckbox);

package/lib/code-diff/code-diff.css

@@ -1,205 +1,205 @@
 /* stylelint-disable declaration-no-important */
-:where(.bk-code-diff) {
+.bk-code-diff {
   position: relative;
 }
-:where(.bk-code-diff) .d2h-files-diff .d2h-file-side-diff:last-child .d2h-diff-table {
+.bk-code-diff .d2h-files-diff .d2h-file-side-diff:last-child .d2h-diff-table {
   border-left: 1px solid #dcdee5;
 }
-:where(.bk-code-diff) td {
+.bk-code-diff td {
   padding: 0;
 }
-:where(.bk-code-diff) tr {
+.bk-code-diff tr {
   line-height: 18px;
 }
-:where(.bk-code-diff) tr .d2h-code-line-ctn {
+.bk-code-diff tr .d2h-code-line-ctn {
   vertical-align: top;
 }
-:where(.bk-code-diff) .d2h-code-side-linenumber {
+.bk-code-diff .d2h-code-side-linenumber {
   line-height: 18px;
   background-color: #fafbfd;
   border: 0;
 }
-:where(.bk-code-diff) .d2h-file-header {
+.bk-code-diff .d2h-file-header {
   display: none;
 }
-:where(.bk-code-diff) .hljs {
+.bk-code-diff .hljs {
   color: #000;
   background: #fff;
 }
-:where(.bk-code-diff) .hljs-comment,
-:where(.bk-code-diff) .hljs-quote {
+.bk-code-diff .hljs-comment,
+.bk-code-diff .hljs-quote {
   color: #800;
 }
-:where(.bk-code-diff) .hljs-keyword,
-:where(.bk-code-diff) .hljs-name,
-:where(.bk-code-diff) .hljs-section,
-:where(.bk-code-diff) .hljs-selector-tag,
-:where(.bk-code-diff) .hljs-title {
+.bk-code-diff .hljs-keyword,
+.bk-code-diff .hljs-name,
+.bk-code-diff .hljs-section,
+.bk-code-diff .hljs-selector-tag,
+.bk-code-diff .hljs-title {
   color: #008;
 }
-:where(.bk-code-diff) .hljs-template-variable,
-:where(.bk-code-diff) .hljs-variable {
+.bk-code-diff .hljs-template-variable,
+.bk-code-diff .hljs-variable {
   color: #660;
 }
-:where(.bk-code-diff) .hljs-regexp,
-:where(.bk-code-diff) .hljs-selector-attr,
-:where(.bk-code-diff) .hljs-selector-pseudo,
-:where(.bk-code-diff) .hljs-string {
+.bk-code-diff .hljs-regexp,
+.bk-code-diff .hljs-selector-attr,
+.bk-code-diff .hljs-selector-pseudo,
+.bk-code-diff .hljs-string {
   color: #080;
 }
-:where(.bk-code-diff) .hljs-bullet,
-:where(.bk-code-diff) .hljs-link,
-:where(.bk-code-diff) .hljs-literal,
-:where(.bk-code-diff) .hljs-meta,
-:where(.bk-code-diff) .hljs-number,
-:where(.bk-code-diff) .hljs-symbol {
+.bk-code-diff .hljs-bullet,
+.bk-code-diff .hljs-link,
+.bk-code-diff .hljs-literal,
+.bk-code-diff .hljs-meta,
+.bk-code-diff .hljs-number,
+.bk-code-diff .hljs-symbol {
   color: #066;
 }
-:where(.bk-code-diff) .hljs-attr,
-:where(.bk-code-diff) .hljs-built_in,
-:where(.bk-code-diff) .hljs-doctag,
-:where(.bk-code-diff) .hljs-params,
-:where(.bk-code-diff) .hljs-title,
-:where(.bk-code-diff) .hljs-type {
+.bk-code-diff .hljs-attr,
+.bk-code-diff .hljs-built_in,
+.bk-code-diff .hljs-doctag,
+.bk-code-diff .hljs-params,
+.bk-code-diff .hljs-title,
+.bk-code-diff .hljs-type {
   color: #606;
 }
-:where(.bk-code-diff) .hljs-attribute,
-:where(.bk-code-diff) .hljs-subst {
+.bk-code-diff .hljs-attribute,
+.bk-code-diff .hljs-subst {
   color: #000;
 }
-:where(.bk-code-diff) .hljs-formula {
+.bk-code-diff .hljs-formula {
   font-style: italic;
   background-color: #eee;
 }
-:where(.bk-code-diff) .hljs-selector-class,
-:where(.bk-code-diff) .hljs-selector-id {
+.bk-code-diff .hljs-selector-class,
+.bk-code-diff .hljs-selector-id {
   color: #9b703f;
 }
-:where(.bk-code-diff) .hljs-addition {
+.bk-code-diff .hljs-addition {
   background-color: #e9faed;
 }
-:where(.bk-code-diff) .hljs-deletion {
+.bk-code-diff .hljs-deletion {
   background-color: #fbe9eb;
 }
-:where(.bk-code-diff) .hljs-doctag,
-:where(.bk-code-diff) .hljs-strong {
+.bk-code-diff .hljs-doctag,
+.bk-code-diff .hljs-strong {
   font-weight: 700;
 }
-:where(.bk-code-diff) .hljs-emphasis {
+.bk-code-diff .hljs-emphasis {
   font-style: italic;
 }
-:where(.bk-code-diff) .d2h-del .hljs {
+.bk-code-diff .d2h-del .hljs {
   background: transparent;
 }
-:where(.bk-code-diff) .d2h-ins .hljs {
+.bk-code-diff .d2h-ins .hljs {
   background: transparent;
 }
-:where(.bk-code-diff).dark {
+.bk-code-diff.dark {
   color: #abb2bf !important;
   background: #1d1d1d;
 }
-:where(.bk-code-diff).dark .hljs {
+.bk-code-diff.dark .hljs {
   color: #abb2bf !important;
   background: #1d1d1d;
 }
-:where(.bk-code-diff).dark .d2h-files-diff:last-child .d2h-diff-table {
+.bk-code-diff.dark .d2h-files-diff:last-child .d2h-diff-table {
   border-left: 1px solid #313238;
 }
-:where(.bk-code-diff).dark .d2h-file-side-diff:nth-child(n + 2) .d2h-code-wrapper {
+.bk-code-diff.dark .d2h-file-side-diff:nth-child(n + 2) .d2h-code-wrapper {
   border-left-color: #313238;
 }
-:where(.bk-code-diff).dark pre code.hljs {
+.bk-code-diff.dark pre code.hljs {
   display: block;
   padding: 1em;
   overflow-x: auto;
 }
-:where(.bk-code-diff).dark code.hljs {
+.bk-code-diff.dark code.hljs {
   padding: 3px 5px;
 }
-:where(.bk-code-diff).dark .hljs-comment,
-:where(.bk-code-diff).dark .hljs-quote {
+.bk-code-diff.dark .hljs-comment,
+.bk-code-diff.dark .hljs-quote {
   font-style: italic;
   color: #5c6370;
 }
-:where(.bk-code-diff).dark .hljs-doctag,
-:where(.bk-code-diff).dark .hljs-formula,
-:where(.bk-code-diff).dark .hljs-keyword,
-:where(.bk-code-diff).dark .hljs-params {
+.bk-code-diff.dark .hljs-doctag,
+.bk-code-diff.dark .hljs-formula,
+.bk-code-diff.dark .hljs-keyword,
+.bk-code-diff.dark .hljs-params {
   color: #c678dd;
 }
-:where(.bk-code-diff).dark .hljs-deletion,
-:where(.bk-code-diff).dark .hljs-name,
-:where(.bk-code-diff).dark .hljs-section,
-:where(.bk-code-diff).dark .hljs-selector-tag,
-:where(.bk-code-diff).dark .hljs-subst {
+.bk-code-diff.dark .hljs-deletion,
+.bk-code-diff.dark .hljs-name,
+.bk-code-diff.dark .hljs-section,
+.bk-code-diff.dark .hljs-selector-tag,
+.bk-code-diff.dark .hljs-subst {
   color: #e06c75;
 }
-:where(.bk-code-diff).dark .hljs-literal {
+.bk-code-diff.dark .hljs-literal {
   color: #56b6c2;
 }
-:where(.bk-code-diff).dark .hljs-addition,
-:where(.bk-code-diff).dark .hljs-attribute,
-:where(.bk-code-diff).dark .hljs-meta .hljs-string,
-:where(.bk-code-diff).dark .hljs-regexp,
-:where(.bk-code-diff).dark .hljs-string {
+.bk-code-diff.dark .hljs-addition,
+.bk-code-diff.dark .hljs-attribute,
+.bk-code-diff.dark .hljs-meta .hljs-string,
+.bk-code-diff.dark .hljs-regexp,
+.bk-code-diff.dark .hljs-string {
   color: #98c379;
 }
-:where(.bk-code-diff).dark .hljs-attr,
-:where(.bk-code-diff).dark .hljs-number,
-:where(.bk-code-diff).dark .hljs-selector-attr,
-:where(.bk-code-diff).dark .hljs-selector-class,
-:where(.bk-code-diff).dark .hljs-selector-pseudo,
-:where(.bk-code-diff).dark .hljs-template-variable,
-:where(.bk-code-diff).dark .hljs-type,
-:where(.bk-code-diff).dark .hljs-variable {
+.bk-code-diff.dark .hljs-attr,
+.bk-code-diff.dark .hljs-number,
+.bk-code-diff.dark .hljs-selector-attr,
+.bk-code-diff.dark .hljs-selector-class,
+.bk-code-diff.dark .hljs-selector-pseudo,
+.bk-code-diff.dark .hljs-template-variable,
+.bk-code-diff.dark .hljs-type,
+.bk-code-diff.dark .hljs-variable {
   color: #d19a66;
 }
-:where(.bk-code-diff).dark .hljs-bullet,
-:where(.bk-code-diff).dark .hljs-link,
-:where(.bk-code-diff).dark .hljs-meta,
-:where(.bk-code-diff).dark .hljs-selector-id,
-:where(.bk-code-diff).dark .hljs-symbol,
-:where(.bk-code-diff).dark .hljs-title {
+.bk-code-diff.dark .hljs-bullet,
+.bk-code-diff.dark .hljs-link,
+.bk-code-diff.dark .hljs-meta,
+.bk-code-diff.dark .hljs-selector-id,
+.bk-code-diff.dark .hljs-symbol,
+.bk-code-diff.dark .hljs-title {
   color: #61aeee;
 }
-:where(.bk-code-diff).dark .hljs-built_in,
-:where(.bk-code-diff).dark .hljs-class .hljs-title,
-:where(.bk-code-diff).dark .hljs-title.class_ {
+.bk-code-diff.dark .hljs-built_in,
+.bk-code-diff.dark .hljs-class .hljs-title,
+.bk-code-diff.dark .hljs-title.class_ {
   color: #e6c07b;
 }
-:where(.bk-code-diff).dark .hljs-emphasis {
+.bk-code-diff.dark .hljs-emphasis {
   font-style: italic;
 }
-:where(.bk-code-diff).dark .hljs-strong {
+.bk-code-diff.dark .hljs-strong {
   font-weight: 700;
 }
-:where(.bk-code-diff).dark .hljs-link {
+.bk-code-diff.dark .hljs-link {
   text-decoration: underline;
 }
-:where(.bk-code-diff).dark .d2h-code-linenumber,
-:where(.bk-code-diff).dark .d2h-code-side-linenumber {
+.bk-code-diff.dark .d2h-code-linenumber,
+.bk-code-diff.dark .d2h-code-side-linenumber {
   font-size: 12px;
   color: #8f8f89;
   background: #212121;
   border: 0;
 }
-:where(.bk-code-diff).dark .d2h-info {
+.bk-code-diff.dark .d2h-info {
   color: inherit;
   background-color: transparent;
 }
-:where(.bk-code-diff).dark .d2h-del {
+.bk-code-diff.dark .d2h-del {
   background-color: #422321 !important;
 }
-:where(.bk-code-diff).dark .d2h-del .hljs {
+.bk-code-diff.dark .d2h-del .hljs {
   background: transparent;
 }
-:where(.bk-code-diff).dark .d2h-ins {
+.bk-code-diff.dark .d2h-ins {
   background: #212121 !important;
 }
-:where(.bk-code-diff).dark .d2h-ins .hljs {
+.bk-code-diff.dark .d2h-ins .hljs {
   background: transparent;
 }
-:where(.bk-code-diff).dark .d2h-code-side-emptyplaceholder,
-:where(.bk-code-diff).dark .d2h-emptyplaceholder {
+.bk-code-diff.dark .d2h-code-side-emptyplaceholder,
+.bk-code-diff.dark .d2h-emptyplaceholder {
   background-color: #292929 !important;
 }

package/lib/code-diff/code-diff.less

@@ -4,7 +4,7 @@
 // TODO: theme var
 
 /* stylelint-disable declaration-no-important */
-:where(.@{bk-prefix}-code-diff) {
+.@{bk-prefix}-code-diff {
   position: relative;
 
   .d2h-files-diff {
@@ -13,7 +13,8 @@
         border-left: 1px solid #dcdee5;
       }
     }
-  }
+  }  
+  
 
   td {
     padding: 0;
@@ -144,7 +145,7 @@
           border-left: 1px solid #313238;
         }
       }
-    }
+    }  
 
     .d2h-file-side-diff {
       &:nth-child(n + 2) {