chore(deps): replace styled-components to goober.

uiwjs · Jul 5, 2023 · 7a419c9 · 7a419c9
1 parent 7852564
commit 7a419c9
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -41,7 +41,7 @@
     "react-test-renderer": "^18.2.0",
     "tsbb": "^4.1.5",
     "jest-watch-typeahead": "^2.2.2",
-    "jest-environment-jsdom": "~29.5.0",
+    "jest-environment-jsdom": "^29.6.0",
     "jest-environment-node": "^29.5.0"
   }
 }
diff --git a/www/package.json b/www/package.json
@@ -13,7 +13,6 @@
     "@kkt/scope-plugin-options": "^7.4.9",
     "@types/react": "^18.0.34",
     "@types/react-dom": "^18.0.11",
-    "@types/styled-components": "^5.1.25",
     "kkt": "^7.4.9",
     "markdown-react-code-preview-loader": "^2.1.5",
     "source-map-explorer": "^2.5.3"
@@ -28,7 +27,7 @@
     "react-code-preview-layout": "^3.0.0",
     "react-dom": "~18.2.0",
     "react-keywords": "0.0.5",
-    "styled-components": "^5.3.9"
+    "goober": "^2.1.13"
   },
   "eslintConfig": {
     "extends": [

diff --git a/www/src/App.tsx b/www/src/App.tsx
@@ -1,18 +1,17 @@
-import React from 'react';
 import GithubCorner from '@uiw/react-github-corners';
 import '@wcj/dark-mode';
 import Keywords from 'react-keywords';
-import styled from 'styled-components';
+import { styled } from 'goober';
 import pkg from '../package.json';
 import Markdown from './Markdown';
 
-const Warpper = styled.div``;
-const Content = styled.div`
+const Warpper = styled('div')``;
+const Content = styled('div')`
   max-width: 860px;
   margin: 0 auto;
 `;
 
-const Title = styled.h1`
+const Title = styled('h1')`
   font-size: 32px;
   font-weight: bold;
   text-align: center;

diff --git a/www/src/Markdown.tsx b/www/src/Markdown.tsx
@@ -33,7 +33,7 @@ const CodePreview: CodeComponent | ReactMarkdownNames = ({ inline, node, ...prop
     const param = getURLParameters(meta);
     return (
       <CodeLayout disableCheckered style={{ marginBottom: 18 }}>
-        <Preview>
+        <Preview style={{ whiteSpace: 'pre-wrap' }}>
           <Child />
         </Preview>
         <Toolbar text={code}>{param.title || 'Example'}</Toolbar>

diff --git a/www/src/index.tsx b/www/src/index.tsx
@@ -1,6 +1,10 @@
+import { createElement } from 'react';
 import { createRoot } from 'react-dom/client';
+import { setup } from 'goober';
 import App from './App';
 
+setup(createElement);
+
 const container = document.getElementById('root');
 const root = createRoot(container!);
 root.render(<App />);