fix(SSR): change the unreliable pseudo class :first-child to :first-o…

…f-type
trendmicro-frontend · Nov 5, 2020 · dab6c84 · dab6c84
1 parent 804b5ea
commit dab6c84
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 25 deletions.
diff --git a/packages/react-styled-ui/src/Checkbox/styles.js b/packages/react-styled-ui/src/Checkbox/styles.js
@@ -158,7 +158,7 @@ const interactionProps = ({ color, colorMode }) => {
       bg: 'inherit',
       borderColor: checkedAndFocusBorderColor,
       color: checkedAndFocusColor, // Icon color
-      '& > :first-child': {
+      '& > div:first-of-type': {
         bg: checkedAndFocusBgColor,
       },
     },

diff --git a/packages/react-styled-ui/src/Input/styles.js b/packages/react-styled-ui/src/Input/styles.js
@@ -172,7 +172,7 @@ const getInputGroupCSS = ({
   const useNegativeMargin = (variant === 'outline' || variant === 'filled');
 
   return {
-    '&:not(:first-child)': {
+    '&:not(:first-of-type)': {
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0,
     },

diff --git a/packages/react-styled-ui/src/InputGroupAppend/styles.js b/packages/react-styled-ui/src/InputGroupAppend/styles.js
@@ -11,8 +11,8 @@ const notLastChildStyle = {
 const baseProps = {
   ml: -1,
   css: {
-    '& > *:first-child': notFirstChildStyle,
-    '&:not(:last-child) > *:first-child': notLastChildStyle,
+    '& > *:first-of-type': notFirstChildStyle,
+    '&:not(:last-child) > *:first-of-type': notLastChildStyle,
   }
 };
 

diff --git a/packages/react-styled-ui/src/InputGroupPrepend/styles.js b/packages/react-styled-ui/src/InputGroupPrepend/styles.js
@@ -11,8 +11,8 @@ const notLastChildStyle = {
 const baseProps = {
   mr: -1,
   css: {
-    '& > *:first-child': notLastChildStyle,
-    '&:not(:first-child) > *:first-child': notFirstChildStyle,
+    '& > *:first-of-type': notLastChildStyle,
+    '&:not(:first-of-type) > *:first-of-type': notFirstChildStyle,
   },
 };
 

diff --git a/packages/styled-ui-docs/components/Main.jsx b/packages/styled-ui-docs/components/Main.jsx
@@ -18,7 +18,7 @@ const Main = React.forwardRef(({ children, ...props }, ref) => {
       px="6x"
       backgroundColor={backgroundColor}
       css={css`
-        >:first-child {
+        >:first-of-type {
           margin-top: 0!important;
         }
         >:last-child {

diff --git a/packages/styled-ui-docs/pages/buttongroup.mdx b/packages/styled-ui-docs/pages/buttongroup.mdx
@@ -85,7 +85,7 @@ function Example() {
       <ButtonGroup
         variant="secondary"
         css={{
-          '> *:not(:first-child)': {
+          '> *:not(:first-of-type)': {
             marginLeft: -1
           }
         }}
@@ -97,7 +97,7 @@ function Example() {
       <ButtonGroup
         variant="ghost"
         css={{
-          '> *:not(:first-child)': {
+          '> *:not(:first-of-type)': {
             marginLeft: -1
           }
         }}
@@ -161,7 +161,7 @@ function Example() {
           size="sm"
           variant="secondary"
           css={{
-            '> *:not(:first-child)': {
+            '> *:not(:first-of-type)': {
               marginLeft: -1
             }
           }}
@@ -174,7 +174,7 @@ function Example() {
           size="md"
           variant="secondary"
           css={{
-            '> *:not(:first-child)': {
+            '> *:not(:first-of-type)': {
               marginLeft: -1
             }
           }}
@@ -187,7 +187,7 @@ function Example() {
           size="lg"
           variant="secondary"
           css={{
-            '> *:not(:first-child)': {
+            '> *:not(:first-of-type)': {
               marginLeft: -1
             }
           }}
@@ -202,7 +202,7 @@ function Example() {
           size="sm"
           variant="ghost"
           css={{
-            '> *:not(:first-child)': {
+            '> *:not(:first-of-type)': {
               marginLeft: -1
             }
           }}
@@ -217,7 +217,7 @@ function Example() {
           size="md"
           variant="ghost"
           css={{
-            '> *:not(:first-child)': {
+            '> *:not(:first-of-type)': {
               marginLeft: -1
             }
           }}
@@ -232,7 +232,7 @@ function Example() {
           size="lg"
           variant="ghost"
           css={{
-            '> *:not(:first-child)': {
+            '> *:not(:first-of-type)': {
               marginLeft: -1
             }
           }}
@@ -288,7 +288,7 @@ function Example() {
         <ButtonGroup
           variant="secondary"
           css={{
-            '> *:not(:first-child)': {
+            '> *:not(:first-of-type)': {
               marginLeft: -1
             }
           }}
@@ -301,7 +301,7 @@ function Example() {
           orientation="vertical"
           variant="secondary"
           css={{
-            '> *:not(:first-child)': {
+            '> *:not(:first-of-type)': {
               marginTop: -1
             }
           }}
@@ -315,7 +315,7 @@ function Example() {
         <ButtonGroup
           variant="ghost"
           css={{
-            '> *:not(:first-child)': {
+            '> *:not(:first-of-type)': {
               marginLeft: -1
             }
           }}
@@ -330,7 +330,7 @@ function Example() {
           orientation="vertical"
           variant="ghost"
           css={{
-            '> *:not(:first-child)': {
+            '> *:not(:first-of-type)': {
               marginTop: -1
             }
           }}
@@ -530,7 +530,7 @@ function SwitchButton() {
       <ButtonGroup
         variant="secondary"
         css={{
-          '> *:not(:first-child)': {
+          '> *:not(:first-of-type)': {
             marginLeft: -1
           }
         }}
@@ -555,7 +555,7 @@ function SwitchButton() {
       <ButtonGroup
         variant="ghost"
         css={{
-          '> *:not(:first-child)': {
+          '> *:not(:first-of-type)': {
             marginLeft: -1
           }
         }}

diff --git a/packages/styled-ui-docs/pages/modal.mdx b/packages/styled-ui-docs/pages/modal.mdx
@@ -197,7 +197,7 @@ function Example() {
         <ButtonGroup
           variant="secondary"
           css={{
-            '> *:not(:first-child)': {
+            '> *:not(:first-of-type)': {
               marginLeft: -1
             }
           }}

diff --git a/packages/styled-ui-docs/pages/pagination.mdx b/packages/styled-ui-docs/pages/pagination.mdx
@@ -126,7 +126,7 @@ function Minor() {
       <ButtonGroup
         variant="secondary"
         css={{
-          '> *:not(:first-child)': {
+          '> *:not(:first-of-type)': {
             marginLeft: -1
           }
         }}
@@ -188,7 +188,7 @@ function Minor() {
       <ButtonGroup
         variant="secondary"
         css={{
-          '> *:not(:first-child)': {
+          '> *:not(:first-of-type)': {
             marginLeft: -1
           }
         }}

diff --git a/packages/styled-ui-docs/pages/transition.mdx b/packages/styled-ui-docs/pages/transition.mdx
@@ -131,7 +131,7 @@ function Example() {
       <ButtonGroup
         variant="secondary"
         css={{
-          '> *:not(:first-child)': {
+          '> *:not(:first-of-type)': {
             marginLeft: -1
           }
         }}