feat: remove ssr styled

Author: keepview

packages/runtime/plugin-runtime/package.json

@@ -64,11 +64,6 @@
       "jsnext:source": "./src/exports/head.ts",
       "default": "./dist/esm/exports/head.js"
     },
-    "./styled": {
-      "types": "./dist/types/exports/styled.d.ts",
-      "jsnext:source": "./src/exports/styled.ts",
-      "default": "./dist/esm/exports/styled.js"
-    },
     "./server": {
       "types": "./dist/types/exports/server.d.ts",
       "jsnext:source": "./src/exports/server.ts",
@@ -167,9 +162,6 @@
       "head": [
         "./dist/types/exports/head.d.ts"
       ],
-      "styled": [
-        "./dist/types/exports/styled.d.ts"
-      ],
       "server": [
         "./dist/types/exports/server.d.ts"
       ],
@@ -231,16 +223,14 @@
     "@swc/helpers": "^0.5.17",
     "@types/loadable__component": "^5.13.10",
     "@types/react-helmet": "^6.1.11",
-    "@types/styled-components": "^5.1.34",
     "cookie": "0.7.2",
     "es-module-lexer": "^1.1.0",
     "esbuild": "0.25.5",
     "invariant": "^2.2.4",
     "isbot": "3.7.1",
     "react-helmet": "^6.1.0",
     "react-is": "^18",
-    "react-side-effect": "^2.1.2",
-    "styled-components": "^5.3.1"
+    "react-side-effect": "^2.1.2"
   },
   "peerDependencies": {
     "react": ">=17",

packages/runtime/plugin-runtime/src/core/server/stream/createReadableStream.ts

@@ -1,7 +1,6 @@
-import { PassThrough, Transform } from 'stream';
+import { Transform } from 'stream';
 import { createReadableStreamFromReadable } from '@modern-js/runtime-utils/node';
 import checkIsBot from 'isbot';
-import { ServerStyleSheet } from 'styled-components';
 import { ESCAPED_SHELL_STREAM_END_MARK } from '../../../common';
 import { RenderLevel } from '../../constants';
 import {
@@ -26,19 +25,13 @@ export const createReadableStreamFromElement: CreateReadableStreamFromElement =
     const isbot = checkIsBot(request.headers.get('user-agent'));
     const onReady = isbot || forceStream2String ? 'onAllReady' : 'onShellReady';
 
-    const sheet = new ServerStyleSheet();
-
     const chunkVec: string[] = [];
 
-    const root = sheet.collectStyles(rootElement);
-
     return new Promise(resolve => {
-      const { pipe: reactStreamingPipe } = renderToPipeableStream(root, {
+      const { pipe: reactStreamingPipe } = renderToPipeableStream(rootElement, {
         nonce: config.nonce,
         [onReady]() {
-          const styledComponentsStyleTags = forceStream2String
-            ? sheet.getStyleTags()
-            : '';
+          const styledComponentsStyleTags = '';
           options[onReady]?.();
 
           getTemplates(htmlTemplate, {
@@ -90,16 +83,7 @@ export const createReadableStreamFromElement: CreateReadableStreamFromElement =
             const stream = createReadableStreamFromReadable(body);
             resolve(stream);
 
-            // Transform the react pipe to a readable stream
-            // Actually it's for type check, we even can execute `sheet.interleaveWithNodeStream({ pipe })`
-            // Source code https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/models/ServerStyleSheet.tsx#L80
-            const passThrough = new PassThrough();
-            const styledStream = sheet.interleaveWithNodeStream(passThrough);
-            reactStreamingPipe(passThrough);
-
-            // pipe the styled stream to the body stream
-            // now only use styled stream, if there is multiple stream, we can abstract it to a function
-            styledStream.pipe(body);
+            reactStreamingPipe(body);
           });
         },
 

packages/runtime/plugin-runtime/src/core/server/string/index.ts

@@ -18,7 +18,6 @@ import { getSSRConfigByEntry, safeReplace } from '../utils';
 import { LoadableCollector } from './loadable';
 import { prefetch } from './prefetch';
 import { SSRDataCollector } from './ssrData';
-import { StyledCollector } from './styledComponent';
 import type { ChunkSet, Collector } from './types';
 
 export const renderString: RenderString = async (
@@ -64,7 +63,6 @@ export const renderString: RenderString = async (
   }
 
   const collectors = [
-    new StyledCollector(chunkSet),
     new LoadableCollector({
       stats: loadableStats,
       nonce: config.nonce,