Add styled components plugin for vite (#590)

nwplus · Jul 30, 2024 · 25c394a · 25c394a
1 parent 9608ccb
commit 25c394a
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -50,6 +50,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.2.1",
+    "babel-plugin-styled-components": "^2.1.4",
     "browserslist": "^4.23.0",
     "browserslist-to-esbuild": "^2.1.1",
     "prettier": "^2.1.2",

diff --git a/src/components/Loading.jsx b/src/components/Loading.jsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import { css } from '@emotion/core'
+import styled from 'styled-components'
 import MoonLoader from 'react-spinners/MoonLoader'
 
-const override = css`
+const LoaderWrapper = styled.div`
   display: block;
   position: fixed;
   top: 50%;
@@ -12,6 +12,10 @@ const override = css`
   z-index: 1031;
 `
 
-export default ({ loading, color = '#78FF96', size = 80 }) => (
-  <MoonLoader css={override} color={color} size={size} loading={loading} />
+const Loading = ({ loading, color = '#78FF96', size = 80 }) => (
+  <LoaderWrapper>
+    <MoonLoader color={color} size={size} loading={loading} />
+  </LoaderWrapper>
 )
+
+export default Loading
diff --git a/src/components/Schedule/Schedule.jsx b/src/components/Schedule/Schedule.jsx
@@ -19,7 +19,7 @@ const ScrollableContainer = styled.div`
   left: 0;
   margin-top: 1em;
   border-radius: 10px;
-  background: linear-gradient(to right, #404871 85%, #58618c 100%);
+  background: ${p => p.theme.colors.schedule.background};
   &:before {
     content: '';
     position: fixed;

diff --git a/vite.config.mjs b/vite.config.mjs
@@ -15,6 +15,20 @@ export default defineConfig(() => {
       target: browserslistToEsbuild(),
     },
     root: '.',
-    plugins: [react(), svgr()],
+    plugins: [
+      react({
+        babel: {
+          plugins: [
+            [
+              'babel-plugin-styled-components',
+              {
+                displayName: true,
+              },
+            ],
+          ],
+        },
+      }),
+      svgr(),
+    ],
   }
 })
diff --git a/yarn.lock b/yarn.lock
@@ -1070,7 +1070,7 @@ babel-plugin-macros@^2.0.0:
     cosmiconfig "^6.0.0"
     resolve "^1.12.0"
 
-"babel-plugin-styled-components@>= 1.12.0":
+"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz#9a1f37c7f32ef927b4b008b529feb4a2c82b1092"
   integrity sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==