perf(form-builder): avoid the use of nested ::placeholder selector in…

… TagInput
sanity-io · Apr 8, 2021 · ed14734 · ed14734
1 parent 03d4a03
commit ed14734
Showing 1 changed file with 5 additions and 8 deletions.
diff --git a/packages/@sanity/form-builder/src/components/tagInput/tagInput.tsx b/packages/@sanity/form-builder/src/components/tagInput/tagInput.tsx
@@ -94,23 +94,20 @@ const Input = styled.input(
       paddingRight: rem(p),
       paddingBottom: rem(p - size.descenderHeight),
       paddingLeft: rem(p),
+      '&::placeholder': {
+        color: 'var(--input-placeholder-color)',
+      },
 
       // enabled
       '&:not(:invalid):not(:disabled)': {
         color: color.default.enabled.fg,
-
-        '&::placeholder': {
-          color: color.default.enabled.placeholder,
-        },
+        '--input-placeholder-color': color.default.enabled.placeholder,
       },
 
       // disabled
       '&:not(:invalid):disabled': {
         color: color.default.disabled.fg,
-
-        '&::placeholder': {
-          color: color.default.disabled.placeholder,
-        },
+        '--input-placeholder-color': color.default.disabled.placeholder,
       },
     }
   }