reorganize scss

packages/app/src/components/ReactMarkdownComponents/Header.module.scss

@@ -0,0 +1,18 @@
+.revision-head :global {
+  a {
+    text-decoration: none;
+  }
+
+  .revision-head-link,
+  .revision-head-edit-button {
+    margin-left: 0.5em;
+    font-size: 0.6em;
+    opacity: 0;
+  }
+}
+
+.revision-head:hover :global {
+  .revision-head-link, .revision-head-edit-button {
+    opacity: 1 !important;
+  }
+}

packages/app/src/components/ReactMarkdownComponents/Header.tsx

@@ -3,6 +3,9 @@ import { Element } from 'react-markdown/lib/rehype-filter';
 import { NextLink } from './NextLink';
 
 
+import styles from './Header.module.scss';
+
+
 type EditLinkProps = {
   line?: number,
 }
@@ -38,7 +41,7 @@ export const Header = (props: HeaderProps): JSX.Element => {
   const CustomTag = `h${level}` as keyof JSX.IntrinsicElements;
 
   return (
-    <CustomTag id={id} className="revision-head">
+    <CustomTag id={id} className={`revision-head ${styles['revision-head']} ${styles.hoge}`}>
       {children}
       <NextLink href={`#${id}`} className="revision-head-link">
         <span className="icon-link"></span>

packages/app/src/styles/_wiki.scss

@@ -143,23 +143,6 @@
     }
   }
 
-  .revision-head {
-    a {
-      text-decoration: none;
-    }
-
-    .revision-head-link,
-    .revision-head-edit-button {
-      margin-left: 0.5em;
-      font-size: 0.6em;
-      opacity: 0;
-    }
-    &:hover .revision-head-link,
-    &:hover .revision-head-edit-button {
-      opacity: 1 !important;
-    }
-  }
-
   $ratio: 0.95;
   &.comment {
     font-size: 14px;