Merge pull request #105 from ruedap/refactor-styles

Refactor nested selector in styled-components
ruedap · May 24, 2020 · 6843fbc · 6843fbc · vercel · May 24, 2020
2 parents e46cbd7 + fce1911
commit 6843fbc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 16 deletions.
diff --git a/components/organisms/article_list/index.tsx b/components/organisms/article_list/index.tsx
@@ -14,9 +14,9 @@ const Time = ({ dateString, className }: { dateString: string, className?: strin
     <time dateTime={d.toISOString()} className={className}>
       <Styled.Year>{year}</Styled.Year>
       <Styled.Dot>.</Styled.Dot>
-      <Styled.Month className="sc-month">{month}</Styled.Month>
+      <Styled.Month>{month}</Styled.Month>
       <Styled.Dot>.</Styled.Dot>
-      <Styled.Date className="sc-date">{date}</Styled.Date>
+      <Styled.Date>{date}</Styled.Date>
     </time>
   )
 }
@@ -34,6 +34,7 @@ const ArticleList = ({
   }
 
   const StyledTime = Styled.Time(Time)
+  const StyledItemLink = Styled.ItemLink(Styled.Month, Styled.Date, Styled.Title)
 
   return (
     <Styled.Root>
@@ -47,10 +48,10 @@ const ArticleList = ({
             )}
             <Styled.Item>
               <Link href="[year]/[month]/[date]/[title]" passHref as={url}>
-                <Styled.ItemLink>
+                <StyledItemLink>
                   <StyledTime dateString={date} />
-                  <Styled.Title className="sc-title">{title}</Styled.Title>
-                </Styled.ItemLink>
+                  <Styled.Title>{title}</Styled.Title>
+                </StyledItemLink>
               </Link>
             </Styled.Item>
           </React.Fragment>

diff --git a/components/organisms/article_list/styled.ts b/components/organisms/article_list/styled.ts
@@ -40,7 +40,7 @@ export const Year = styled.span`
 export const Dot = Year
 
 // FIXME: `Warning: Prop `className` did not match. Server: "styled__Time-sc-5t8qkb-4 ennoTY" Client: "styled-sc-5t8qkb-4 gbbMlh"`
-export const Time = (rc) => styled(rc)`
+export const Time = (Time) => styled(Time)`
   background-color: #fff;
   display: block;
   float: left;
@@ -87,7 +87,7 @@ export const Date = styled(_ItemLineMonthAndDate)`
   background-color: rgba(var(--b-rgb-base), 0.38);
 `
 
-export const ItemLink = styled.a`
+export const ItemLink = (Month, Date, Title) => styled.a`
   ${Styles.mixins.linkColors(
     '#fff',
     `rgba(var(--b-rgb-base), ${Styles.funcs.fibo('sm', 'alpha')})`,
@@ -102,21 +102,15 @@ export const ItemLink = styled.a`
   width: 100%;
 
   &:hover {
-    /* FIXME: nested selector */
-    /* ${Month} { */
-    .sc-month {
+    ${Month} {
       background-color: rgba(var(--b-rgb-base), 0.26);
     }
 
-    /* FIXME: nested selector */
-    /* ${Date} { */
-    .sc-date {
+    ${Date} {
       background-color: rgba(var(--b-rgb-base), 0.3);
     }
 
-    /* FIXME: nested selector */
-    /* ${Title} { */
-    .sc-title {
+    ${Title} {
       background-color: rgba(var(--b-rgb-base), 0.34);
     }
   }