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

* Add plugin

* Run plugin

front/src/modules/ui/components/table/CheckboxCell.tsx

@@ -15,13 +15,13 @@ type OwnProps = {
 };
 
 const StyledContainer = styled.div`
-  height: 32px;
-
-  display: flex;
   align-items: center;
-  justify-content: center;
 
   cursor: pointer;
+  display: flex;
+  height: 32px;
+
+  justify-content: center;
 `;
 
 export function CheckboxCell({

front/src/modules/ui/components/table/ColumnHead.tsx

@@ -7,11 +7,11 @@ type OwnProps = {
 };
 
 const StyledTitle = styled.div`
+  align-items: center;
   display: flex;
   flex-direction: row;
-  align-items: center;
-  height: ${(props) => props.theme.spacing(8)};
   font-weight: 500;
+  height: ${(props) => props.theme.spacing(8)};
   padding-left: ${(props) => props.theme.spacing(2)};
 `;
 

front/src/modules/ui/components/table/EntityTable.tsx

@@ -39,20 +39,20 @@ type OwnProps<
 };
 
 const StyledTable = styled.table`
-  width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2);
+  border-collapse: collapse;
 
   border-radius: 4px;
   border-spacing: 0;
-  border-collapse: collapse;
   margin-left: ${(props) => props.theme.table.horizontalCellMargin};
   margin-right: ${(props) => props.theme.table.horizontalCellMargin};
   table-layout: fixed;
+  width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2);
 
   th {
+    border: 1px solid ${(props) => props.theme.tertiaryBackground};
     border-collapse: collapse;
     color: ${(props) => props.theme.text40};
     padding: 0;
-    border: 1px solid ${(props) => props.theme.tertiaryBackground};
     text-align: left;
 
     :last-child {
@@ -63,16 +63,16 @@ const StyledTable = styled.table`
       border-right-color: transparent;
     }
     :last-of-type {
-      width: 100%;
       min-width: 0;
+      width: 100%;
     }
   }
 
   td {
+    border: 1px solid ${(props) => props.theme.tertiaryBackground};
     border-collapse: collapse;
     color: ${(props) => props.theme.text80};
     padding: 0;
-    border: 1px solid ${(props) => props.theme.tertiaryBackground};
 
     text-align: left;
 
@@ -84,23 +84,23 @@ const StyledTable = styled.table`
       border-right-color: transparent;
     }
     :last-of-type {
-      width: 100%;
       min-width: 0;
+      width: 100%;
     }
   }
 `;
 
 const StyledTableWithHeader = styled.div`
   display: flex;
-  flex-direction: column;
   flex: 1;
+  flex-direction: column;
   width: 100%;
 `;
 
 const StyledTableScrollableContainer = styled.div`
-  overflow: auto;
-  height: 100%;
   flex: 1;
+  height: 100%;
+  overflow: auto;
 `;
 
 const StyledRow = styled.tr<{ selected: boolean }>`

front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx

@@ -15,22 +15,22 @@ type StyledContainerProps = {
 };
 
 const StyledContainer = styled.div<StyledContainerProps>`
-  display: flex;
-  position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
-  z-index: 1;
-  height: 48px;
-  bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
-  left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
-  top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};
-
-  background: ${(props) => props.theme.secondaryBackground};
   align-items: center;
+  background: ${(props) => props.theme.secondaryBackground};
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+  border-radius: 8px;
+  bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
+  display: flex;
+  height: 48px;
+
+  left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
   padding-left: ${(props) => props.theme.spacing(2)};
   padding-right: ${(props) => props.theme.spacing(2)};
-  transform: translateX(-50%);
+  position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
+  top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};
 
-  border-radius: 8px;
-  border: 1px solid ${(props) => props.theme.primaryBorder};
+  transform: translateX(-50%);
+  z-index: 1;
 `;
 
 export function EntityTableActionBar({ children }: OwnProps) {

front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx

@@ -13,16 +13,16 @@ type StyledButtonProps = {
 };
 
 const StyledButton = styled.div<StyledButtonProps>`
-  display: flex;
-  cursor: pointer;
-  user-select: none;
+  border-radius: 4px;
   color: ${(props) =>
     props.type === 'warning' ? props.theme.red : props.theme.text60};
+  cursor: pointer;
+  display: flex;
   justify-content: center;
 
   padding: ${(props) => props.theme.spacing(2)};
-  border-radius: 4px;
   transition: background 0.1s ease;
