fix: style problem after using styled-components

package-lock.json

@@ -18859,6 +18859,12 @@
       "integrity": "sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==",
       "dev": true
     },
+    "typescript-plugin-styled-components": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/typescript-plugin-styled-components/-/typescript-plugin-styled-components-1.4.4.tgz",
+      "integrity": "sha512-w5S5lSpzRFM+61KNNpGtlF46DuTJTyzfWM4g6ic9m189ILEoU3sgoTNHNS2MxQhXsGtQZwAlINKG+Dwy0euwUg==",
+      "dev": true
+    },
     "typesync": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/typesync/-/typesync-0.8.0.tgz",

package.json

@@ -201,6 +201,7 @@
     "ts-migrate": "^0.1.15",
     "typeface-roboto": "1.1.13",
     "typescript": "4.2.3",
+    "typescript-plugin-styled-components": "^1.4.4",
     "typesync": "0.8.0"
   },
   "private": false

src/pages/Main/SortableWorkspaceSelector.tsx

@@ -32,6 +32,7 @@ export function SortableWorkspaceSelector({ index, workspace }: ISortableItemPro
         transparentBackground={transparentBackground}
         order={index}
         hibernated={hibernated}
+        sidebarShortcutHints
         onClick={async () => {
           if (isSubWiki) {
             await window.service.wiki.requestOpenTiddlerInWiki(tagName);

src/pages/Main/WorkspaceSelector.tsx

@@ -11,7 +11,7 @@ Promise.config({ cancellation: true });
 // TODO: &:hover { background: theme.palette.action.hover;
 const Root = styled.div<{ hibernated?: boolean; active?: boolean }>`
   height: fit-content;
-  width: 68;
+  width: 68px;
   padding: 10px 0;
   display: flex;
   align-items: center;
@@ -46,9 +46,9 @@ const RootActive = styled.div``;
 // TODO: color: theme.palette.getContrastText(theme.palette.type === 'dark' ? theme.palette.common.black : theme.palette.common.white),
 // TODO: border: theme.palette.type === 'dark' ? 'none' : 1px solid rgba(0, 0, 0, 0.12),
 const Avatar = styled.div<{ large?: boolean; transparent?: boolean; addAvatar?: boolean }>`
-  height: 36;
-  width: 36;
-  border-radius: 4;
+  height: 36px;
+  width: 36px;
+  border-radius: 4px;
   line-height: 36px;
   text-align: center;
   font-weight: 500;
@@ -57,8 +57,8 @@ const Avatar = styled.div<{ large?: boolean; transparent?: boolean; addAvatar?:
   ${({ large }) =>
     large &&
     css`
-      height: 44;
-      width: 44;
+      height: 44px;
+      width: 44px;
       line-height: 44px;
     `}
   ${({ transparent }) =>
@@ -71,13 +71,13 @@ const Avatar = styled.div<{ large?: boolean; transparent?: boolean; addAvatar?:
 `;
 
 const AvatarPicture = styled.img<{ large?: boolean }>`
-  height: 36 - 2;
-  width: 36 - 2;
+  height: calc(36px - 2px);
+  width: calc(36px - 2px);
   ${({ large }) =>
     large &&
     css`
-      height: 44;
-      width: 44;
+      height: 44px;
+      width: 44px;
     `}
 `;
 
@@ -86,7 +86,7 @@ const AvatarPicture = styled.img<{ large?: boolean }>`
 const AddAvatar = styled.div``;
 // TODO:  color: theme.palette.text.primary;
 const ShortcutText = styled.p`
-  margin-top: 2;
+  margin-top: 2px;
   margin-bottom: 0;
   padding: 0;
   font-size: 12px;

src/pages/Main/index.tsx

@@ -48,9 +48,8 @@ const Root = styled.div`
 
 const sideBarStyle = css`
   height: 100%;
-  width: 68;
-  border-right: 1px solid rgba(0, 0, 0, 0.2);
-  background-color: #fffff0;
+  width: 68px;
+  background-color: white;
   -webkit-app-region: drag;
   user-select: none;
   display: flex;
@@ -70,9 +69,14 @@ const SidebarWithStyle = styled(SimpleBar)`
 
 const SidebarTop = styled.div<{ fullscreen?: boolean }>`
   flex: 1;
-  /** // TODO: darwin theme  */
-  /* padding-top-window-remote-get-platform-darwin-theme-spacing-3: 0; */
-  ${({ fullscreen }) => fullscreen === true && `padding-top: 0;`}
+  ${({ fullscreen }) =>
+    fullscreen === true
+      ? css`
+          padding-top: 0;
+        `
+      : css`
+          padding-top: 30px;
+        `}
 `;
 
 const IconButton = styled(IconButtonRaw)``;

webpack.rules.js

@@ -1,4 +1,5 @@
 const tsImportPluginFactory = require('ts-import-plugin');
+const styledComponentsTransformerFactory = require('typescript-plugin-styled-components').default;
 
 module.exports = [
   // Add support for native node modules
@@ -18,6 +19,7 @@ module.exports = [
   //   },
   // },
   {
+    // used to load css from npm package, we use styled-components
     test: /\.css$/,
     use: [{ loader: 'style-loader' }, { loader: 'css-loader' }],
   },
@@ -30,6 +32,7 @@ module.exports = [
         transpileOnly: true,
         getCustomTransformers: () => ({
           before: [
+            styledComponentsTransformerFactory(),
             // lodash
             tsImportPluginFactory({
               style: false,