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

* Add plugin * Run plugin
twentyhq · Jun 14, 2023 · eb8fc50 · eb8fc50
1 parent 830b76c
commit eb8fc50
Show file tree

Hide file tree

Showing 72 changed files with 534 additions and 477 deletions.
diff --git a/front/.eslintrc.js b/front/.eslintrc.js
@@ -5,7 +5,7 @@ module.exports = {
     tsconfigRootDir: __dirname,
     sourceType: 'module',
   },
-  plugins: ['@typescript-eslint/eslint-plugin', 'simple-import-sort'],
+  plugins: ['@typescript-eslint/eslint-plugin', 'simple-import-sort', 'better-styled-components'],
   extends: [
     'plugin:@typescript-eslint/recommended',
     'plugin:prettier/recommended',
@@ -44,6 +44,7 @@ module.exports = {
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     'simple-import-sort/imports': 'error',
-    'simple-import-sort/exports': 'error'
+    'simple-import-sort/exports': 'error',
+    'better-styled-components/sort-declarations-alphabetically': 2
   },
 };
diff --git a/front/package-lock.json b/front/package-lock.json
diff --git a/front/package.json b/front/package.json
@@ -115,6 +115,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-config-standard-with-typescript": "^23.0.0",
+    "eslint-plugin-better-styled-components": "^1.1.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-n": "^15.5.1",
     "eslint-plugin-prettier": "^4.2.1",

diff --git a/front/src/modules/auth/components/RequireAuth.tsx b/front/src/modules/auth/components/RequireAuth.tsx
@@ -6,11 +6,11 @@ import styled from '@emotion/styled';
 import { hasAccessToken } from '../services/AuthService';
 
 const EmptyContainer = styled.div`
+  align-items: center;
   display: flex;
+  height: 100%;
   justify-content: center;
-  align-items: center;
   width: 100%;
-  height: 100%;
 `;
 
 const fadeIn = keyframes`
@@ -23,8 +23,8 @@ const fadeIn = keyframes`
 `;
 
 const FadeInStyle = styled.div`
-  opacity: 0;
   animation: ${fadeIn} 1s forwards;
+  opacity: 0;
 `;
 
 export function RequireAuth({

diff --git a/front/src/modules/comments/components/comments/CellCommentChip.tsx b/front/src/modules/comments/components/comments/CellCommentChip.tsx
@@ -10,12 +10,12 @@ const StyledCellWrapper = styled.div`
 `;
 
 const StyledCommentChipContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
   position: relative;
+
   right: 50px;
   width: 50px;
-
-  display: flex;
-  justify-content: flex-end;
 `;
 
 export function CellCommentChip(props: CommentChipProps) {

diff --git a/front/src/modules/comments/components/comments/CommentChip.tsx b/front/src/modules/comments/components/comments/CommentChip.tsx
@@ -8,26 +8,26 @@ export type CommentChipProps = {
 };
 
 const StyledChip = styled.div`
-  height: 26px;
-  max-width: 42px;
+  align-items: center;
+  backdrop-filter: blur(6px);
 
-  padding-left: 4px;
-  padding-right: 4px;
+  background: ${(props) => props.theme.primaryBackgroundTransparent};
+  border-radius: ${(props) => props.theme.borderRadius};
 
+  color: ${(props) => props.theme.text30};
+  cursor: pointer;
   display: flex;
-  align-items: center;
-  justify-content: center;
   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) {

diff --git a/front/src/modules/comments/components/comments/CommentHeader.tsx b/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;
+  background-color: ${(props) => props.theme.primaryBackground};
 
-  opacity: 1;
+  box-shadow: 0px 2px 4px 3px rgba(0, 0, 0, 0.04);
 
-  background-color: ${(props) => props.theme.primaryBackground};
+  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) {

diff --git a/front/src/modules/comments/components/comments/CommentThread.tsx b/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`
+  align-items: flex-start;
   display: flex;
+
   flex-direction: column-reverse;
+  gap: ${(props) => props.theme.spacing(4)};
 
-  align-items: flex-start;
   justify-content: flex-start;
-
   max-height: 400px;
   overflow: auto;
-  width: 100%;
 
-  gap: ${(props) => props.theme.spacing(4)};
+  width: 100%;
 `;
 
 export function CommentThread({ commentThread }: OwnProps) {

diff --git a/front/src/modules/comments/components/comments/CommentThreadCreateMode.tsx b/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`
+  align-items: flex-start;
   display: flex;
+
   flex-direction: column-reverse;
+  gap: ${(props) => props.theme.spacing(4)};
 
-  align-items: flex-start;
   justify-content: flex-start;
-
   overflow: auto;
-  width: 100%;
 
-  gap: ${(props) => props.theme.spacing(4)};
+  width: 100%;
 `;
 
 export function CommentThreadCreateMode() {

diff --git a/front/src/modules/comments/components/comments/CommentThreadItem.tsx b/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};
+  overflow-wrap: anywhere;
 
-  text-align: left;
   padding-left: 24px;
 
-  color: ${(props) => props.theme.text60};
-
-  overflow-wrap: anywhere;
+  text-align: left;
 `;
 
 export function CommentThreadItem({ comment }: OwnProps) {

diff --git a/front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx b/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;
+  background: ${(props) => props.theme.primaryBackground};
+  display: flex;
+
+  height: fit-content;
   justify-content: flex-start;
 
-  min-width: 250px;
   max-width: 250px;
+  min-width: 250px;
 
-  text-wrap: nowrap;
   overflow: hidden;
 
-  height: fit-content;
-
-  background: ${(props) => props.theme.primaryBackground};
+  text-wrap: nowrap;
 `;
 
 const StyledFakeCellText = styled.div`