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

* Add plugin

* Run plugin

front/src/modules/comments/components/comments/CellCommentChip.tsx

@@ -10,12 +10,12 @@ const StyledCellWrapper = styled.div`
 `;
 
 const StyledCommentChipContainer = styled.div`
-  position: relative;
-  right: 50px;
-  width: 50px;
-
   display: flex;
   justify-content: flex-end;
+  position: relative;
+
+  right: 50px;
+  width: 50px;
 `;
 
 export function CellCommentChip(props: CommentChipProps) {

front/src/modules/comments/components/comments/CommentChip.tsx

@@ -8,26 +8,26 @@ export type CommentChipProps = {
 };
 
 const StyledChip = styled.div`
-  height: 26px;
-  max-width: 42px;
-
-  padding-left: 4px;
-  padding-right: 4px;
-
-  display: flex;
   align-items: center;
-  justify-content: center;
+  backdrop-filter: blur(6px);
+
+  background: ${(props) => props.theme.primaryBackgroundTransparent};
+  border-radius: ${(props) => props.theme.borderRadius};
+
+  color: ${(props) => props.theme.text30};
+  cursor: pointer;
+  display: flex;
   flex-direction: row;
   gap: 4px;
 
-  background: ${(props) => props.theme.primaryBackgroundTransparent};
-  backdrop-filter: blur(6px);
+  height: 26px;
+  justify-content: center;
 
-  border-radius: ${(props) => props.theme.borderRadius};
+  max-width: 42px;
 
-  cursor: pointer;
+  padding-left: 4px;
 
-  color: ${(props) => props.theme.text30};
+  padding-right: 4px;
 
   &:hover {
     background: ${(props) => props.theme.tertiaryBackground};
@@ -38,12 +38,12 @@ const StyledChip = styled.div`
 `;
 
 const StyledCount = styled.div`
-  display: flex;
   align-items: center;
-  justify-content: center;
-
+  display: flex;
   font-size: 12px;
+
   font-weight: 500;
+  justify-content: center;
 `;
 
 export function CommentChip({ count, onClick }: CommentChipProps) {

front/src/modules/comments/components/comments/CommentHeader.tsx

@@ -14,49 +14,49 @@ type OwnProps = {
 };
 
 const StyledContainer = styled.div`
-  display: flex;
   align-items: center;
+  display: flex;
 
   flex-direction: row;
 
+  gap: ${(props) => props.theme.spacing(1)};
+
   justify-content: flex-start;
 
   padding: ${(props) => props.theme.spacing(1)};
-
-  gap: ${(props) => props.theme.spacing(1)};
 `;
 
 const StyledName = styled.div`
+  color: ${(props) => props.theme.text80};
   font-size: 13px;
   font-weight: 400;
-  color: ${(props) => props.theme.text80};
+  max-width: 160px;
+  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
-  max-width: 160px;
 `;
 
 const StyledDate = styled.div`
+  color: ${(props) => props.theme.text30};
   font-size: 12px;
   font-weight: 400;
-  color: ${(props) => props.theme.text30};
-
-  padding-top: 1.5px;
 
   margin-left: ${(props) => props.theme.spacing(1)};
+
+  padding-top: 1.5px;
 `;
 
 const StyledTooltip = styled(Tooltip)`
-  padding: 8px;
-
-  opacity: 1;
-
   background-color: ${(props) => props.theme.primaryBackground};
 
+  box-shadow: 0px 2px 4px 3px rgba(0, 0, 0, 0.04);
+
+  box-shadow: 2px 4px 16px 6px rgba(0, 0, 0, 0.12);
+
   color: ${(props) => props.theme.text100};
 
-  box-shadow: 2px 4px 16px 6px rgba(0, 0, 0, 0.12);
-  box-shadow: 0px 2px 4px 3px rgba(0, 0, 0, 0.04);
+  opacity: 1;
+  padding: 8px;
 `;
 
 export function CommentHeader({ comment }: OwnProps) {

front/src/modules/comments/components/comments/CommentThread.tsx

@@ -17,29 +17,29 @@ type OwnProps = {
 };
 
 const StyledContainer = styled.div`
-  display: flex;
   align-items: flex-start;
+  display: flex;
 
   flex-direction: column;
 
-  justify-content: flex-start;
-
   gap: ${(props) => props.theme.spacing(4)};
+
+  justify-content: flex-start;
   padding: ${(props) => props.theme.spacing(2)};
 `;
 
 const StyledThreadItemListContainer = styled.div`
-  display: flex;
-  flex-direction: column-reverse;
-
   align-items: flex-start;
-  justify-content: flex-start;
+  display: flex;
 
+  flex-direction: column-reverse;
+  gap: ${(props) => props.theme.spacing(4)};
+
+  justify-content: flex-start;
   max-height: 400px;
   overflow: auto;
-  width: 100%;
 
-  gap: ${(props) => props.theme.spacing(4)};
+  width: 100%;
 `;
 
 export function CommentThread({ commentThread }: OwnProps) {

front/src/modules/comments/components/comments/CommentThreadCreateMode.tsx

@@ -19,28 +19,28 @@ import {
 import { CommentThreadItem } from './CommentThreadItem';
 
 const StyledContainer = styled.div`
-  display: flex;
   align-items: flex-start;
+  display: flex;
   flex-direction: column;
+  gap: ${(props) => props.theme.spacing(4)};
+
   justify-content: flex-start;
 
   max-height: calc(100% - 16px);
-
-  gap: ${(props) => props.theme.spacing(4)};
   padding: ${(props) => props.theme.spacing(2)};
 `;
 
 const StyledThreadItemListContainer = styled.div`
-  display: flex;
-  flex-direction: column-reverse;
-
   align-items: flex-start;
-  justify-content: flex-start;
-
-  overflow: auto;
-  width: 100%;
+  display: flex;
 
+  flex-direction: column-reverse;
   gap: ${(props) => props.theme.spacing(4)};
+
+  justify-content: flex-start;
+  overflow: auto;
+
+  width: 100%;
 `;
 
 export function CommentThreadCreateMode() {

front/src/modules/comments/components/comments/CommentThreadItem.tsx

@@ -9,23 +9,23 @@ type OwnProps = {
 };
 
 const StyledContainer = styled.div`
+  align-items: flex-start;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
   gap: ${(props) => props.theme.spacing(1)};
+  justify-content: flex-start;
 `;
 
 const StyledCommentBody = styled.div`
+  color: ${(props) => props.theme.text60};
   font-size: ${(props) => props.theme.fontSizeMedium};
-  line-height: ${(props) => props.theme.lineHeight};
 
-  text-align: left;
+  line-height: ${(props) => props.theme.lineHeight};
+  overflow-wrap: anywhere;
+
   padding-left: 24px;
 
-  color: ${(props) => props.theme.text60};
-
-  overflow-wrap: anywhere;
+  text-align: left;
 `;
 
 export function CommentThreadItem({ comment }: OwnProps) {

front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx

@@ -15,19 +15,19 @@ export default meta;
 type Story = StoryObj<typeof CellCommentChip>;
 
 const TestCellContainer = styled.div`
-  display: flex;
   align-items: center;
-  justify-content: flex-start;
-
-  min-width: 250px;
-  max-width: 250px;
-
-  text-wrap: nowrap;
-  overflow: hidden;
+  background: ${(props) => props.theme.primaryBackground};
+  display: flex;
 
   height: fit-content;
+  justify-content: flex-start;
 
-  background: ${(props) => props.theme.primaryBackground};
+  max-width: 250px;
+  min-width: 250px;
+
+  overflow: hidden;
+
+  text-wrap: nowrap;
 `;
 
 const StyledFakeCellText = styled.div`