divide rule prefer-shorthand-css-notation

green-code-initiative · Aug 14, 2023 · 641bf40 · 641bf40
1 parent 309c3f7
commit 641bf40
Show file tree

Hide file tree

Showing 17 changed files with 1,425 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,7 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
-- [#20](https://github.com/green-code-initiative/ecoCode-javascript/pull/20) Add rule `@ecocode/prefer-shorthand-css-notations`
+- [#20](https://github.com/green-code-initiative/ecoCode-javascript/pull/20) Add rules `@ecocode/prefer-shorthand-css-notations-*`
 - [#14](https://github.com/green-code-initiative/ecoCode-javascript/pull/14) Create SonarQube plugin
 - [#12](https://github.com/green-code-initiative/ecoCode-javascript/issues/12) Pack ESLint plugin into SonarQube plugin
 - [#16](https://github.com/green-code-initiative/ecoCode-javascript/pull/16) Use centralized rules specifications

diff --git a/eslint-plugin/README.md b/eslint-plugin/README.md
@@ -56,14 +56,19 @@ Add `@ecocode` to the `plugins` section of your `.eslintrc`, followed by rules c
 ⚠️ Configurations set to warn in.\
 ✅ Set in the `recommended` configuration.
 
-| Name                                                                                   | Description                                                | ⚠️ |
-| :------------------------------------------------------------------------------------- | :--------------------------------------------------------- | :- |
-| [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.                    | ✅  |
-| [prefer-shorthand-css-notations](docs/rules/prefer-shorthand-css-notations.md)         | Encourage usage of shorthand CSS notations                 | ✅  |
+| Name                                                                                                         | Description                                                | ⚠️ |
+| :----------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------- | :- |
+| [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.                    | ✅  |
+| [prefer-shorthand-css-notations](docs/rules/prefer-shorthand-css-notations.md)                               | Encourage usage of shorthand CSS notations                 | ✅  |
+| [prefer-shorthand-css-notations-animation](docs/rules/prefer-shorthand-css-notations-animation.md)           | Encourage usage of shorthand CSS notations                 | ✅  |
+| [prefer-shorthand-css-notations-content](docs/rules/prefer-shorthand-css-notations-content.md)               | Encourage usage of shorthand CSS notations                 | ✅  |
+| [prefer-shorthand-css-notations-layout](docs/rules/prefer-shorthand-css-notations-layout.md)                 | Encourage usage of shorthand CSS notations                 | ✅  |
+| [prefer-shorthand-css-notations-margin-padding](docs/rules/prefer-shorthand-css-notations-margin-padding.md) | Encourage usage of shorthand CSS notations                 | ✅  |
+| [prefer-shorthand-css-notations-text](docs/rules/prefer-shorthand-css-notations-text.md)                     | Encourage usage of shorthand CSS notations                 | ✅  |
 
 <!-- end auto-generated rules list -->
 

diff --git a/eslint-plugin/docs/rules/prefer-shorthand-css-notations-animation.md b/eslint-plugin/docs/rules/prefer-shorthand-css-notations-animation.md
@@ -0,0 +1,40 @@
+# Encourage usage of shorthand CSS notations (`@ecocode/prefer-shorthand-css-notations-animation`)
+
+⚠️ This rule _warns_ in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+⚠️This rule warns in the ✅ recommended config.
+
+## Rule Details
+
+This rule aims to encourage the use of shorthand CSS notations, especially for the following attributes: animation, transition, offset
+
+## Examples
+
+Examples of **non-compliant** code for this rule:
+
+```js
+<div
+  style={{
+    transitionProperty: "width",
+    transitionDuration: "35s",
+    transitionTimingFunction: "ease-in-out",
+    transitionDelay: "0s",
+  }}
+>
+  {/* Your content here */}
+</div>
+```
+
+Examples of **compliant** code for this rule:
+
+```js
+<div style={{ transition: "width 35s ease-in-out 0s" }}>
+  {/* Your content here */}
+</div>
+```
+
+## Further reading
+
+- [cnumr/best-practices/Use abbreviated CSS notations](https://github.com/cnumr/best-practices/blob/fc5a1f865bafb196e4775cce8835393751d40ed8/chapters/BP_026_en.md)
diff --git a/eslint-plugin/docs/rules/prefer-shorthand-css-notations-content.md b/eslint-plugin/docs/rules/prefer-shorthand-css-notations-content.md
@@ -0,0 +1,31 @@
+# Encourage usage of shorthand CSS notations (`@ecocode/prefer-shorthand-css-notations-content`)
+
+⚠️ This rule _warns_ in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+⚠️This rule warns in the ✅ recommended config.
+
+## Rule Details
+
+This rule aims to encourage the use of shorthand CSS notations, especially for the following attributes: outline, border, background and listStyle
+
+## Examples
+
+Examples of **non-compliant** code for this rule:
+
+```js
+<div
+  style={{ outlineWidth: 1, outlineStyle: "solid", outlineColor: "#000000" }}
+/>
+```
+
+Examples of **compliant** code for this rule:
+
+```js
+<div style={{ outline: "inset thick" }}> {/* Your content here */} </div>
+```
+
+## Further reading
+
+- [cnumr/best-practices/Use abbreviated CSS notations](https://github.com/cnumr/best-practices/blob/fc5a1f865bafb196e4775cce8835393751d40ed8/chapters/BP_026_en.md)
diff --git a/eslint-plugin/docs/rules/prefer-shorthand-css-notations-layout.md b/eslint-plugin/docs/rules/prefer-shorthand-css-notations-layout.md
@@ -0,0 +1,31 @@
+# Encourage usage of shorthand CSS notations (`@ecocode/prefer-shorthand-css-notations-layout`)
+
+⚠️ This rule _warns_ in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+⚠️This rule warns in the ✅ recommended config.
+
+## Rule Details
+
+This rule aims to encourage the use of shorthand CSS notations, especially for the following attributes: column, flex, grid, columnRule, placeContent, placeItems, placeSelf
+
+## Examples
+
+Examples of **non-compliant** code for this rule:
+
+```js
+<div style={{ alignSelf: "end", justifySelf: "stretch" }}>
+  {/* Your content here */}
+</div>
+```
+
+Examples of **compliant** code for this rule:
+
+```js
+<div style={{ placeSelf: "end stretch" }}> {/* Your content here */} </div>
+```
+
+## Further reading
+
+- [cnumr/best-practices/Use abbreviated CSS notations](https://github.com/cnumr/best-practices/blob/fc5a1f865bafb196e4775cce8835393751d40ed8/chapters/BP_026_en.md)
diff --git a/eslint-plugin/docs/rules/prefer-shorthand-css-notations-margin-padding.md b/eslint-plugin/docs/rules/prefer-shorthand-css-notations-margin-padding.md
@@ -0,0 +1,31 @@
+# Encourage usage of shorthand CSS notations (`@ecocode/prefer-shorthand-css-notations-margin-padding`)
+
+⚠️ This rule _warns_ in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+⚠️This rule warns in the ✅ recommended config.
+
+## Rule Details
+
+This rule aims to encourage the use of shorthand CSS notations, especially for the following attributes: margin, padding
+
+## Examples
+
+Examples of **non-compliant** code for this rule:
+
+```js
+<div style={{ marginTop: 20, marginRight: 10, marginLeft: 8, marginBottom: 7 }}>
+  {/* Your content here */}
+</div>
+```
+
+Examples of **compliant** code for this rule:
+
+```js
+<div style={{ margin: "10px 3px 8px 5px" }}> {/* Your content here */} </div>
+```
+
+## Further reading
+
+- [cnumr/best-practices/Use abbreviated CSS notations](https://github.com/cnumr/best-practices/blob/fc5a1f865bafb196e4775cce8835393751d40ed8/chapters/BP_026_en.md)
diff --git a/eslint-plugin/docs/rules/prefer-shorthand-css-notations-text.md b/eslint-plugin/docs/rules/prefer-shorthand-css-notations-text.md
@@ -0,0 +1,35 @@
+# Encourage usage of shorthand CSS notations (`@ecocode/prefer-shorthand-css-notations-text`)
+
+⚠️ This rule _warns_ in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+⚠️This rule warns in the ✅ recommended config.
+
+## Rule Details
+
+This rule aims to encourage the use of shorthand CSS notations, especially for the following attributes: font, textDecoration
+
+## Examples
+
+Examples of **non-compliant** code for this rule:
+
+```js
+<div
+  style={{
+    textDecorationStyle: "solid",
+    textDecorationColor: "#f00",
+    textDecorationLine: "underline",
+  }}
+/>
+```
+
+Examples of **compliant** code for this rule:
+
+```js
+<div style={{ textDecoration: "underline solid #f00" }} />
+```
+
+## Further reading
+
+- [cnumr/best-practices/Use abbreviated CSS notations](https://github.com/cnumr/best-practices/blob/fc5a1f865bafb196e4775cce8835393751d40ed8/chapters/BP_026_en.md)
diff --git a/eslint-plugin/lib/rules/prefer-shorthand-css-notations-animation.js b/eslint-plugin/lib/rules/prefer-shorthand-css-notations-animation.js
@@ -0,0 +1,103 @@
+/**
+ * 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: "Encourage usage of shorthand CSS notations",
+      category: "eco-design",
+      recommended: "warn",
+    },
+    messages: {
+      PreferShorthandCSSNotation: `Avoid using multiple properties in CSS style {{attribute}} attribute. Use the following shorthand CSS notation for {{attribute}} instead: {{value}}`,
+    },
+    schema: [],
+    severity: 1,
+  },
+
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        if (node.attributes.find((attr) => attr.name.name === "style")) {
+          const styleProp = node.attributes.find(
+            (attr) => attr.name.name === "style",
+          );
+
+          // To prevent <div style={{ animationName: 'fade-in', animationDuration: '2s', animationTimingFunction: 'ease-in-out', animationIterationCount: 'infinite', animationDirection: 'alternate', animationFillMode: 'both', animationPlayState: 'running' }}>
+          const animationNameProp = styleProp.value.expression.properties.find(
+            (prop) => prop.key.name === "animationName",
+          );
+          const animationDurationProp =
+            styleProp.value.expression.properties.find(
+              (prop) => prop.key.name === "animationDuration",
+            );
+
+          if (animationDurationProp && animationNameProp) {
+            context.report({
+              node: styleProp,
+              messageId: "PreferShorthandCSSNotation",
+              data: {
+                attribute: "animation",
+                value: `animation: animationNameProp animationDuration animationTimingFunction animationDelay animationIterationCount animationDirection animationFillMode animationPlayState`,
+              },
+            });
+          }
+          // To prevent <div style={{ transitionProperty: 'opacity', transitionDuration: '0.3s', transitionTimingFunction: 'ease-in-out', animationDelay: '1s' }}>
+          const transitionPropertyProp =
+            styleProp.value.expression.properties.find(
+              (prop) => prop.key.name === "transitionProperty",
+            );
+          const transitionDurationProp =
+            styleProp.value.expression.properties.find(
+              (prop) => prop.key.name === "transitionDuration",
+            );
+          if (transitionDurationProp && transitionPropertyProp) {
+            context.report({
+              node: styleProp,
+              messageId: "PreferShorthandCSSNotation",
+              data: {
+                attribute: "transition",
+                value: `transition: transitionProperty transitionDuration transitionTimingFunction transitionDelay`,
+              },
+            });
+          }
+          // To prevent <div style={{ offsetPath: 'path', offsetPosition: '50px', offsetDistance: '10%', offsetRotate: '45deg', offsetAnchor: 'auto' }}>
+          const offsetPathProp = styleProp.value.expression.properties.find(
+            (prop) => prop.key.name === "offsetPath",
+          );
+          const offsetPositionProp = styleProp.value.expression.properties.find(
+            (prop) => prop.key.name === "offsetPosition",
+          );
+
+          if (offsetPathProp && offsetPositionProp) {
+            context.report({
+              node: styleProp,
+              messageId: "PreferShorthandCSSNotation",
+              data: {
+                attribute: "offset",
+                value: `offset: offsetPosition offsetPath offsetDistance offsetRotate offsetAnchor`,
+              },
+            });
+          }
+        }
+      },
+    };
+  },
+};