Add a custom rule to prevent colors from being hardcoded outside of theme (#288)

* Add a custom rule to prevent colors from being hardcoded in ESLint

* Refactor colors

* Create packages folder and fix colors

* Remove external dependency for css alphabetical order linting

* Fix install with yarn

---------

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

packages/eslint-plugin-twenty/rules/sort-css-properties-alphabetically.js

@@ -0,0 +1,208 @@
+"use strict";
+const postcss = require("postcss");
+
+function isStyledTagname(node) {
+  return (
+    (node.tag.type === "Identifier" && node.tag.name === "css") ||
+    (node.tag.type === "MemberExpression" &&
+      node.tag.object.name === "styled") ||
+    (node.tag.type === "CallExpression" &&
+      (node.tag.callee.name === "styled" ||
+        (node.tag.callee.object &&
+          ((node.tag.callee.object.callee &&
+            node.tag.callee.object.callee.name === "styled") ||
+            (node.tag.callee.object.object &&
+              node.tag.callee.object.object.name === "styled")))))
+  );
+}
+
+/**
+ * An atomic rule is a rule without nested rules.
+ */
+function isValidAtomicRule(rule) {
+  const decls = rule.nodes.filter(node => node.type === "decl");
+  if (decls.length < 0) {
+    return { isValid: true };
+  }
+
+  for (let i = 1; i < decls.length; i++) {
+    const current = decls[i].prop;
+    const prev = decls[i - 1].prop;
+    if (current < prev) {
+      const loc = {
+        start: {
+          line: decls[i - 1].source.start.line,
+          column: decls[i - 1].source.start.column - 1
+        },
+        end: {
+          line: decls[i].source.end.line,
+          column: decls[i].source.end.column - 1
+        }
+      };
+
+      return { isValid: false, loc };
+    }
+  }
+
+  return { isValid: true };
+}
+
+function isValidRule(rule) {
+  // check each rule recursively
+  const { isValid, loc } = rule.nodes.reduce(
+    (map, node) => {
+      return node.type === "rule" ? isValidRule(node) : map;
+    },
+    { isValid: true }
+  );
+
+  // if there is any invalid rule, return result
+  if (!isValid) {
+    return { isValid, loc };
+  }
+
+  // check declarations
+  return isValidAtomicRule(rule);
+}
+
+function getNodeStyles(node) {
+  const [firstQuasi, ...quasis] = node.quasi.quasis;
+  // remove line break added to the first quasi
+  const lineBreakCount = node.quasi.loc.start.line - 1;
+  let styles = `${"\n".repeat(lineBreakCount)}${" ".repeat(
+    node.quasi.loc.start.column + 1
+  )}${firstQuasi.value.raw}`;
+
+  // replace expression by spaces and line breaks
+  quasis.forEach(({ value, loc }, idx) => {
+    const prevLoc = idx === 0 ? firstQuasi.loc : quasis[idx - 1].loc;
+    const lineBreaksCount = loc.start.line - prevLoc.end.line;
+    const spacesCount =
+      loc.start.line === prevLoc.end.line
+        ? loc.start.column - prevLoc.end.column + 2
+        : loc.start.column + 1;
+    styles = `${styles}${" "}${"\n".repeat(lineBreaksCount)}${" ".repeat(
+      spacesCount
+    )}${value.raw}`;
+  });
+
+  return styles;
+}
+
+function create(context) {
+  return {
+    TaggedTemplateExpression(node) {
+      if (isStyledTagname(node)) {
+        try {
+          const root = postcss.parse(getNodeStyles(node));
+
+          const { isValid, loc } = isValidRule(root);
+
+          if (!isValid) {
+            return context.report({
+              node,
+              messageId: "sort-css-properties-alphabetically",
+              loc,
+              fix: fixer =>
+                fix({
+                  rule: root,
+                  fixer,
+                  src: context.getSourceCode()
+                })
+            });
+          }
+        } catch (e) {
+          return true;
+        }
+      }
+    }
+  };
+}
+
+function fix({ rule, fixer, src }) {
+  let fixings = [];
+
+  // concat fixings recursively
+  rule.nodes.forEach(node => {
+    if (node.type === "rule") {
+      fixings = [...fixings, ...fix({ rule: node, fixer, src })];
+    }
+  });
+
+  const declarations = rule.nodes.filter(node => node.type === "decl");
+  const sortedDeclarations = sortDeclarations(declarations);
+
+  declarations.forEach((decl, idx) => {
+    if (!areSameDeclarations(decl, sortedDeclarations[idx])) {
+      try {
+        const range = getDeclRange({ decl, src });
+        const sortedDeclText = getDeclText({
+          decl: sortedDeclarations[idx],
+          src
+        });
+
+        fixings.push(fixer.removeRange([range.startIdx, range.endIdx + 1]));
+        fixings.push(
+          fixer.insertTextAfterRange(
+            [range.startIdx, range.startIdx],
+            sortedDeclText
+          )
+        );
+      } catch (e) {
+        console.log(e);
+      }
+    }
+  });
+  return fixings;
+}
+
+function areSameDeclarations(a, b) {
+  return (
+    a.source.start.line === b.source.start.line &&
+    a.source.start.column === b.source.start.column
+  );
+}
+
+function getDeclRange({ decl, src }) {
+  const loc = {
+    start: {
+      line: decl.source.start.line,
+      column: decl.source.start.column - 1
+    },
+    end: {
+      line: decl.source.end.line,
+      column: decl.source.end.column - 1
+    }
+  };
+
+  const startIdx = src.getIndexFromLoc(loc.start);
+  const endIdx = src.getIndexFromLoc(loc.end);
+  return { startIdx, endIdx };
+}
+
+function getDeclText({ decl, src }) {
+  const { startIdx, endIdx } = getDeclRange({ decl, src });
+  return src.getText().substring(startIdx, endIdx + 1);
+}
+
+function sortDeclarations(declarations) {
+  return declarations
+    .slice()
+    .sort((declA, declB) => (declA.prop > declB.prop ? 1 : -1));
+}
+
+module.exports = {
+  meta: {
+    docs: {
+      description: "Styles are sorted alphabetically.",
+      category: "Fill me in",
+      recommended: false
+    },
+    messages: {
+      "sort-css-properties-alphabetically":
+        "Declarations should be sorted alphabetically."
+    },
+    fixable: "code"
+  },
+  create
+};