Enable Styled Components

morewings · May 17, 2024 · 63422c3 · 63422c3
1 parent cd44270
commit 63422c3
Show file tree

Hide file tree

Showing 27 changed files with 342 additions and 183 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -114,6 +114,7 @@ module.exports = {
                 '**/*.js',
                 '**/*.cjs',
                 '**/setupTests.ts',
+                '**/testUtils.tsx'
             ],
             rules: {
                 'import/no-extraneous-dependencies': [

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,7 +1,7 @@
 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;
@@ -10,9 +10,13 @@ type Props = {
 export default function RootLayout({children}: Props) {
     return (
         <StoreProvider>
-            <html lang="en" suppressHydrationWarning>
-                <body>{children}</body>
-            </html>
+            <ThemeProvider>
+                <html lang="en" suppressHydrationWarning>
+                    <body>
+                        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+                    </body>
+                </html>
+            </ThemeProvider>
         </StoreProvider>
     );
 }
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
@@ -9,8 +9,8 @@
         "start": "next start",
         "lint:code": "eslint src/ --ext .js,.jsx,.ts,.tsx",
         "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 install",
         "test": "jest",
@@ -27,6 +27,7 @@
         "react-dom": "18.3.1",
         "react-redux": "9.1.2",
         "redux": "5.0.1",
+        "styled-components": "^6.1.11",
         "uniqid": "5.4.0"
     },
     "devDependencies": {
@@ -59,13 +60,12 @@
         "npm-run-all2": "6.1.2",
         "postcss": "8.4.38",
         "postcss-preset-env": "9.5.13",
+        "postcss-styled-syntax": "0.6.4",
         "prettier": "3.2.5",
         "redux-mock-store": "1.5.4",
         "stylelint": "16.5.0",
-        "stylelint-config-prettier": "9.0.5",
         "stylelint-config-standard": "36.0.0",
         "stylelint-order": "6.0.4",
-        "stylelint-prettier": "5.0.0",
         "typescript": "5.4.5"
     }
 }