Merge pull request #153 from ChtiJS/styleolulphrli

style hr li ol p

src/components/hr.module.scss

@@ -0,0 +1,4 @@
+.root {
+    border-bottom: var(--border) solid var(--green2);
+    margin: 0 0 var(--vRythm) 0;
+  }

src/components/hr.tsx

@@ -1,14 +1,9 @@
 import { HTMLAttributes } from 'react';
+import styles from './hr.module.scss';
 
 const HorizontalRule = (props: HTMLAttributes<HTMLHRElement>) => (
   <>
-    <hr className="root" {...props} />
-    <style jsx>{`
-      .root {
-        border-bottom: var(--border) solid var(--green2);
-        margin: 0 0 var(--vRythm) 0;
-      }
-    `}</style>
+    <hr className={styles.root} {...props} />
   </>
 );
 

src/components/li.module.scss

@@ -0,0 +1,6 @@
+.root > :global(:first-child:last-child) {
+    margin: 0;
+  }
+  li {
+    margin-left: 50px;
+  }

src/components/li.tsx

@@ -1,19 +1,12 @@
+import styles from './li.module.scss';
 const ListItem = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
 } & React.LiHTMLAttributes<HTMLLIElement>) => (
-  <li className="root" {...props}>
+  <li className={styles.root} {...props}>
     {children}
-    <style jsx>{`
-      .root > :global(:first-child:last-child) {
-        margin: 0;
-      }
-      li {
-        margin-left: 50px;
-      }
-    `}</style>
   </li>
 );
 

src/components/ol.module.scss

@@ -0,0 +1,3 @@
+.root {
+    margin: 0 0 var(--vRythm) 0;
+  }

src/components/ol.tsx

@@ -1,16 +1,12 @@
+import styles from './ol.module.scss';
 const OrderedList = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
 } & React.OlHTMLAttributes<HTMLOListElement>) => (
-  <ol className="root" {...props}>
+  <ol className={styles.root} {...props}>
     {children}
-    <style jsx>{`
-      .root {
-        margin: 0 0 var(--vRythm) 0;
-      }
-    `}</style>
   </ol>
 );
 

src/components/p.module.scss

@@ -0,0 +1,3 @@
+.root {
+    margin: 0 0 var(--vRythm) 0;
+  }

src/components/p.tsx

@@ -1,16 +1,12 @@
+import styles from './p.module.scss';
 const Paragraph = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
 } & React.HTMLAttributes<HTMLParagraphElement>) => (
-  <p className="root" {...props}>
+  <p className={styles.root} {...props}>
     {children}
-    <style jsx>{`
-      .root {
-        margin: 0 0 var(--vRythm) 0;
-      }
-    `}</style>
   </p>
 );
 

src/components/ul.module.scss

@@ -0,0 +1,3 @@
+.root {
+    margin: 0 0 var(--vRythm) 0;
+  }

src/components/ul.tsx

@@ -1,14 +1,10 @@
+import styles from './ul.module.scss';
 const UnorderedList = ({
   children,
   ...props
 }: { children: React.ReactNode } & React.HTMLAttributes<HTMLUListElement>) => (
-  <ul className="root" {...props}>
+  <ul className={styles.root} {...props}>
     {children}
-    <style jsx>{`
-      .root {
-        margin: 0 0 var(--vRythm) 0;
-      }
-    `}</style>
   </ul>
 );