🪟 🔧 Convert Markdown.styles.scss to module (#15646)

* Convert Markdown.styles.scss to module

* Split scss  modules for better linting

Author: Tim Roes

airbyte-webapp/src/components/Markdown/Markdown.styles.scss renamed to airbyte-webapp/src/components/Markdown/Markdown.module.scss

@@ -1,6 +1,6 @@
 @use "../../scss/colors";
 
-.airbyte-markdown {
+.markdown {
   * {
     color: colors.$dark-blue;
     line-height: 24px;
@@ -81,51 +81,4 @@
   img {
     max-width: 100%;
   }
-
-  .admonition {
-    border-radius: 8px;
-    border-left: 8px solid colors.$grey-300;
-    padding: 1px 16px 1px 48px;
-    margin: -1px 0 15px;
-    background-color: colors.$grey-50;
-    position: relative;
-
-    &::before {
-      content: "ℹ️";
-      position: absolute;
-      top: 16px;
-      left: 16px;
-    }
-
-    &--caution,
-    &--warning {
-      background-color: colors.$yellow-50;
-      border-left-color: colors.$yellow-300;
-      &::before {
-        content: "⚠️";
-      }
-    }
-
-    &--danger {
-      background-color: colors.$red-50;
-      border-left-color: colors.$red-300;
-      &::before {
-        content: "⚠️";
-      }
-    }
-
-    &--note::before {
-      content: "📝";
-    }
-
-    &--tip,
-    &--info {
-      background-color: colors.$blue-50;
-      border-left-color: colors.$blue-300;
-    }
-
-    &--tip::before {
-      content: "💡";
-    }
-  }
 }

airbyte-webapp/src/components/Markdown/Markdown.tsx

@@ -7,10 +7,9 @@ import remarkDirective from "remark-directive";
 import remarkFrontmatter from "remark-frontmatter";
 import remarkGfm from "remark-gfm";
 
+import styles from "./Markdown.module.scss";
 import { remarkAdmonitionsPlugin } from "./remarkAdmonitionsPlugin";
 
-import "./Markdown.styles.scss";
-
 interface MarkdownProps {
   content?: string;
   className?: string;
@@ -22,7 +21,7 @@ export const Markdown: React.VFC<MarkdownProps> = ({ content, className, rehypeP
     <ReactMarkdown
       // Open everything except fragment only links in a new tab
       linkTarget={(href) => (href.startsWith("#") ? undefined : "_blank")}
-      className={classNames("airbyte-markdown", className)}
+      className={classNames(styles.markdown, className)}
       skipHtml
       // @ts-expect-error remarkFrontmatter currently has type conflicts due to duplicate vfile dependencies
       // This is not actually causing any issues, but requires to disable TS on this for now.

airbyte-webapp/src/components/Markdown/admonitions.module.scss

@@ -0,0 +1,48 @@
+@use "../../scss/colors";
+
+.admonition {
+  border-radius: 8px;
+  border-left: 8px solid colors.$grey-300;
+  padding: 1px 16px 1px 48px;
+  margin: -1px 0 15px;
+  background-color: colors.$grey-50;
+  position: relative;
+
+  &::before {
+    content: "ℹ️";
+    position: absolute;
+    top: 16px;
+    left: 16px;
+  }
+
+  &--caution,
+  &--warning {
+    background-color: colors.$yellow-50;
+    border-left-color: colors.$yellow-300;
+    &::before {
+      content: "⚠️";
+    }
+  }
+
+  &--danger {
+    background-color: colors.$red-50;
+    border-left-color: colors.$red-300;
+    &::before {
+      content: "⚠️";
+    }
+  }
+
+  &--note::before {
+    content: "📝";
+  }
+
+  &--tip,
+  &--info {
+    background-color: colors.$blue-50;
+    border-left-color: colors.$blue-300;
+  }
+
+  &--tip::before {
+    content: "💡";
+  }
+}

airbyte-webapp/src/components/Markdown/remarkAdmonitionsPlugin.ts

@@ -3,6 +3,11 @@ import { Plugin } from "unified";
 import { Node } from "unist";
 import { visit } from "unist-util-visit";
 
+// Since we're dynamically accessing the admonition--{node.name} classes, the linter
+// can't determine that those are used, thus we need to ignore unused classes here.
+// eslint-disable-next-line css-modules/no-unused-class
+import styles from "./admonitions.module.scss";
+
 const SUPPORTED_ADMONITION_NAMES: Readonly<string[]> = ["note", "tip", "info", "caution", "warning", "danger"];
 const SUPPORTED_NODE_TYPES: Readonly<string[]> = ["textDirective", "leafDirective", "containerDirective"];
 
@@ -13,7 +18,7 @@ export const remarkAdmonitionsPlugin: Plugin<[], Root> = () => (tree) => {
     }
 
     const data = node.data ?? (node.data = {});
-    const className = `admonition admonition--${node.name}`;
+    const className = `${styles.admonition} ${styles[`admonition--${node.name}`]}`;
 
     data.hName = "div";
     data.hProperties = { class: className };