Merge pull request #157 from ChtiJS/fix/articleAndContent

fix(css modules): switching to css modules on contentBlock and article

src/components/article.module.scss

@@ -0,0 +1,6 @@
+  .root {
+    padding: var(--vRythm) 0;
+  }
+  .root:not(:last-child) {
+    border-bottom: var(--border) solid var(--dark);
+  } 

src/components/article.tsx

@@ -1,19 +1,12 @@
+import styles from './article.module.scss';
 const Article = ({
   children,
   ...props
 }: {
   children: React.ReactNode;
 } & React.HTMLAttributes<HTMLElement>) => (
-  <article className="root" {...props}>
+  <article className={styles.root} {...props}>
     {children}
-    <style jsx>{`
-      .root {
-        padding: var(--vRythm) 0;
-      }
-      .root:not(:last-child) {
-        border-bottom: var(--border) solid var(--dark);
-      }
-    `}</style>
   </article>
 );
 

src/components/contentBlock.module.scss

@@ -0,0 +1,18 @@
+@import "../layouts/variables.scss";  
+
+.root {
+    background-color: var(--light);
+    padding: calc(var(--vRythm) * 2) var(--gutter);
+}
+
+@media screen and (min-width: $CSS_BREAKPOINT_START_L) {
+    .root {
+        padding: calc(var(--vRythm) * 2) calc(var(--gutter) * 2);
+    }
+}
+
+@media screen and (min-width: $CSS_BREAKPOINT_START_XL) {
+    .root {
+        padding: calc(var(--vRythm) * 3) calc(var(--gutter) * 8);
+    }
+} 

src/components/contentBlock.tsx

@@ -1,7 +1,4 @@
-import {
-  CSS_BREAKPOINT_START_L,
-  CSS_BREAKPOINT_START_XL,
-} from '../utils/constants';
+import styles from './contentBlock.module.scss';
 
 export default function ContentBlock({
   children,
@@ -11,24 +8,8 @@ export default function ContentBlock({
   className?: string;
 }): JSX.Element {
   return (
-    <section className={`root${className ? ' ' + className : ''}`}>
+    <section className={`${styles.root} root${className ? ' ' + className : ''}`}>
       {children}
-      <style jsx>{`
-        .root {
-          background-color: var(--light);
-          padding: calc(var(--vRythm) * 2) var(--gutter);
-        }
-        @media screen and (min-width: ${CSS_BREAKPOINT_START_L}) {
-          .root {
-            padding: calc(var(--vRythm) * 2) calc(var(--gutter) * 2);
-          }
-        }
-        @media screen and (min-width: ${CSS_BREAKPOINT_START_XL}) {
-          .root {
-            padding: calc(var(--vRythm) * 3) calc(var(--gutter) * 8);
-          }
-        }
-      `}</style>
     </section>
   );
 }

src/layouts/main.module.scss

@@ -5,7 +5,7 @@
   display: grid;
   grid-template-columns: var(--block) 1fr;
   grid-template-rows:
-    calc(var(--vRythm) * 6) auto
+    calc(var(--vRythm) * 8) auto
     auto minmax(calc(var(--vRythm) * 2), auto);
   background: var(--tertiary);
 }