Refactor(css): Change all less to module mode

src/components/Playground/Output/Transform/index.module.less

@@ -0,0 +1,13 @@
+.root {
+  position: relative;
+
+  .errorMessage {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    color: white;
+    background-color: #FF4D4FAA;
+    padding: 5px 10px;
+    font-size: 1.2em;
+  }
+}

src/components/Playground/Output/Transform/index.tsx

@@ -1,6 +1,6 @@
 import MonacoEditor from '@monaco-editor/react'
 import { Loader } from 'esbuild-wasm'
-import '@/components/Playground/Output/Transform/transform.less'
+import styles from '@/components/Playground/Output/Transform/index.module.less'
 import { IFile, ITheme } from '@/components/Playground/shared'
 import { cssToJsFromFile, jsonToJsFromFile } from '@/components/Playground/files'
 import Compiler from '@/components/Playground/compiler'
@@ -57,14 +57,14 @@ const Transform = ({ file, theme }: OutputProps) => {
     }, [file, Compiler])
 
     return (
-        <div data-component={'playground-transform'}>
+        <div className={styles.root}>
             <MonacoEditor
                 theme={theme}
                 language={'javascript'}
                 value={compiledCode}
                 options={{ ...MonacoEditorConfig, readOnly: true }}
             />
-            {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
+            {errorMsg && <div className={styles.errorMessage}>{errorMsg}</div>}
         </div>
     )
 }

src/components/Playground/Output/Transform/transform.less

@@ -1,3 +0,0 @@
-[data-component=playground-transform] {
-  position: relative;
-}