Fix eslint-plugin-twenty (#1640)

* Fixed color rule

* Fixed naming

* Fix effect component rule

* Deactivated broken rules

* Fixed lint

* Complete eslint-plugin-twenty work

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/eslint-plugin-twenty/src/tests/sort-css-properties-alphabetically.spec.ts

@@ -0,0 +1,56 @@
+import { RuleTester } from "@typescript-eslint/rule-tester";
+
+import sortCssPropertiesAlphabeticallyRule from "../rules/sort-css-properties-alphabetically";
+
+const ruleTester = new RuleTester({
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./tsconfig.json",
+    tsconfigRootDir: __dirname,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+});
+
+ruleTester.run(
+  "sort-css-properties-alphabetically",
+  sortCssPropertiesAlphabeticallyRule,
+  {
+    valid: [
+      {
+        code: "const style = css`color: red;`;",
+      },
+      {
+        code: "const style = css`background-color: $bgColor;color: red;`;",
+      },
+      {
+        code: "const StyledComponent = styled.div`color: red;`;",
+      },
+      {
+        code: "const StyledComponent = styled.div`background-color: $bgColor;color: red;`;",
+      },
+    ],
+    invalid: [
+      {
+        code: "const style = css`color: #FF0000;background-color: $bgColor`;",
+        output: "const style = css`background-color: $bgColorcolor: #FF0000;`;",
+        errors: [
+          {
+            messageId: "sortCssPropertiesAlphabetically",
+          },
+        ],
+      },
+      {
+        code: "const StyledComponent = styled.div`color: #FF0000;background-color: $bgColor`;",
+        output:
+          "const StyledComponent = styled.div`background-color: $bgColorcolor: #FF0000;`;",
+        errors: [
+          {
+            messageId: "sortCssPropertiesAlphabetically",
+          },
+        ],
+      },
+    ],
+  },
+);