feat: 支持sass编译

Pivot-Studio · Oct 13, 2023 · 6cde6ef · 6cde6ef
1 parent 3e8fc22
commit 6cde6ef
Show file tree

Hide file tree

Showing 5 changed files with 2,353 additions and 243 deletions.
diff --git a/packages/design/components/MonacoEditor/MultipleEditor.tsx b/packages/design/components/MonacoEditor/MultipleEditor.tsx
@@ -7,7 +7,7 @@ import MonacoEditor from './Editor';
 import { useLocalStorage } from '../hooks';
 
 const FILENAME1 = 'index.tsx';
-const FILENAME2 = 'index.css';
+const FILENAME2 = 'index.scss';
 const _find = (arr: any[], key: string) => {
   for (let index = 0; index < arr.length; index++) {
     const item = arr[index];
@@ -27,12 +27,13 @@ const items = [
   {
     key: FILENAME2,
     label: FILENAME2,
-    language: CodeType.css,
-    value: `{
-      .box {
+    language: CodeType.scss,
+    value: `.box {
         color: red;
-      }
-    }`,
+        &_footer{
+          color:green;
+        }
+      }`,
   },
 ];
 // todo: 1. 编译文件的独立性。现在修改css实际走的是tsx的编译

diff --git a/packages/design/components/MonacoEditor/types.ts b/packages/design/components/MonacoEditor/types.ts
@@ -2,6 +2,7 @@ export enum CodeType {
   ts = 'typescript',
   html = 'html',
   css = 'css',
+  scss = 'scss',
 }
 
 export const enum ThemeType {

diff --git a/packages/design/components/MonacoEditor/workers/compilerWorker.ts b/packages/design/components/MonacoEditor/workers/compilerWorker.ts
@@ -3,8 +3,8 @@ import { transformFromAstSync } from '@babel/core';
 import { parse } from '@babel/parser';
 import ReactPreset from '@babel/preset-react';
 import TSPreset from '@babel/preset-typescript';
-import { getLocalPrivateKey } from '../utils';
 import { TabsItemProps } from 'pivot-design-props';
+import { compileString } from 'sass';
 
 const getInternalModule = (modules: TabsItemProps[], moduleSource: string) => {
   return modules.find((module) => module.key === moduleSource);
@@ -67,6 +67,25 @@ const babelTransform = (
                       new Blob([js], { type: 'application/javascript' })
                     );
                   }
+                  if (_module && String(_module.key).endsWith('.scss')) {
+                    const js = `
+                        let stylesheet = document.getElementById('${
+                          _module.key
+                        }');
+                        if (!stylesheet) {
+                          stylesheet = document.createElement('style')
+                          stylesheet.setAttribute('id', '${_module.key}')
+                          document.head.appendChild(stylesheet)
+                        }
+                        const styles = document.createTextNode(\`${
+                          compileString(_module.value).css
+                        }\`)
+                        stylesheet.innerHTML = ''
+                        stylesheet.appendChild(styles)`;
+                    path.node.source.value = URL.createObjectURL(
+                      new Blob([js], { type: 'application/javascript' })
+                    );
+                  }
                 }
 
                 //   const _module = getInternalModule(moduleSource.slice(2));

diff --git a/packages/design/package.json b/packages/design/package.json
@@ -25,7 +25,7 @@
     "pivot-design-props": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.54.9",
+    "sass": "^1.69.3",
     "sass-loader": "^13.0.2",
     "style-loader": "^3.3.1",
     "typescript": "^4.8.3",