chore(Markdown): convert markdown styles to vanilla-ish emotion CSS

Convert markdown component styles from SCSS to emotion

Author: jakemhiller

packages/gamut/src/Markdown/__tests__/Markdown.test.tsx

@@ -13,6 +13,7 @@ jest.mock('react-player', () => ({
   __esModule: true,
   default: () => <iframe title={mockTitle} />,
 }));
+
 jest.mock('@vidstack/react', () => ({
   __esModule: true,
   MediaPlayer: () => <iframe title={mockTitle} />,
@@ -101,9 +102,9 @@ describe('<Markdown />', () => {
   it('Renders custom tables in markdown', () => {
     jest.spyOn(console, 'error').mockImplementation(jest.fn());
     renderView({ text: table });
-    expect(document.querySelectorAll('div.tableWrapper table').length).toEqual(
-      1
-    );
+    expect(
+      document.querySelectorAll('div[class*="TableWrapper"]').length
+    ).toEqual(1);
   });
 
   it('Skips rendering custom tables in markdown when skipProcessing.table is true', () => {
@@ -113,9 +114,9 @@ describe('<Markdown />', () => {
       text: table,
     });
     expect(document.querySelectorAll('table').length).toEqual(1);
-    expect(document.querySelectorAll('div.tableWrapper table').length).toEqual(
-      0
-    );
+    expect(
+      document.querySelectorAll('div[class*="TableWrapper"]').length
+    ).toEqual(0);
   });
 
   it('Renders YouTube iframes using the Video component', () => {
@@ -144,12 +145,19 @@ describe('<Markdown />', () => {
 
   it('Wraps the markdown in a div by default (block)', () => {
     renderView({ text: basicMarkdown });
-    expect(document.querySelectorAll('div.spacing-tight').length).toEqual(1);
+    expect(
+      document.querySelectorAll('div[class*="spacingTight"]').length
+    ).toEqual(1);
   });
 
   it('Wraps the markdown in a span when inline', () => {
     renderView({ text: basicMarkdown, inline: true });
-    expect(document.querySelectorAll('span.spacing-tight').length).toEqual(1);
+    expect(
+      document.querySelectorAll('div[class*="spacingTight"]').length
+    ).toEqual(0);
+    expect(
+      document.querySelectorAll('span[class*="spacingTight"]').length
+    ).toEqual(1);
   });
 
   it('does not crash on a value-less attribute', () => {
@@ -406,9 +414,9 @@ var test = true;
 `,
       });
 
-      expect(document.querySelector('li')?.getAttribute('class')).toBe(
-        'checkbox-parent li'
-      );
+      expect(
+        document.querySelectorAll('li[class*="CheckboxParentLi"]').length
+      ).toEqual(1);
     });
 
     it('sets the default checked state correctly', () => {

packages/gamut/src/Markdown/index.tsx

@@ -1,3 +1,4 @@
+import styled from '@emotion/styled';
 import cx from 'classnames';
 import HtmlToReact from 'html-to-react';
 import { marked } from 'marked';
@@ -25,17 +26,23 @@ import { Table } from './libs/overrides/Table';
 import { MarkdownVideo } from './libs/overrides/Video';
 import { createPreprocessingInstructions } from './libs/preprocessing';
 import { defaultSanitizationConfig } from './libs/sanitizationConfig';
-// eslint-disable-next-line gamut/no-css-standalone
-import styles from './styles/index.module.scss';
+import { markdownStyles } from './styles';
 
 const htmlToReactParser = HtmlToReact.Parser({
   xmlMode: true,
 });
 
-const preprocessingInstructions = createPreprocessingInstructions(styles);
+const preprocessingInstructions = createPreprocessingInstructions();
 
 const isValidNode = () => true;
 
+const MarkdownWrapper = styled.div<{ spacing: 'loose' | 'tight' | 'none' }>`
+  ${({ theme, spacing }) => {
+    const spacingStyleFunction = markdownStyles[spacing];
+    return spacingStyleFunction ? spacingStyleFunction(theme) : '';
+  }}
+`;
+
 export type SkipDefaultOverridesSettings = {
   a?: boolean;
   checkbox?: boolean;
@@ -78,11 +85,6 @@ export class Markdown extends PureComponent<MarkdownProps> {
 
     if (!text) return null;
 
-    const spacingStyles = styles[`spacing-${spacing}`];
-    const classes = cx(spacingStyles, className);
-
-    const Wrapper = inline ? 'span' : 'div';
-
     const overrides = Object.keys(userOverrides).map((tagName) => {
       if (tagName === 'CodeBlock') {
         return createCodeBlockOverride(tagName, userOverrides[tagName]);
@@ -175,12 +177,14 @@ export class Markdown extends PureComponent<MarkdownProps> {
     );
 
     return (
-      <Wrapper
+      <MarkdownWrapper
+        as={inline ? 'span' : 'div'}
         {...omitProps(Object.keys(this.props), this.props)}
-        className={classes}
+        className={cx(className)}
+        spacing={spacing}
       >
         {react}
-      </Wrapper>
+      </MarkdownWrapper>
     );
   }
 }

packages/gamut/src/Markdown/libs/overrides/Table/index.tsx

@@ -1,13 +1,53 @@
+import { pxRem } from '@codecademy/gamut-styles';
+import styled from '@emotion/styled';
 import { HTMLAttributes } from 'react';
 import * as React from 'react';
 
-// eslint-disable-next-line gamut/no-css-standalone
-import styles from './styles.module.scss';
+const TableWrapper = styled.div`
+  border: 1px solid ${({ theme }) => theme.colors['gray-300']};
+  max-height: 500px;
+  overflow: auto;
+  margin-bottom: 1rem;
+
+  table {
+    font-family: ${({ theme }) => theme.fontFamily.monospace};
+    padding: ${pxRem(10)};
+    width: 100%;
+    color: ${({ theme }) => theme.colors.black};
+    position: relative;
+
+    thead {
+      position: relative;
+    }
+
+    tr {
+      height: ${pxRem(30)};
+      font-size: ${pxRem(13)};
+    }
+
+    tr:nth-of-type(odd) {
+      background-color: ${({ theme }) => theme.colors['gray-100']};
+    }
+
+    td,
+    th {
+      padding-left: 0.5rem;
+      text-align: inherit;
+      vertical-align: middle;
+      color: ${({ theme }) => theme.colors.black};
+    }
+
+    tr:nth-of-type(even),
+    th {
+      background-color: ${({ theme }) => theme.colors.white};
+    }
+  }
+`;
 
 export const Table: React.FC<HTMLAttributes<HTMLTableElement>> = (props) => {
   return (
-    <div className={styles.tableWrapper}>
+    <TableWrapper>
       <table {...props} />
-    </div>
+    </TableWrapper>
   );
 };

packages/gamut/src/Markdown/libs/overrides/Table/styles.module.scss

@@ -1,15 +1,19 @@
-import cx from 'classnames';
+import styled from '@emotion/styled';
 import HtmlToReact from 'html-to-react';
 import camelCaseMap from 'html-to-react/lib/camel-case-attribute-names';
 import get from 'lodash/get';
 import * as React from 'react';
 
-// eslint-disable-next-line gamut/no-css-standalone
-import styles from '../../styles/index.module.scss';
 import { getLabel, isCheckboxParent, isInput, isLabelText } from './utils';
 
 const processNodeDefinitions = HtmlToReact.ProcessNodeDefinitions();
 
+const CheckboxParentLi = styled.li`
+  &::before {
+    display: none !important;
+  }
+`;
+
 export interface AttributesMap {
   [key: string]: string | boolean;
 }
@@ -229,10 +233,7 @@ export const createInputOverride = (
       if (!Override.component) return null;
 
       if (isCheckboxParent(node, type)) {
-        const { className, ...rest } = props;
-        const plainLiClass = cx(styles[`checkbox-parent`], className);
-
-        return <li className={plainLiClass} {...rest} />;
+        return <CheckboxParentLi {...props} />;
       }
 
       if (isLabelText(node, type)) return null;

packages/gamut/src/Markdown/libs/overrides/index.tsx

@@ -2,10 +2,6 @@ import cx from 'classnames';
 
 import { HTMLToReactNode } from './overrides';
 
-type StylesObject = {
-  [className: string]: string;
-};
-
 /**
  * Preprocessing Instructions:
  *
@@ -18,14 +14,14 @@ type StylesObject = {
  * This is done instead of styling the elements directly to prevent styles from interfering
  * with component overrides
  */
-export const createPreprocessingInstructions = (styles: StylesObject) => {
+export const createPreprocessingInstructions = () => {
   return [
     {
       shouldPreprocessNode(node: HTMLToReactNode) {
         return Boolean(node.name);
       },
       preprocessNode(node: HTMLToReactNode) {
-        const classname = cx(styles[node.name!], node.attribs?.class);
+        const classname = cx(`g-md-${node.name}`, node.attribs?.class);
 
         const attrs = { ...node.attribs };
         if (classname) attrs.class = classname;