Add styled component rule (#1261)

* Add StyledComponent rule

* update doc

* update doc

* update doc

packages/eslint-plugin-twenty/index.js

@@ -1,10 +1,12 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const noHardcodedColors = require('./rules/no-hardcoded-colors');
 const cssAlphabetically = require('./rules/sort-css-properties-alphabetically');
+const styledComponentsPrefixedWithStyled = require('./rules/styled-components-prefixed-with-styled');
 
 module.exports = {
   rules: {
     'no-hardcoded-colors': noHardcodedColors,
     'sort-css-properties-alphabetically': cssAlphabetically,
+    'styled-components-prefixed-with-styled': styledComponentsPrefixedWithStyled,
   },
 };

packages/eslint-plugin-twenty/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-twenty",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "main": "index.js",
     "dependencies": {
         "postcss": "^8.4.24"

packages/eslint-plugin-twenty/rules/styled-components-prefixed-with-styled.js

@@ -0,0 +1,32 @@
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Warn when StyledComponents are not prefixed with Styled',
+      },
+      recommended: true,
+      fixable: 'code',
+    schema: [],
+  },
+  create: function(context) {
+    return {
+      VariableDeclarator: node => {
+        const templateExpr = node.init
+        if (templateExpr?.type !== 'TaggedTemplateExpression') {
+          return;
+        }
+        const tag = templateExpr.tag
+        const tagged = tag.type === 'MemberExpression' ? tag.object 
+                          : tag.type === 'CallExpression' ? tag.callee 
+                          : null
+        if (tagged?.name === 'styled') {
+          const variable = node.id;
+          if (variable?.name.startsWith('Styled')) {
+            return;
+          }
+          context.report({ node, message: `'${variable.name}' is a StyledComponent and is not prefixed with Styled.` });
+        }
+      },
+    }
+  }
+};