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

* Add plugin

* Run plugin

front/src/modules/ui/components/editable-cell/EditableCell.tsx

@@ -8,14 +8,14 @@ import { EditableCellDisplayMode } from './EditableCellDisplayMode';
 import { EditableCellEditMode } from './EditableCellEditMode';
 
 export const CellBaseContainer = styled.div`
-  position: relative;
-  box-sizing: border-box;
-  height: 32px;
-  display: flex;
   align-items: center;
-  width: 100%;
+  box-sizing: border-box;
   cursor: pointer;
+  display: flex;
+  height: 32px;
+  position: relative;
   user-select: none;
+  width: 100%;
 `;
 
 type OwnProps = {

front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx

@@ -2,32 +2,32 @@ import { ReactElement } from 'react';
 import styled from '@emotion/styled';
 
 export const EditableCellNormalModeOuterContainer = styled.div`
-  display: flex;
   align-items: center;
-  width: 100%;
+  display: flex;
   height: 100%;
   overflow: hidden;
-
   padding-left: ${(props) => props.theme.spacing(2)};
+
   padding-right: ${(props) => props.theme.spacing(1)};
+  width: 100%;
 
   &:hover {
-    background: ${(props) => props.theme.secondaryBackgroundTransparent};
+    -moz-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
 
     -webkit-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
-    -moz-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
-    box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
-
+    background: ${(props) => props.theme.secondaryBackgroundTransparent};
     border-radius: ${(props) => props.theme.borderRadius};
+
+    box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
   }
 `;
 
 export const EditableCellNormalModeInnerContainer = styled.div`
-  display: flex;
   align-items: center;
-  width: 100%;
+  display: flex;
   height: 100%;
   overflow: hidden;
+  width: 100%;
 `;
 
 type OwnProps = {

front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx

@@ -10,21 +10,21 @@ import { overlayBackground } from '../../layout/styles/themes';
 import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
 
 export const EditableCellEditModeContainer = styled.div<OwnProps>`
-  display: flex;
   align-items: center;
-  min-width: calc(100% + 20px);
-  min-height: 100%;
-  margin-left: -2px;
-  position: absolute;
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+  border-radius: 4px;
+  display: flex;
   left: ${(props) =>
     props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
+  margin-left: -2px;
+  min-height: 100%;
+  min-width: calc(100% + 20px);
+  position: absolute;
+
   right: ${(props) =>
     props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
   top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
-
-  border: 1px solid ${(props) => props.theme.primaryBorder};
   z-index: 1;
-  border-radius: 4px;
   ${overlayBackground}
 `;
 

front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx

@@ -1,17 +1,17 @@
 import styled from '@emotion/styled';
 
 export const HoverableMenuItem = styled.div`
-  position: relative;
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-  display: flex;
   align-items: center;
-  cursor: pointer;
-  user-select: none;
-  border-radius: 4px;
   background: rgba(0, 0, 0, 0);
+  border-radius: 4px;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  height: 100%;
+  position: relative;
   transition: background 0.1s ease;
+  user-select: none;
+  width: 100%;
 
   &:hover {
     background: rgba(0, 0, 0, 0.04);

front/src/modules/ui/components/editable-cell/types/EditableChip.tsx

@@ -19,9 +19,9 @@ export type EditableChipProps = {
 
 // TODO: refactor
 const StyledInplaceInput = styled.input`
-  width: 100%;
   padding-left: ${(props) => props.theme.spacing(1)};
   padding-right: ${(props) => props.theme.spacing(1)};
+  width: 100%;
 
   ${textInputStyle}
 `;

front/src/modules/ui/components/editable-cell/types/EditableDate.tsx

@@ -13,8 +13,8 @@ export type EditableDateProps = {
 };
 
 const StyledContainer = styled.div`
-  display: flex;
   align-items: center;
+  display: flex;
   margin: 0px ${(props) => props.theme.spacing(2)};
 `;
 
@@ -23,14 +23,14 @@ export type StyledCalendarContainerProps = {
 };
 
 const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
-  position: absolute;
+  background: ${(props) => props.theme.secondaryBackground};
   border: 1px solid ${(props) => props.theme.primaryBorder};
   border-radius: 8px;
   box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
-  z-index: 1;
   left: -10px;
+  position: absolute;
   top: 10px;
-  background: ${(props) => props.theme.secondaryBackground};
+  z-index: 1;
 `;
 export function EditableDate({
   value,

front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx

@@ -15,20 +15,20 @@ type OwnProps = {
 };
 
 const StyledContainer = styled.div`
+  align-items: center;
   display: flex;
   justify-content: space-between;
-  align-items: center;
 
   & > input:last-child {
-    padding-left: ${(props) => props.theme.spacing(2)};
     border-left: 1px solid ${(props) => props.theme.primaryBorder};
+    padding-left: ${(props) => props.theme.spacing(2)};
   }
 `;
 
 const StyledEditInplaceInput = styled.input`
-  width: 45%;
   height: 18px;
   margin: 0px ${(props) => props.theme.spacing(2)};
+  width: 45%;
 
   ${textInputStyle}
 `;

front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx

@@ -19,8 +19,8 @@ type StyledEditModeProps = {
 
 // TODO: refactor
 const StyledEditInplaceInput = styled.input<StyledEditModeProps>`
-  width: 100%;
   margin: 0px ${(props) => props.theme.spacing(2)};
+  width: 100%;
   ${textInputStyle}
 `;
 

front/src/modules/ui/components/editable-cell/types/EditableRelation.tsx

@@ -22,29 +22,29 @@ const StyledEditModeContainer = styled.div`
 `;
 
 const StyledEditModeSelectedContainer = styled.div`
-  height: 31px;
-  display: flex;
   align-items: center;
+  display: flex;
+  height: 31px;
   padding-left: ${(props) => props.theme.spacing(2)};
   padding-right: ${(props) => props.theme.spacing(1)};
 `;
 
 const StyledEditModeSearchContainer = styled.div`
-  height: 32px;
-  display: flex;
   align-items: center;
   border-top: 1px solid ${(props) => props.theme.primaryBorder};
+  display: flex;
+  height: 32px;
   padding-left: ${(props) => props.theme.spacing(1)};
   padding-right: ${(props) => props.theme.spacing(1)};
 `;
 
 const StyledEditModeCreateButtonContainer = styled.div`
-  height: 36px;
-  display: flex;
   align-items: center;
   border-top: 1px solid ${(props) => props.theme.primaryBorder};
-  padding: ${(props) => props.theme.spacing(1)};
   color: ${(props) => props.theme.text60};
+  display: flex;
+  height: 36px;
+  padding: ${(props) => props.theme.spacing(1)};
 `;
 
 const StyledEditModeSearchInput = styled.input`
@@ -64,10 +64,10 @@ type StyledEditModeResultItemProps = {
 };
 
 const StyledEditModeResultItem = styled.div<StyledEditModeResultItemProps>`
-  height: 32px;
-  display: flex;
   align-items: center;
   cursor: pointer;
+  display: flex;
+  height: 32px;
   user-select: none;
   ${(props) =>
     props.isSelected &&
@@ -77,8 +77,8 @@ const StyledEditModeResultItem = styled.div<StyledEditModeResultItemProps>`
 `;
 
 const StyledCreateButtonIcon = styled.div`
-  color: ${(props) => props.theme.text100};
   align-self: center;
+  color: ${(props) => props.theme.text100};
   padding-top: 4px;
 `;
 

front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx

@@ -1,19 +1,19 @@
 import styled from '@emotion/styled';
 
 export const EditableRelationCreateButton = styled.button`
-  display: flex;
   align-items: center;
+  background: none;
   border: none;
-  font-size: ${(props) => props.theme.fontSizeMedium};
+  border-radius: 4px;
   cursor: pointer;
-  user-select: none;
-  padding-top: ${(props) => props.theme.spacing(1)};
+  display: flex;
+  font-family: 'Inter';
+  font-size: ${(props) => props.theme.fontSizeMedium};
+  gap: ${(props) => props.theme.spacing(2)};
+  height: 31px;
   padding-bottom: ${(props) => props.theme.spacing(1)};
   padding-left: ${(props) => props.theme.spacing(1)};
-  font-family: 'Inter';
-  border-radius: 4px;
+  padding-top: ${(props) => props.theme.spacing(1)};
+  user-select: none;
   width: 100%;
-  height: 31px;
-  background: none;
-  gap: ${(props) => props.theme.spacing(2)};
 `;

front/src/modules/ui/components/editable-cell/types/EditableText.tsx

@@ -18,8 +18,8 @@ type StyledEditModeProps = {
 
 // TODO: refactor
 const StyledInplaceInput = styled.input<StyledEditModeProps>`
-  width: 100%;
   margin: 0px ${(props) => props.theme.spacing(2)};
+  width: 100%;
   ${textInputStyle}
 `;