use babel macros

package.json

@@ -47,6 +47,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "babel-plugin-styled-components": "^2.1.4",
     "prettier": "2.8.8"
   }
 }

src/App.tsx

@@ -4,7 +4,7 @@ import { Player } from './Types/Player';
 import Play from './Components/Views/Play';
 import StartMenu from './Components/Views/StartMenu/StartMenu';
 import { InitialSettings } from './Data/getInitialPlayers';
-import styled, { createGlobalStyle } from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components/macro';
 import { ThemeProvider } from '@mui/material';
 import { theme } from './Data/theme';
 

src/Components/Buttons/CommanderDamage.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled, { css } from 'styled-components/macro';
 import { Player, Rotation } from '../../Types/Player';
 import { useRef, useState } from 'react';
 import { OutlinedText } from '../Text/OutlinedText';

src/Components/Buttons/ExtraCounter.tsx

@@ -1,5 +1,5 @@
 import { ReactNode, useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css } from 'styled-components/macro';
 import { CounterType, Rotation } from '../../Types/Player';
 import { OutlinedText } from '../Text/OutlinedText';
 

src/Components/Buttons/LifeCounterButton.tsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react';
-import styled, { css } from 'styled-components';
+import styled, { css } from 'styled-components/macro';
 import { Rotation } from '../../Types/Player';
 
 export const StyledLifeCounterButton = styled.button`

src/Components/Buttons/SettingsButton.tsx

@@ -1,4 +1,4 @@
-import styled, { css } from 'styled-components';
+import styled, { css } from 'styled-components/macro';
 import SettingsIcon from '../../Icons/SettingsIcon';
 import { Rotation } from '../../Types/Player';
 

src/Components/Counters/CommanderDamageBar.tsx

@@ -1,5 +1,5 @@
 import { Player, Rotation } from '../../Types/Player';
-import styled, { css } from 'styled-components';
+import styled, { css } from 'styled-components/macro';
 import { CommanderDamage } from '../Buttons/CommanderDamage';
 
 const CommanderDamageGrid = styled.div<{ rotation: number }>`

src/Components/Counters/Counters.tsx

@@ -1,6 +1,6 @@
 import { Player } from '../../Types/Player';
 import LifeCounter from '../LifeCounter/LifeCounter';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 
 export const CountersWrapper = styled.div`
   width: 100%;

src/Components/Counters/ExtraCountersBar.tsx

@@ -5,7 +5,7 @@ import EnergyIcon from '../../Icons/EnergyIcon';
 import ExperienceIcon from '../../Icons/ExperienceIcon';
 import PoisonIcon from '../../Icons/PoisonIcon';
 import PartnerTaxIcon from '../../Icons/PartnerTaxIcon';
-import styled, { css } from 'styled-components';
+import styled, { css } from 'styled-components/macro';
 import { Rotation } from '../../Types/Player';
 
 const ExtraCountersGrid = styled.div<{ rotation: number }>`

src/Components/LifeCounter/LifeCounter.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import styled, { css, keyframes } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components/macro';
 import { Player, Rotation } from '../../Types/Player';
 import LifeCounterButton from '../Buttons/LifeCounterButton';
 import SettingsButton from '../Buttons/SettingsButton';

src/Components/PlayerMenu/PlayerMenu.tsx

@@ -1,6 +1,6 @@
 import { Player } from '../../Types/Player';
 import Settings from './Settings';
-import styled, { css } from 'styled-components';
+import styled, { css } from 'styled-components/macro';
 import { Rotation } from '../../Types/Player';
 
 const PlayerMenuWrapper = styled.div<{

src/Components/PlayerMenu/Settings.tsx

@@ -5,7 +5,7 @@ import PartnerTaxIcon from '../../Icons/PartnerTaxIcon';
 import EnergyIcon from '../../Icons/EnergyIcon';
 import PoisonIcon from '../../Icons/PoisonIcon';
 import { useWakeLock } from 'react-screen-wake-lock';
-import styled, { css } from 'styled-components';
+import styled, { css } from 'styled-components/macro';
 
 type SettingsProps = {
   player: Player;

src/Components/Text/OutlinedText.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { theme } from '../../Data/theme';
 
 const CenteredText = styled.div<{

src/Components/Views/Play.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import Counters from '../Counters/Counters';
 import { Player } from '../../Types/Player';
 

src/Components/Views/StartMenu/LayoutOptions.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { GridTemplateAreas } from '../../../Data/GridTemplateAreas';
 import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
 import OnePlayerLandscape from '../../../Icons/Layouts/OnePlayerLandscape';

src/Components/Views/StartMenu/StartMenu.tsx

@@ -1,7 +1,7 @@
 import { Button, FormControl, FormLabel, Switch } from '@mui/material';
 import Slider from '@mui/material/Slider';
 import { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import styled from 'styled-components/macro';
 import { GridTemplateAreas } from '../../../Data/GridTemplateAreas';
 import {
   InitialSettings,

yarn.lock

@@ -3021,7 +3021,7 @@ babel-plugin-jest-hoist@^27.5.1:
 
 babel-plugin-macros@^3.1.0:
   version "3.1.0"
-  resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
   integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
   dependencies:
     "@babel/runtime" "^7.12.5"
@@ -3057,6 +3057,17 @@ babel-plugin-polyfill-regenerator@^0.5.1:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.4.2"
 
+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==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.22.5"
+    "@babel/helper-module-imports" "^7.22.5"
+    "@babel/plugin-syntax-jsx" "^7.22.5"
+    lodash "^4.17.21"
+    picomatch "^2.3.1"
+
 babel-plugin-transform-react-remove-prop-types@^0.4.24:
   version "0.4.24"
   resolved "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz"
@@ -8598,7 +8609,7 @@ style-loader@^3.3.1:
 
 styled-components@^6.0.1:
   version "6.0.7"
-  resolved "https://registry.npmjs.org/styled-components/-/styled-components-6.0.7.tgz"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-6.0.7.tgz#1cf4a5e6b6181b29f941934df54af19b7ef05ab0"
   integrity sha512-xIwWuiRMYR43mskVsW9MGTRjSo7ol4bcVjT595fGUp3OLBJOlOgaiKaxsHdC4a2HqWKqKnh0CmcRbk5ogyDjTg==
   dependencies:
     "@babel/cli" "^7.21.0"