fix: css style lose

F-star · Jan 21, 2024 · 5f98362 · 5f98362
1 parent 23d7fb2
commit 5f98362
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/packages/core/src/cursor_manager/cursor.css b/packages/core/src/cursor_manager/cursor.css
diff --git a/packages/suika/src/index.tsx b/packages/suika/src/index.tsx
@@ -2,6 +2,9 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+// vite does not automatically import styles when referencing other packages, you need to manually import them
+import '@suika/core/dist/style.css';
+import '@suika/components/dist/style.css';
 
 // vite does not automatically import styles when referencing other packages, you need to manually import them
 // TODO: FIXME: find a better way to do this

diff --git a/scripts/dev.js b/scripts/dev.js
@@ -2,6 +2,7 @@ const { context } = require('esbuild');
 const args = require('minimist')(process.argv.slice(2));
 const path = require('path');
 const { sassPlugin } = require('esbuild-sass-plugin');
+const fs = require('fs');
 
 const setup = async () => {
   const target = args._[0];
@@ -28,6 +29,7 @@ const setup = async () => {
     ],
     outfile,
     bundle: true,
+    metafile: true,
     external: Object.keys({
       ...pkgJson.dependencies,
       ...pkgJson.peerDependencies,
@@ -38,16 +40,35 @@ const setup = async () => {
     platform: 'browser',
     plugins: [
       sassPlugin({
-        type: 'style',
+        type: 'css',
       }),
       {
         name: 'watch-build',
         setup(build) {
           build.onEnd((result) => {
             if (result.errors.length) {
               console.error('build failed:', result.errors);
-            } else {
-              console.log('watch build succeeded:', relativeOutputFile);
+              return;
+            }
+            console.log('watch build succeeded:', relativeOutputFile);
+
+            // rename output CSS file
+            if (result.metafile) {
+              const outputs = result.metafile.outputs;
+              Object.keys(outputs).forEach((output) => {
+                const oldPath = path.resolve(output);
+                let newPath;
+                if (output.endsWith('.css')) {
+                  // <target>.es.css ---> style.css
+                  newPath = oldPath.replace(
+                    `dist/${target}.es.css`,
+                    'dist/style.css',
+                  );
+                }
+                if (newPath && oldPath !== newPath) {
+                  fs.renameSync(oldPath, newPath);
+                }
+              });
             }
           });
         },