fix(fusuma-loader): replace class with className

hiroppy · Jul 4, 2019 · 48d0f73 · 48d0f73
1 parent f539cbf
commit 48d0f73
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 1 deletion.
diff --git a/packages/mdx-loader/__tests__/__snapshots__/index.js.snap b/packages/mdx-loader/__tests__/__snapshots__/index.js.snap
@@ -407,6 +407,53 @@ export default function MDXContent({
 MDXContent.isMDXComponent = true;"
 `;
 
+exports[`fusuma-loader should convert class to className 1`] = `
+"/* @jsx mdx */
+
+
+        import React from 'react';
+        import { mdx } from '@mdx-js/react';
+        export const slides = [
+          (props) => (
+            <>
+
+    <h1>{\`Class\`}</h1>
+    <div className=\\"test\\">
+  <div className=\\"test2\\">
+    <h2 className=\\"test3\\">hello</h2>
+  </div>
+    </div>
+
+            </>
+          )];
+        export const fusumaProps = [{}];
+const makeShortcode = name => function MDXDefaultShortcode(props) {
+  console.warn(\\"Component \\" + name + \\" was not imported, exported, or provided by MDXProvider as global scope\\")
+  return <div {...props}/>
+};
+
+const layoutProps = {
+  slides
+};
+const MDXLayout = \\"wrapper\\"
+export default function MDXContent({
+  components,
+  ...props
+}) {
+  return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+    <h1>{\`Class\`}</h1>
+    <div className=\\"test\\">
+  <div className=\\"test2\\">
+    <h2 className=\\"test3\\">hello</h2>
+  </div>
+    </div>
+
+    </MDXLayout>;
+}
+
+MDXContent.isMDXComponent = true;"
+`;
+
 exports[`fusuma-loader should convert emoji 1`] = `
 "/* @jsx mdx */
 

diff --git a/packages/mdx-loader/__tests__/index.js b/packages/mdx-loader/__tests__/index.js
@@ -96,6 +96,19 @@ graph TD;
 $$
 a^2 + b^2 = c^2
 $$
+`;
+    expect(await transformToJS(src)).toMatchSnapshot();
+  });
+
+  test('should convert class to className', async () => {
+    const src = `
+# Class
+
+<div class="test">
+  <div class="test2">
+    <h2 class="test3">hello</h2>
+  </div>
+</div>
 `;
     expect(await transformToJS(src)).toMatchSnapshot();
   });

diff --git a/packages/mdx-loader/src/mdxPlugin.js b/packages/mdx-loader/src/mdxPlugin.js
@@ -100,7 +100,9 @@ function mdxPlugin() {
         slide.push(n);
 
         if (n.type === 'jsx') {
-          n.value = n.value.replace(/src="(.+?\.(png|jpg|gif|svg?))"/, 'src={require("$1")}');
+          n.value = n.value
+            .replace(/src="(.+?\.(png|jpg|gif|svg?))"/, 'src={require("$1")}')
+            .replace(/class=/g, 'className=');
         }
       }
     });