Enable Styled Components

morewings · Oct 5, 2024 · 45c65fa · 45c65fa
1 parent bff5cc2
commit 45c65fa
Show file tree

Hide file tree

Showing 31 changed files with 410 additions and 234 deletions.
diff --git a/additional.d.ts b/additional.d.ts
@@ -1 +1,11 @@
+import 'styled-components';
+import type {theme} from '@/src/style';
+
 declare module '*.module.css';
+
+type CustomTheme = typeof theme;
+
+declare module 'styled-components' {
+    /* eslint-disable-next-line @typescript-eslint/consistent-type-definitions */
+    export interface DefaultTheme extends CustomTheme {}
+}
diff --git a/app/index.css b/app/index.css
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,18 +1,22 @@
 import type {ReactNode} from 'react';
 
 import {StoreProvider} from '@/src/state/StoreProvider';
-import './index.css';
+import {StyledComponentsRegistry, ThemeProvider} from '@/src/style';
 
 type Props = {
     readonly children: ReactNode;
 };
 
 export default function RootLayout({children}: Props) {
     return (
-        <html lang="en" suppressHydrationWarning>
-            <body>
-                <StoreProvider>{children}</StoreProvider>
-            </body>
-        </html>
+        <StoreProvider>
+            <ThemeProvider>
+                <html lang="en" suppressHydrationWarning>
+                    <body>
+                        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+                    </body>
+                </html>
+            </ThemeProvider>
+        </StoreProvider>
     );
 }
diff --git a/generate-react-cli.json b/generate-react-cli.json
@@ -17,7 +17,7 @@
             "withHookTest": false,
             "customTemplates": {
                 "component": "templates/Component/TemplateName.tsx",
-                "style": "templates/Component/TemplateName.module.css",
+                "style": "templates/Component/TemplateName.style.ts",
                 "index": "templates/Component/index.ts",
                 "test": "templates/Component/TemplateName.spec.tsx"
             }
@@ -34,7 +34,7 @@
             "withHookTest": false,
             "customTemplates": {
                 "component": "templates/Loading/TemplateName.tsx",
-                "style": "templates/Loading/TemplateName.module.css",
+                "style": "templates/Loading/TemplateName.style.ts",
                 "index": "templates/Loading/index.ts",
                 "test": "templates/Loading/TemplateName.spec.tsx"
             }

diff --git a/next.config.js b/next.config.js
@@ -9,7 +9,10 @@ module.exports = withBundleAnalyzer({
     reactStrictMode: true,
     swcMinify: true,
     distDir: 'build',
-    output: process.env.PAGES_BUILD === 'true' ? 'export' : undefined,
     cleanDistDir: true,
+    output: process.env.PAGES_BUILD === 'true' ? 'export' : undefined,
     basePath: process.env.PAGES_BUILD === 'true' ? '/ts-redux-next' : undefined,
+    compiler: {
+        styledComponents: true,
+    },
 });
diff --git a/package.json b/package.json
@@ -18,8 +18,8 @@
         "start": "next start",
         "lint:code": "eslint src/** --report-unused-disable-directives",
         "fix:code": "run-s 'lint:code --fix'",
-        "lint:style": "stylelint 'src/**/*.css'",
-        "fix:style": "stylelint 'src/**/*.css' --fix",
+        "lint:style": "stylelint 'src/**/*.{ts,tsx}'",
+        "fix:style": "stylelint 'src/**/*.{ts,tsx}' --fix",
         "lint:tsc": "tsc --pretty --noEmit",
         "prepare": "is-ci || husky",
         "test": "jest",
@@ -36,6 +36,7 @@
         "react-dom": "18.3.1",
         "react-redux": "9.1.2",
         "redux": "5.0.1",
+        "styled-components": "6.1.13",
         "uniqid": "5.4.0"
     },
     "devDependencies": {
@@ -70,13 +71,12 @@
         "npm-run-all2": "6.2.3",
         "postcss": "8.4.47",
         "postcss-preset-env": "10.0.6",
+        "postcss-styled-syntax": "0.6.4",
         "prettier": "3.3.3",
         "redux-mock-store": "1.5.4",
         "stylelint": "16.9.0",
-        "stylelint-config-prettier": "9.0.5",
         "stylelint-config-standard": "36.0.1",
         "stylelint-order": "6.0.4",
-        "stylelint-prettier": "5.0.2",
         "typescript": "5.6.2",
         "typescript-eslint": "8.8.0"
     }