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

* Add plugin

* Run plugin

front/src/modules/ui/layout/DefaultLayout.tsx

@@ -9,20 +9,20 @@ import { isNavbarOpenedState } from './states/isNavbarOpenedState';
 import { MOBILE_VIEWPORT } from './styles/themes';
 
 const StyledLayout = styled.div`
+  background: ${(props) => props.theme.noisyBackground};
   display: flex;
   flex-direction: row;
-  width: 100vw;
   height: 100vh;
-  background: ${(props) => props.theme.noisyBackground};
   position: relative;
+  width: 100vw;
 `;
 
 const NAVBAR_WIDTH = '236px';
 
 const MainContainer = styled.div`
-  overflow: hidden;
   display: flex;
   flex-direction: row;
+  overflow: hidden;
   width: ${() =>
     useRecoilValue(isNavbarOpenedState)
       ? `(calc(100% -  ${NAVBAR_WIDTH})`

front/src/modules/ui/layout/Panel.tsx

@@ -2,10 +2,10 @@ import React from 'react';
 import styled from '@emotion/styled';
 
 const StyledPanel = styled.div`
-  display: flex;
   background: ${(props) => props.theme.primaryBackground};
-  border-radius: 8px;
   border: 1px solid ${(props) => props.theme.primaryBorder};
+  border-radius: 8px;
+  display: flex;
   width: 100%;
 `;
 

front/src/modules/ui/layout/SecondaryLayout.tsx

@@ -9,31 +9,31 @@ type OwnProps = {
 };
 
 const StyledLayout = styled.div`
+  background: ${(props) => props.theme.noisyBackground};
   display: flex;
   flex-direction: row;
-  width: 100vw;
   height: 100vh;
-  background: ${(props) => props.theme.noisyBackground};
   position: relative;
+  width: 100vw;
 `;
 const MainContainer = styled.div`
-  overflow: hidden;
   display: flex;
   flex-direction: row;
+  overflow: hidden;
   width: 100%;
 `;
 
 const SubContainer = styled.div`
+  background: ${(props) => props.theme.primaryBackground};
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+  border-radius: ${(props) => props.theme.spacing(2)};
   display: flex;
   flex-direction: column;
-  background: ${(props) => props.theme.primaryBackground};
-  border-radius: ${(props) => props.theme.spacing(2)};
-  border: 1px solid ${(props) => props.theme.primaryBorder};
-  padding: ${(props) => props.theme.spacing(2)};
   margin: ${(props) => props.theme.spacing(4)};
-  width: 100%;
   max-width: calc(100vw - 500px);
   padding: 32px;
+  padding: ${(props) => props.theme.spacing(2)};
+  width: 100%;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: 100%;
@@ -42,11 +42,11 @@ const SubContainer = styled.div`
 `;
 
 const SubSubContainer = styled.div`
+  color: ${(props) => props.theme.text100};
   display: flex;
-  width: 350px;
   flex-direction: column;
   gap: 32px;
-  color: ${(props) => props.theme.text100};
+  width: 350px;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: 100%;

front/src/modules/ui/layout/containers/WithTopBarContainer.tsx

@@ -21,17 +21,17 @@ const StyledContainer = styled.div`
 `;
 
 const MainContainer = styled.div`
+  background: ${(props) => props.theme.noisyBackground};
   display: flex;
   flex-direction: row;
-  width: calc(100% - ${(props) => props.theme.spacing(3)});
+  gap: ${(props) => props.theme.spacing(2)};
   height: calc(
     100% - ${TOP_BAR_MIN_HEIGHT} - ${(props) => props.theme.spacing(2)} -
       ${(props) => props.theme.spacing(5)}
   );
-  background: ${(props) => props.theme.noisyBackground};
-  padding-right: ${(props) => props.theme.spacing(3)};
   padding-bottom: ${(props) => props.theme.spacing(3)};
-  gap: ${(props) => props.theme.spacing(2)};
+  padding-right: ${(props) => props.theme.spacing(3)};
+  width: calc(100% - ${(props) => props.theme.spacing(3)});
 `;
 
 type LeftContainerProps = {
@@ -40,6 +40,7 @@ type LeftContainerProps = {
 
 const LeftContainer = styled.div<LeftContainerProps>`
   display: flex;
+  position: relative;
   width: calc(
     100% -
       ${(props) =>
@@ -47,7 +48,6 @@ const LeftContainer = styled.div<LeftContainerProps>`
           ? `${props.theme.rightDrawerWidth} - ${props.theme.spacing(2)}`
           : '0px'}
   );
-  position: relative;
 `;
 
 export function WithTopBarContainer({

front/src/modules/ui/layout/navbar/NavBackButton.tsx

@@ -10,17 +10,17 @@ type OwnProps = {
 };
 
 const IconAndButtonContainer = styled.button`
+  align-items: center;
+  background: inherit;
+  border: none;
+  color: ${(props) => props.theme.text60};
+  cursor: pointer;
   display: flex;
   flex-direction: row;
-  align-items: center;
-  padding: ${(props) => props.theme.spacing(1)};
-  gap: ${(props) => props.theme.spacing(1)};
   font-size: ${(props) => props.theme.fontSizeLarge};
   font-weight: ${(props) => props.theme.fontWeightSemibold};
-  color: ${(props) => props.theme.text60};
-  border: none;
-  background: inherit;
-  cursor: pointer;
+  gap: ${(props) => props.theme.spacing(1)};
+  padding: ${(props) => props.theme.spacing(1)};
   width: 100%;
 `;
 

front/src/modules/ui/layout/navbar/NavCollapseButton.tsx

@@ -10,21 +10,21 @@ import { isNavbarOpenedState } from '../states/isNavbarOpenedState';
 import { MOBILE_VIEWPORT } from '../styles/themes';
 
 const CollapseButton = styled.button<{ hideOnDesktop: boolean | undefined }>`
-  display: flex;
   align-items: center;
-  justify-content: center;
-
-  width: 32px;
-  height: 32px;
-
-  user-select: none;
-  border: 0;
   background: inherit;
-
-  padding: 0;
-  cursor: pointer;
+  border: 0;
 
   color: ${(props) => props.theme.text30};
+  cursor: pointer;
+
+  display: flex;
+  height: 32px;
+  justify-content: center;
+
+  padding: 0;
+  user-select: none;
+
+  width: 32px;
 
   ${(props) =>
     props.hideOnDesktop &&

front/src/modules/ui/layout/navbar/NavItem.tsx

@@ -21,18 +21,10 @@ type StyledItemProps = {
 };
 
 const StyledItem = styled.button<StyledItemProps>`
-  display: flex;
   align-items: center;
-  border: none;
-  font-size: ${(props) => props.theme.fontSizeMedium};
-  cursor: ${(props) => (props.soon ? 'default' : 'pointer')};
-  pointer-events: ${(props) => (props.soon ? 'none' : 'auto')};
-  user-select: none;
   background: ${(props) => (props.active ? 'rgba(0, 0, 0, 0.04)' : 'inherit')};
-  padding-top: ${(props) => props.theme.spacing(1)};
-  padding-bottom: ${(props) => props.theme.spacing(1)};
-  padding-left: ${(props) => props.theme.spacing(1)};
-  font-family: 'Inter';
+  border: none;
+  border-radius: 4px;
   color: ${(props) => {
     if (props.active) {
       return props.theme.text100;
@@ -45,12 +37,20 @@ const StyledItem = styled.button<StyledItemProps>`
     }
     return props.theme.text60;
   }};
-  border-radius: 4px;
+  cursor: ${(props) => (props.soon ? 'default' : 'pointer')};
+  display: flex;
+  font-family: 'Inter';
+  font-size: ${(props) => props.theme.fontSizeMedium};
+  margin-bottom: calc(${(props) => props.theme.spacing(1)} / 2);
+  padding-bottom: ${(props) => props.theme.spacing(1)};
+  padding-left: ${(props) => props.theme.spacing(1)};
+  padding-top: ${(props) => props.theme.spacing(1)};
+  pointer-events: ${(props) => (props.soon ? 'none' : 'auto')};
   :hover {
     background: rgba(0, 0, 0, 0.04);
     color: ${(props) => (props.danger ? props.theme.red : props.theme.text100)};
   }
-  margin-bottom: calc(${(props) => props.theme.spacing(1)} / 2);
+  user-select: none;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     font-size: ${(props) => props.theme.fontSizeLarge};

front/src/modules/ui/layout/navbar/NavTitle.tsx

@@ -5,14 +5,14 @@ type OwnProps = {
 };
 
 const StyledTitle = styled.div`
-  display: flex;
-  text-transform: uppercase;
   color: ${(props) => props.theme.text30};
+  display: flex;
   font-size: ${(props) => props.theme.fontSizeExtraSmall};
   font-weight: 600;
-  padding-top: ${(props) => props.theme.spacing(8)};
   padding-bottom: ${(props) => props.theme.spacing(2)};
   padding-left: ${(props) => props.theme.spacing(1)};
+  padding-top: ${(props) => props.theme.spacing(8)};
+  text-transform: uppercase;
 `;
 
 function NavTitle({ label }: OwnProps) {

front/src/modules/ui/layout/navbar/NavWorkspaceButton.tsx

@@ -6,24 +6,24 @@ import { currentUserState } from '@/auth/states/currentUserState';
 import NavCollapseButton from './NavCollapseButton';
 
 const StyledContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  height: 34px;
   align-items: center;
-  user-select: none;
-  border: 0;
+  align-self: flex-start;
   background: inherit;
+  border: 0;
+  display: flex;
+  height: 34px;
+  justify-content: space-between;
+  margin-left: ${(props) => props.theme.spacing(1)};
   padding: ${(props) => props.theme.spacing(2)};
   padding-top: ${(props) => props.theme.spacing(1)};
-  margin-left: ${(props) => props.theme.spacing(1)};
-  align-self: flex-start;
+  user-select: none;
   width: 100%;
 `;
 
 const LogoAndNameContainer = styled.div`
-  display: flex;
   align-items: center;
   cursor: pointer;
+  display: flex;
 `;
 
 type StyledLogoProps = {
@@ -33,17 +33,17 @@ type StyledLogoProps = {
 const StyledLogo = styled.div<StyledLogoProps>`
   background: url(${(props) => props.logo});
   background-size: cover;
-  width: 16px;
-  height: 16px;
   border-radius: 2px;
+  height: 16px;
+  width: 16px;
 `;
 
 const StyledName = styled.div`
-  margin-left: ${(props) => props.theme.spacing(1)};
-  font-family: 'Inter';
-  font-weight: 500;
-  font-size: ${(props) => props.theme.fontSizeLarge};
   color: ${(props) => props.theme.text80};
+  font-family: 'Inter';
+  font-size: ${(props) => props.theme.fontSizeLarge};
+  font-weight: 500;
+  margin-left: ${(props) => props.theme.spacing(1)};
 `;
 
 function NavWorkspaceButton() {

front/src/modules/ui/layout/navbar/NavbarContainer.tsx

@@ -21,10 +21,10 @@ const StyledNavbarContainer = styled.div<{ width: string }>`
 
 const NavbarSubContainer = styled.div`
   display: flex;
-  width: 160px;
   flex-direction: column;
-  margin-top: 41px;
   margin-left: auto;
+  margin-top: 41px;
+  width: 160px;
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     width: 100%;

front/src/modules/ui/layout/right-drawer/components/RightDrawerPage.tsx

@@ -3,6 +3,6 @@ import styled from '@emotion/styled';
 export const RightDrawerPage = styled.div`
   display: flex;
   flex-direction: column;
-  width: 100%;
   height: 100%;
+  width: 100%;
 `;

front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBar.tsx

@@ -3,16 +3,16 @@ import styled from '@emotion/styled';
 import { RightDrawerTopBarCloseButton } from './RightDrawerTopBarCloseButton';
 
 const StyledRightDrawerTopBar = styled.div`
+  align-items: center;
+  border-bottom: 1px solid ${(props) => props.theme.lightBorder};
+  color: ${(props) => props.theme.text60};
   display: flex;
   flex-direction: row;
-  min-height: 40px;
-  align-items: center;
+  font-size: 13px;
   justify-content: space-between;
+  min-height: 40px;
   padding-left: 8px;
   padding-right: 8px;
-  font-size: 13px;
-  color: ${(props) => props.theme.text60};
-  border-bottom: 1px solid ${(props) => props.theme.lightBorder};
 `;
 
 const StyledTopBarTitle = styled.div`

front/src/modules/ui/layout/right-drawer/components/RightDrawerTopBarCloseButton.tsx

@@ -6,19 +6,19 @@ import { IconPlus } from '@/ui/icons/index';
 import { isRightDrawerOpenState } from '../states/isRightDrawerOpenState';
 
 const StyledButton = styled.button`
-  height: 24px;
-  width: 24px;
-  border: 1px solid ${(props) => props.theme.lightBorder};
+  align-items: center;
   background: none;
+  border: 1px solid ${(props) => props.theme.lightBorder};
+  border-radius: 4px;
   cursor: pointer;
   display: flex;
   flex-direction: row;
-  align-items: center;
+  height: 24px;
   padding: 3px;
 
-  border-radius: 4px;
-
   transition: ${(props) => props.theme.clickableElementBackgroundTransition};
+
+  width: 24px;
   &:hover {
     background: ${(props) => props.theme.clickableElementBackgroundHover};
   }

front/src/modules/ui/layout/styles/themes.ts

@@ -124,22 +124,22 @@ const darkThemeSpecific: typeof lightThemeSpecific = {
 
 export const overlayBackground = (props: any) =>
   css`
-    background: ${props.theme.secondaryBackgroundTransparent};
     backdrop-filter: blur(8px);
+    background: ${props.theme.secondaryBackgroundTransparent};
     box-shadow: ${props.theme.modalBoxShadow};
   `;
 
 export const textInputStyle = (props: any) =>
   css`
-    border: none;
-    outline: none;
     background-color: transparent;
+    border: none;
     color: ${props.theme.text80};
+    outline: none;
 
     &::placeholder,
     &::-webkit-input-placeholder {
-      font-family: ${props.theme.fontFamily};
       color: ${props.theme.text30};
+      font-family: ${props.theme.fontFamily};
       font-weight: ${props.theme.fontWeightMedium};
     }
   `;

front/src/modules/ui/layout/top-bar/TopBar.tsx

@@ -8,38 +8,38 @@ import NavCollapseButton from '../navbar/NavCollapseButton';
 export const TOP_BAR_MIN_HEIGHT = '40px';
 
 const TopBarContainer = styled.div`
-  display: flex;
-  flex-direction: row;
-  min-height: ${TOP_BAR_MIN_HEIGHT};
   align-items: center;
   background: ${(props) => props.theme.noisyBackground};
-  padding: ${(props) => props.theme.spacing(2)};
-  font-size: 14px;
   color: ${(props) => props.theme.text80};
+  display: flex;
+  flex-direction: row;
+  font-size: 14px;
+  min-height: ${TOP_BAR_MIN_HEIGHT};
+  padding: ${(props) => props.theme.spacing(2)};
 `;
 
 const TitleContainer = styled.div`
-  font-family: 'Inter';
-  margin-left: 4px;
-  font-size: 14px;
   display: flex;
+  font-family: 'Inter';
+  font-size: 14px;
+  margin-left: 4px;
   width: 100%;
 `;
 
 const AddButtonContainer = styled.div`
-  display: flex;
-  justify-self: flex-end;
-  flex-shrink: 0;
-  border: 1px solid ${(props) => props.theme.primaryBorder};
-  width: 28px;
-  height: 28px;
   align-items: center;
-  justify-content: center;
+  border: 1px solid ${(props) => props.theme.primaryBorder};
   border-radius: 4px;
   color: ${(props) => props.theme.text80};
   cursor: pointer;
-  user-select: none;
+  display: flex;
+  flex-shrink: 0;
+  height: 28px;
+  justify-content: center;
+  justify-self: flex-end;
   margin-right: ${(props) => props.theme.spacing(1)};
+  user-select: none;
+  width: 28px;
 `;
 
 type OwnProps = {

front/src/modules/ui/layout/top-bar/TopTitle.tsx

@@ -3,15 +3,15 @@ import styled from '@emotion/styled';
 import NavCollapseButton from '../navbar/NavCollapseButton';
 
 const TitleAndCollapseContainer = styled.div`
+  align-items: center;
   display: flex;
   flex-direction: row;
-  align-items: center;
 `;
 
 const TitleContainer = styled.div`
+  display: flex;
   font-size: ${(props) => props.theme.fontSizeLarge};
   font-weight: ${(props) => props.theme.fontWeightSemibold};
-  display: flex;
   width: 100%;
 `;