frat: add lint for scoped-css (#138)

.eslintrc

@@ -3,6 +3,7 @@
     "plugin:@typescript-eslint/recommended",
     "eslint-config-airbnb-base",
     "plugin:vue/vue3-recommended",
+    "plugin:vue-scoped-css/base",
     "plugin:prettier/recommended"
   ],
   "env": {
@@ -53,7 +54,8 @@
         "vue/require-default-prop": 0,
         "vue/multi-word-component-names": 0,
         "vue/no-reserved-props": 0,
-        "vue/no-v-html": 0
+        "vue/no-v-html": 0,
+        "vue-scoped-css/enforce-style-type": ["error", { "allows": ["scoped"] }]
       }
     }
   ]

package.json

@@ -49,6 +49,7 @@
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^7.16.0",
+    "eslint-plugin-vue-scoped-css": "^2.2.0",
     "husky": "^7.0.4",
     "less": "^4.1.1",
     "lint-staged": "^12.1.2",

src/App.vue

@@ -16,7 +16,7 @@ onMounted(() => {
   store.updateConfig({ ...config });
 });
 </script>
-<style lang="less">
+<style lang="less" scoped>
 @import '@/style/variables.less';
 
 #nprogress .bar {

src/layouts/blank.vue

@@ -3,7 +3,7 @@
     <router-view />
   </div>
 </template>