+  user-select: none;
 
   &:hover {
     background: ${(props) => props.theme.tertiaryBackground};
@@ -30,8 +30,8 @@ const StyledButton = styled.div<StyledButtonProps>`
 `;
 
 const StyledButtonLabel = styled.div`
-  margin-left: ${(props) => props.theme.spacing(2)};
   font-weight: 500;
+  margin-left: ${(props) => props.theme.spacing(2)};
 `;
 
 export function EntityTableActionBarButton({

front/src/modules/ui/components/table/table-header/DropdownButton.tsx

@@ -31,18 +31,18 @@ type StyledDropdownButtonProps = {
 };
 
 const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
-  display: flex;
-  cursor: pointer;
-  user-select: none;
   background: ${(props) => props.theme.primaryBackground};
+  border-radius: 4px;
   color: ${(props) => (props.isActive ? props.theme.blue : 'none')};
-  padding: ${(props) => props.theme.spacing(1)};
+  cursor: pointer;
+  display: flex;
+  filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
 
-  padding-right: ${(props) => props.theme.spacing(2)};
+  padding: ${(props) => props.theme.spacing(1)};
   padding-left: ${(props) => props.theme.spacing(2)};
 
-  border-radius: 4px;
-  filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
+  padding-right: ${(props) => props.theme.spacing(2)};
+  user-select: none;
 
   &:hover {
     filter: brightness(0.95);
@@ -50,19 +50,19 @@ const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
 `;
 
 const StyledDropdown = styled.ul`
+  --outer-border-radius: calc(var(--wraper-border-radius) - 2px);
   --wraper-border: 1px;
   --wraper-border-radius: 8px;
-  --outer-border-radius: calc(var(--wraper-border-radius) - 2px);
 
-  display: flex;
-  flex-direction: column;
-  position: absolute;
-  top: 14px;
-  right: 0;
   border: var(--wraper-border) solid ${(props) => props.theme.primaryBorder};
   border-radius: var(--wraper-border-radius);
-  padding: 0px;
+  display: flex;
+  flex-direction: column;
   min-width: 160px;
+  padding: 0px;
+  position: absolute;
+  right: 0;
+  top: 14px;
   ${overlayBackground}
   li {
     &:first-of-type {
@@ -70,24 +70,24 @@ const StyledDropdown = styled.ul`
       border-top-right-radius: var(--outer-border-radius);
     }
     &:last-of-type {
+      border-bottom: 0;
       border-bottom-left-radius: var(--outer-border-radius);
       border-bottom-right-radius: var(--outer-border-radius);
-      border-bottom: 0;
     }
   }
 `;
 
 const StyledDropdownItem = styled.li`
-  display: flex;
   align-items: center;
-  width: calc(160px - ${(props) => props.theme.spacing(4)});
+  border-radius: 2px;
+  color: ${(props) => props.theme.text60};
+  cursor: pointer;
+  display: flex;
+  margin: 2px;
   padding: ${(props) => props.theme.spacing(2)}
     calc(${(props) => props.theme.spacing(2)} - 2px);
-  margin: 2px;
-  cursor: pointer;
   user-select: none;
-  color: ${(props) => props.theme.text60};
-  border-radius: 2px;
+  width: calc(160px - ${(props) => props.theme.spacing(4)});
 
   &:hover {
     background: rgba(0, 0, 0, 0.04);
@@ -96,54 +96,54 @@ const StyledDropdownItem = styled.li`
 
 const StyledDropdownItemClipped = styled.span`
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 const StyledDropdownTopOption = styled.li`
-  display: flex;
   align-items: center;
+  border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
+  color: ${(props) => props.theme.text80};
+  cursor: pointer;
+  display: flex;
+  font-weight: ${(props) => props.theme.fontWeightMedium};
   justify-content: space-between;
   padding: calc(${(props) => props.theme.spacing(2)} + 2px)
     calc(${(props) => props.theme.spacing(2)});
-  cursor: pointer;
-  user-select: none;
-  color: ${(props) => props.theme.text80};
-  font-weight: ${(props) => props.theme.fontWeightMedium};
 
   &:hover {
     background: rgba(0, 0, 0, 0.04);
   }
-  border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
+  user-select: none;
 `;
 
 const StyledIcon = styled.div`
   display: flex;
+  justify-content: center;
   margin-right: ${(props) => props.theme.spacing(1)};
   min-width: ${(props) => props.theme.spacing(4)};
-  justify-content: center;
 `;
 
 const StyledSearchField = styled.li`
-  display: flex;
   align-items: center;
-  justify-content: space-between;
-
-  cursor: pointer;
-  user-select: none;
-  color: ${(props) => props.theme.text60};
-  font-weight: ${(props) => props.theme.fontWeightMedium};
   border-bottom: var(--wraper-border) solid
     ${(props) => props.theme.primaryBorder};
+  color: ${(props) => props.theme.text60};
 
+  cursor: pointer;
+  display: flex;
+  font-weight: ${(props) => props.theme.fontWeightMedium};
+  justify-content: space-between;
   overflow: hidden;
+
+  user-select: none;
   input {
-    height: 36px;
-    width: 100%;
-    padding: 8px;
+    border-radius: 8px;
     box-sizing: border-box;
     font-family: ${(props) => props.theme.fontFamily};
-    border-radius: 8px;
+    height: 36px;
+    padding: 8px;
+    width: 100%;
 
     ${textInputStyle}
 

front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx

@@ -18,43 +18,43 @@ type OwnProps<SortField, TData extends FilterableFieldsType> = {
 };
 
 const StyledBar = styled.div`
+  align-items: center;
+  border-top: 1px solid ${(props) => props.theme.primaryBorder};
   display: flex;
   flex-direction: row;
-  border-top: 1px solid ${(props) => props.theme.primaryBorder};
-  align-items: center;
-  justify-content: space-between;
   height: 40px;
+  justify-content: space-between;
 `;
 
 const StyledChipcontainer = styled.div`
+  align-items: center;
   display: flex;
   flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-  overflow-x: auto;
-  margin-left: ${(props) => props.theme.spacing(2)};
   gap: ${(props) => props.theme.spacing(1)};
+  height: 40px;
+  justify-content: space-between;
+  margin-left: ${(props) => props.theme.spacing(2)};
+  overflow-x: auto;
 `;
 
 const StyledCancelButton = styled.button`
-  margin-left: auto;
-  border: none;
   background-color: inherit;
+  border: none;
+  color: ${(props) => props.theme.text60};
+  cursor: pointer;
+  font-weight: 500;
+  margin-left: auto;
+  margin-right: ${(props) => props.theme.spacing(2)};
   padding: ${(props) => {
     const horiz = props.theme.spacing(2);
     const vert = props.theme.spacing(1);
     return `${vert} ${horiz} ${vert} ${horiz}`;
   }};
-  color: ${(props) => props.theme.text60};
-  font-weight: 500;
-  margin-right: ${(props) => props.theme.spacing(2)};
-  cursor: pointer;
   user-select: none;
 
   &:hover {
-    border-radius: ${(props) => props.theme.spacing(1)};
     background-color: ${(props) => props.theme.tertiaryBackground};
+    border-radius: ${(props) => props.theme.spacing(1)};
   }
 `;
 

front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx

@@ -12,31 +12,31 @@ type OwnProps = {
 };
 
 const StyledChip = styled.div`
-  border-radius: 50px;
-  display: flex;
-  flex-direction: row;
+  align-items: center;
   background-color: ${(props) => props.theme.blueHighTransparency};
   border: 1px solid ${(props) => props.theme.blueLowTransparency};
+  border-radius: 50px;
   color: ${(props) => props.theme.blue};
-  padding: ${(props) => props.theme.spacing(1) + ' ' + props.theme.spacing(2)};
-  font-size: ${(props) => props.theme.fontSizeSmall};
-  align-items: center;
+  display: flex;
+  flex-direction: row;
   flex-shrink: 0;
+  font-size: ${(props) => props.theme.fontSizeSmall};
+  padding: ${(props) => props.theme.spacing(1) + ' ' + props.theme.spacing(2)};
 `;
 const StyledIcon = styled.div`
-  margin-right: ${(props) => props.theme.spacing(1)};
-  display: flex;
   align-items: center;
+  display: flex;
+  margin-right: ${(props) => props.theme.spacing(1)};
 `;
 
 const StyledDelete = styled.div`
-  margin-left: ${(props) => props.theme.spacing(2)};
-  cursor: pointer;
-  user-select: none;
-  display: flex;
   align-items: center;
+  cursor: pointer;
+  display: flex;
   font-size: ${(props) => props.theme.fontSizeSmall};
+  margin-left: ${(props) => props.theme.spacing(2)};
   margin-top: 1px;
+  user-select: none;
 `;
 
 const StyledLabelKey = styled.div`

front/src/modules/ui/components/table/table-header/TableHeader.tsx

@@ -30,13 +30,13 @@ const StyledContainer = styled.div`
 `;
 
 const StyledTableHeader = styled.div`
+  align-items: center;
+  color: ${(props) => props.theme.text60};
   display: flex;
   flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px;
-  color: ${(props) => props.theme.text60};
   font-weight: 500;
+  height: 40px;
+  justify-content: space-between;
   padding-left: ${(props) => props.theme.spacing(3)};
   padding-right: ${(props) => props.theme.spacing(2)};
 `;