feat(mdx-loader): add classes to block-start

Author: hiroppy

packages/mdx-loader/__tests__/__snapshots__/index.js.snap

@@ -191,8 +191,11 @@ export const slides = [props => <>
     <div>
     <p>{\`out\`}</p>
     <div className=\\"foo\\">
-    <p>{\`in
-in\`}</p>
+    <p>{\`in\`}</p>
+    <div className=\\"foo bar baz\\">
+    <p>{\`core\`}</p>
+    </div>
+    <p>{\`in\`}</p>
     </div>
     <p>{\`out\`}</p>
     </div>
@@ -217,8 +220,15 @@ export default function MDXContent({
     {
       /* block-start: foo */
     }
-    <p>{\`in
-in\`}</p>
+    <p>{\`in\`}</p>
+    {
+      /* block-start:foo,bar, baz */
+    }
+    <p>{\`core\`}</p>
+    {
+      /* block-end */
+    }
+    <p>{\`in\`}</p>
     {
       /* block-end */
     }

packages/mdx-loader/__tests__/index.js

@@ -159,6 +159,9 @@ second
 out
 <!-- block-start: foo -->
 in
+<!-- block-start:foo,bar, baz -->
+core
+<!-- block-end -->
 in
 <!-- block-end -->
 out

packages/mdx-loader/src/mdxPlugin.js

@@ -160,7 +160,8 @@ function mdxPlugin() {
 
       for (const pos of matches) {
         const [, className] = pos;
-        const div = className ? `<div className="${className.trim()}">` : '<div>';
+        const formattedClassName = commentParser(`0:${className}`).valueStr.replace(/,/g, ' ');
+        const div = className ? `<div className="${formattedClassName}">` : '<div>';
 
         mdxJSX = mdxJSX.replace(/{\s.+\/\* block-start:?(.*?) \*\/\s.+}/m, div);
       }