-<style lang="less">
+<style lang="less" scoped>
 .tdesign-wrapper {
   height: 100vh;
   display: flex;

src/layouts/components/Header.vue

@@ -154,7 +154,7 @@ const navToHelper = () => {
   window.open('http://tdesign.tencent.com/starter/docs/get-started');
 };
 </script>
-<style lang="less">
+<style lang="less" scoped>
 @import '@/style/variables.less';
 .@{prefix}-header {
   &-layout {
@@ -188,7 +188,7 @@ const navToHelper = () => {
   flex: 1 1 1;
   display: inline-flex;
 
-  .t-menu__item {
+  :deep(.t-menu__item) {
     min-width: unset;
     padding: 0px 16px;
   }
@@ -261,7 +261,7 @@ const navToHelper = () => {
   }
 }
 
-.t-head-menu__inner {
+:deep(.t-head-menu__inner) {
   border-bottom: 1px solid @border-level-1-color;
 }
 
@@ -294,7 +294,7 @@ const navToHelper = () => {
     margin-right: 8px;
   }
 
-  .t-dropdown__item {
+  :deep(.t-dropdown__item) {
     .t-dropdown__item__content {
       display: flex;
       justify-content: center;
@@ -306,12 +306,12 @@ const navToHelper = () => {
     }
   }
 
-  .t-dropdown__item {
+  :deep(.t-dropdown__item) {
     width: 100%;
     margin-bottom: 0px;
   }
   &:last-child {
-    .t-dropdown__item {
+    :deep(.t-dropdown__item) {
       margin-bottom: 8px;
     }
   }

src/layouts/components/Notice.vue

@@ -192,4 +192,15 @@ const goDetail = () => {
     }
   }
 }
+
+.t-button {
+  margin: 0 8px;
+
+  .t-icon {
+    font-size: 20px;
+    &.general {
+      margin-right: 16px;
+    }
+  }
+}
 </style>

src/layouts/components/Search.vue

@@ -1,7 +1,7 @@
 <template>
   <div v-if="layout === 'side'" class="header-menu-search">
     <t-input
-      :class="{ 'hover-active': isSearchFocus }"
+      :class="['header-search', { 'hover-active': isSearchFocus }]"
       placeholder="请输入搜索内容"
       @blur="changeSearchFocus(false)"
       @focus="changeSearchFocus(true)"
@@ -52,7 +52,7 @@ const changeSearchFocus = (value: boolean) => {
   isSearchFocus.value = value;
 };
 </script>
-<style lang="less">
+<style lang="less" scoped>
 @import '@/style/variables.less';
 
 .header-menu-search {
@@ -71,42 +71,38 @@ const changeSearchFocus = (value: boolean) => {
     font-size: 20px !important;
     color: @text-color-primary !important;
   }
-  .t-input {
+  .header-search {
-    border: none;
+    :deep(.t-input) {
-    outline: none;
+      border: none;
-    box-shadow: none;
+      outline: none;
-    transition: background @anim-duration-base linear;
+      box-shadow: none;
-    .t-input__inner {
       transition: background @anim-duration-base linear;
-    }
-    .t-input__inner {
-      background: none;
-    }
-    &:hover {
-      background: @bg-color-secondarycontainer;
       .t-input__inner {
+        transition: background @anim-duration-base linear;
+      }
+      .t-input__inner {
+        background: none;
+      }
+      &:hover {
         background: @bg-color-secondarycontainer;
+        .t-input__inner {
+          background: @bg-color-secondarycontainer;
+        }
       }
     }
   }
 }
 
-.header-search {
+.t-button {
-  width: 200px;
+  margin: 0 8px;
-  transition: width @anim-duration-base @anim-time-fn-easing;
+  transition: opacity @anim-duration-base @anim-time-fn-easing;
-  .t-input {
+
-    border: 0;
+  .t-icon {
-    &:focus {
+    font-size: 20px;
-      box-shadow: none;
+    &.general {
+      margin-right: 16px;
     }
   }
-  &.width-zero {
-    width: 0;
-    opacity: 0;
-  }
-}
-.t-button {
-  transition: opacity @anim-duration-base @anim-time-fn-easing;
 }
 .search-icon-hide {
   opacity: 0;
@@ -114,5 +110,20 @@ const changeSearchFocus = (value: boolean) => {
 .header-menu-search-left {
   display: flex;
   align-items: center;
+
+  .header-search {
+    width: 200px;
+    transition: width @anim-duration-base @anim-time-fn-easing;
+    :deep(.t-input) {
+      border: 0;
+      &:focus {
+        box-shadow: none;
+      }
+    }
+    &.width-zero {
+      width: 0;
+      opacity: 0;
+    }
+  }
 }
 </style>

src/layouts/setting.vue

@@ -201,7 +201,7 @@ watchEffect(() => {
   settingStore.updateConfig(formData.value);
 });
 </script>
-<style lang="less">
+<style lang="less" scoped>
 @import '@/style/variables';
 
 .tdesign-setting {
@@ -288,7 +288,7 @@ watchEffect(() => {
   .setting-container {
     padding-bottom: 100px;
   }
-  .t-radio-group.t-size-m {
+  :deep(.t-radio-group.t-size-m) {
     min-height: 32px;
     width: 100%;
     height: auto;
@@ -302,7 +302,7 @@ watchEffect(() => {
     align-items: center;
     margin-bottom: 16px;
 
-    .t-radio-button {
+    :deep(.t-radio-button) {
       display: inline-flex;
       max-height: 78px;
       padding: 8px;
@@ -313,22 +313,22 @@ watchEffect(() => {
       }
     }
 
-    .t-is-checked {
+    :deep(.t-is-checked) {
       border: 2px solid @brand-color !important;
     }
 
-    .t-form__controls-content {
+    :deep(.t-form__controls-content) {
       justify-content: end;
     }
   }
 
-  .t-form__controls-content {
+  :deep(.t-form__controls-content) {
     justify-content: end;
   }
 }
 
 .setting-route-theme {
-  .t-form__label {
+  :deep(.t-form__label) {
     min-width: 310px !important;
     color: @text-color-secondary;
   }
@@ -336,7 +336,7 @@ watchEffect(() => {
 
 .setting-color-theme {
   .setting-layout-drawer {
-    .t-radio-button {
+    :deep(.t-radio-button) {
       height: 32px;
     }
 

src/pages/list/components/CommonTable.vue

@@ -265,7 +265,7 @@ const getContainer = () => {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 @import '@/style/variables.less';
 .list-common-table {
   background-color: @bg-color-container;

src/pages/login/components/Login.vue

@@ -124,3 +124,7 @@ const onSubmit = async ({ validateResult }) => {
   }
 };
 </script>
+
+<style lang="less" scoped>
+@import url('../index.less');
+</style>

src/pages/login/components/Register.vue

@@ -120,3 +120,7 @@ const switchType = (val) => {
   type.value = val;
 };
 </script>
+
+<style lang="less" scoped>
+@import url('../index.less');
+</style>

src/pages/login/index.less

@@ -115,7 +115,7 @@
       justify-content: space-between;
     }
 
-    .t-checkbox__label {
+    :deep(.t-checkbox__label) {
       color: @text-color-secondary;
     }
 
@@ -132,7 +132,7 @@
     display: flex;
     align-items: center;
 
-    .t-form__controls {
+    :deep(.t-form__controls) {
       width: 100%;
 
       button {

src/pages/login/index.vue

@@ -41,6 +41,6 @@ const switchType = (val: string) => {
 };
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
 @import url('./index.less');
 </style>