Improve rule "prefer-shorthand-css-notations"

Author: utarwyn

eslint-plugin/README.md

@@ -56,22 +56,18 @@ 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-css-animations](docs/rules/avoid-css-animations.md)                                                   | Avoid usage of CSS animations                              | ✅  |
-| [avoid-high-accuracy-geolocation](docs/rules/avoid-high-accuracy-geolocation.md)                             | Avoid using high accuracy geolocation in web applications. | ✅  |
-| [limit-db-query-results](docs/rules/limit-db-query-results.md)                                               | Should limit the number of returns for a SQL query         | ✅  |
-| [no-empty-image-src-attribute](docs/rules/no-empty-image-src-attribute.md)                                   | Disallow usage of image with empty source attribute        | ✅  |
-| [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-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                 | ✅  |
-| [provide-print-css](docs/rules/provide-print-css.md)                                                         | Enforce providing a print stylesheet                       | ✅  |
+| Name                                                                                   | Description                                                | ⚠️ |
+| :------------------------------------------------------------------------------------- | :--------------------------------------------------------- | :- |
+| [avoid-css-animations](docs/rules/avoid-css-animations.md)                             | Avoid usage of CSS animations                              | ✅  |
+| [avoid-high-accuracy-geolocation](docs/rules/avoid-high-accuracy-geolocation.md)       | Avoid using high accuracy geolocation in web applications. | ✅  |
+| [limit-db-query-results](docs/rules/limit-db-query-results.md)                         | Should limit the number of returns for a SQL query         | ✅  |
+| [no-empty-image-src-attribute](docs/rules/no-empty-image-src-attribute.md)             | Disallow usage of image with empty source attribute        | ✅  |
+| [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                 | ✅  |
+| [provide-print-css](docs/rules/provide-print-css.md)                                   | Enforce providing a print stylesheet                       | ✅  |
 
 <!-- end auto-generated rules list -->
 

eslint-plugin/docs/rules/prefer-shorthand-css-notations-animation.md

@@ -0,0 +1,73 @@
+# Encourage usage of shorthand CSS notations (`@ecocode/prefer-shorthand-css-notations`)
+
+⚠️ This rule _warns_ in the ✅ `recommended` config.
+
+<!-- end auto-generated rule header -->
+
+## Rule Details
+
+This rule aims to encourage the use of shorthand CSS notations to reduce stylesheets size.
+
+## Options
+
+You can disable specific properties from being scanned if it does not match your needs.
+To disable properties you need to modify your .eslintrc.js by adding the following rule configuration:
+
+```js
+module.exports = {
+  ...yourConf,
+  rules: {
+    "prefer-shorthand-css-notations": [
+      "warn",
+      // disable analyze of "animation-*" properties
+      { disableProperties: ["animation"] },
+    ],
+  },
+};
+```
+
+## Examples
+
+Examples of **non-compliant** code for this rule:
+
+```js
+<div
+  style={{
+    marginTop: "1em",
+    marginRight: 0,
+    marginBottom: "2em",
+    marginLeft: "0.5em",
+  }}
+>
+  {/* Your content here */}
+</div>
+```
+
+```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={{ margin: "1em 0 2em 0.5em" }}>{/* Your content here */}</div>
+```
+
+```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)