style(Field): reduce selector depth (#9103)

src/field/Field.tsx

@@ -386,14 +386,18 @@ export default defineComponent({
     };
 
     const renderInput = () => {
-      const inputAlign = getProp('inputAlign');
+      const controlClass = bem('control', [
+        getProp('inputAlign'),
+        {
+          error: showError.value,
+          custom: !!slots.input,
+          'min-height': props.type === 'textarea' && !props.autosize,
+        },
+      ]);
 
       if (slots.input) {
         return (
-          <div
+          <div class={controlClass} onClick={onClickInput}>
-            class={bem('control', [inputAlign, 'custom'])}
-            onClick={onClickInput}
-          >
             {slots.input()}
           </div>
         );
@@ -403,7 +407,7 @@ export default defineComponent({
         ref: inputRef,
         name: props.name,
         rows: props.rows !== undefined ? +props.rows : undefined,
-        class: bem('control', inputAlign),
+        class: controlClass,
         value: props.modelValue,
         disabled: getProp('disabled'),
         readonly: getProp('readonly'),
@@ -559,10 +563,8 @@ export default defineComponent({
           size={props.size}
           icon={props.leftIcon}
           class={bem({
-            error: showError.value,
             disabled,
             [`label-${labelAlign}`]: labelAlign,
-            'min-height': props.type === 'textarea' && !props.autosize,
           })}
           center={props.center}
           border={props.border}

src/field/index.less

@@ -111,6 +111,16 @@
       min-height: var(--van-cell-line-height);
     }
 
+    &--error,
+    &--error::placeholder {
+      color: var(--van-field-input-error-text-color);
+      -webkit-text-fill-color: currentColor;
+    }
+
+    &--min-height {
+      min-height: var(--van-field-text-area-min-height);
+    }
+
     // for ios wechat
     &[type='date'],
     &[type='time'],
@@ -184,20 +194,4 @@
     line-height: var(--van-field-word-limit-line-height);
     text-align: right;
   }
-
-  &--error {
-    .van-field__control {
-      &,
-      &::placeholder {
-        color: var(--van-field-input-error-text-color);
-        -webkit-text-fill-color: currentColor;
-      }
-    }
-  }
-
-  &--min-height {
-    .van-field__control {
-      min-height: var(--van-field-text-area-min-height);
-    }
-  }
 }

src/field/test/__snapshots__/demo.spec.ts.snap

@@ -183,7 +183,7 @@ exports[`should render demo and match snapshot 1`] = `
 </div>
 <div>
   <div class="van-cell-group van-cell-group--inset">
-    <div class="van-cell van-field van-field--error">
+    <div class="van-cell van-field">
       <div class="van-cell__title van-field__label van-field__label--required">
         <span>
           Username
@@ -192,7 +192,7 @@ exports[`should render demo and match snapshot 1`] = `
       <div class="van-cell__value van-field__value">
         <div class="van-field__body">
           <input type="text"
-                 class="van-field__control"
+                 class="van-field__control van-field__control--error"
                  placeholder="Username"
           >
         </div>