Add rule no-multiple-style-changes

Author: utarwyn

.yarn/versions/019b1e7a.yml

@@ -0,0 +1,2 @@
+releases:
+  "@ecocode/eslint-plugin": minor

eslint-plugin/CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add support for TypeScript rules with **typescript-eslint**
 - Add rule `@ecocode/avoid-high-accuracy-geolocation`
 - Add rule `@ecocode/no-import-all-from-library`
+- Add rule `@ecocode/no-multiple-style-changes`
 - Add rule `@ecocode/prefer-collections-with-pagination`
 
 ## [0.1.0] - 2023-03-24

eslint-plugin/README.md

@@ -73,6 +73,7 @@ to have more information about the integration.
 | [avoid-high-accuracy-geolocation](docs/rules/avoid-high-accuracy-geolocation.md)       | Avoid using high accuracy geolocation in web applications. | ✅  |
 | [no-import-all-from-library](docs/rules/no-import-all-from-library.md)                 | Should not import all from library                         | ✅  |
 | [no-multiple-access-dom-element](docs/rules/no-multiple-access-dom-element.md)         | Disallow multiple access of same DOM element.              | ✅  |
+| [no-multiple-style-changes](docs/rules/no-multiple-style-changes.md)                   | Disallow multiple style changes at once.                   | ✅  |
 | [prefer-collections-with-pagination](docs/rules/prefer-collections-with-pagination.md) | Prefer API collections with pagination.                    | ✅  |
 
 <!-- end auto-generated rules list -->

eslint-plugin/docs/rules/no-multiple-style-changes.md

@@ -0,0 +1,40 @@
+# Disallow multiple style changes at once (`@ecocode/no-multiple-style-changes`)
+
+⚠️ This rule _warns_ in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+## Rule Details
+
+This rule aims to batch multiple style changes at once.
+
+To limit the number of repaint/reflow, it is advised to batch style modifications by adding a
+class containing all style changes that will generate a unique reflow.
+
+## Examples
+
+Examples of **non-compliant** code for this rule:
+
+```html
+<script>
+  element.style.height = "800px";
+  element.style.width = "600px";
+  element.style.color = "red";
+</script>
+```
+
+Examples of **compliant** code for this rule:
+
+```html
+<style>
+  .in-error {
+    color: red;
+    height: 800px;
+    width: 800px;
+  }
+</style>
+
+<script>
+  element.addClass("in-error");
+</script>
+```

eslint-plugin/lib/rules/no-multiple-style-changes.js

@@ -0,0 +1,82 @@
+/**
+ * Copyright (C) 2023 Green Code Initiative
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+"use strict";
+
+/** @type {import("eslint").Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "Disallow multiple style changes at once.",
+      category: "eco-design",
+      recommended: "warn",
+    },
+    messages: {
+      UseClassInstead:
+        "There are more than two style assignations for '{{elementName}}'. Use a class instead.",
+    },
+    schema: [],
+  },
+  create: function (context) {
+    function isNodeUseStyleProperty(node) {
+      return (
+        node != null &&
+        node.object != null &&
+        node.object.property != null &&
+        node.object.property.name === "style"
+      );
+    }
+
+    return {
+      AssignmentExpression(node) {
+        // Are we checking an assignation on a style property
+        if (isNodeUseStyleProperty(node.left)) {
+          const domElementName = node.left.object.object.name;
+          const currentRangestart = node.left.object.object.range[0];
+
+          /** We get the parent AST to check if there is more than one assignation on
+           the style of the same domElement */
+          const currentScopeASTBody =
+            context.getScope().block.body.length != null
+              ? context.getScope().block.body
+              : context.getScope().block.body.body;
+
+          const filtered = currentScopeASTBody.filter(
+            (e) =>
+              e.type === "ExpressionStatement" &&
+              e.expression.type === "AssignmentExpression" &&
+              isNodeUseStyleProperty(e.expression.left) &&
+              e.expression.left.object.object.name === domElementName
+          );
+
+          // De-duplication, prevents multiple alerts for each line involved
+          const isCurrentNodeTheFirstAssignation =
+            currentRangestart <=
+            filtered[0].expression.left.object.object.range[0];
+
+          if (filtered.length > 1 && isCurrentNodeTheFirstAssignation) {
+            context.report({
+              node,
+              messageId: "UseClassInstead",
+              data: { elementName: domElementName },
+            });
+          }
+        }
+      },
+    };
+  },
+};

eslint-plugin/tests/lib/rules/no-multiple-style-changes.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright (C) 2023 Green Code Initiative
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+"use strict";
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require("../../../lib/rules/no-multiple-style-changes");
+const RuleTester = require("eslint").RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester();
+const expectedError = {
+  messageId: "UseClassInstead",
+  type: "AssignmentExpression",
+};
+
+ruleTester.run("no-multiple-style-changes", rule, {
+  valid: [
+    {
+      code: 'element.style.height = "800px";',
+    },
+    {
+      code: `element.style.height = "800px";
+      element2.style.width = "800px";`,
+    },
+    {
+      code: `element.style.height = "800px";
+      function a() { element.style.width = "800px"; }
+      `,
+    },
+  ],
+
+  invalid: [
+    {
+      code: `function a(element){
+          element.style.height = "800px";
+          element.style.width = "800px";
+        }`,
+      errors: [expectedError],
+    },
+    {
+      code: `element.style.height = "800px";
+      element.style.width = "800px";`,
+      errors: [expectedError],
+    },
+    {
+      code: `
+      function changeStyle()
+      {
+        var anyScopedVar;
+        element.style.any = "800px";
+        anotherChildElement.style.any = "800px";
+        anyGlobalVar.assignation = "any";
+        anyScopedVar = anyGlobalVar.assignation;
+        element.style.anyOther = "800px";
+      }
+      `,
+      errors: [expectedError],
+    },
+  ],
+});