Add rule to order css in styled components alphabetically (#284)

* Add plugin

* Run plugin

front/src/modules/ui/components/board/BoardColumn.tsx

@@ -3,20 +3,20 @@ import styled from '@emotion/styled';
 import { DroppableProvided } from '@hello-pangea/dnd';
 
 export const StyledColumn = styled.div`
+  background-color: ${({ theme }) => theme.primaryBackground};
   display: flex;
   flex-direction: column;
-  width: 300px;
-  background-color: ${({ theme }) => theme.primaryBackground};
   padding: ${({ theme }) => theme.spacing(2)};
+  width: 300px;
 `;
 
 export const StyledColumnTitle = styled.h3`
+  color: ${({ color }) => color};
   font-family: 'Inter';
+  font-size: ${({ theme }) => theme.fontSizeMedium};
   font-style: normal;
   font-weight: ${({ theme }) => theme.fontWeightMedium};
-  font-size: ${({ theme }) => theme.fontSizeMedium};
   line-height: ${({ theme }) => theme.lineHeight};
-  color: ${({ color }) => color};
   margin: 0;
   margin-bottom: ${({ theme }) => theme.spacing(2)};
 `;

front/src/modules/ui/components/board/BoardItem.tsx

@@ -5,9 +5,9 @@ const StyledCard = styled.div`
   background-color: ${({ theme }) => theme.secondaryBackground};
   border: 1px solid ${({ theme }) => theme.quaternaryBackground};
   border-radius: ${({ theme }) => theme.borderRadius};
-  padding: ${({ theme }) => theme.spacing(2)};
-  margin-bottom: ${({ theme }) => theme.spacing(2)};
   box-shadow: ${({ theme }) => theme.boxShadow};
+  margin-bottom: ${({ theme }) => theme.spacing(2)};
+  padding: ${({ theme }) => theme.spacing(2)};
 `;
 
 type BoardCardProps = {

front/src/modules/ui/components/board/BoardNewButton.tsx

@@ -3,17 +3,17 @@ import styled from '@emotion/styled';
 import { IconPlus } from '@/ui/icons/index';
 
 const StyledButton = styled.button`
-  display: flex;
   align-items: center;
-  justify-content: center;
+  align-self: baseline;
   background-color: ${({ theme }) => theme.primaryBackground};
-  color: ${({ theme }) => theme.text40};
   border: none;
   border-radius: ${({ theme }) => theme.borderRadius};
+  color: ${({ theme }) => theme.text40};
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out;
-  align-self: baseline;
+  display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
+  justify-content: center;
+  transition: background-color 0.2s ease-in-out;
 
   &:hover {
     background-color: ${({ theme }) => theme.secondaryBackground};