feat(no-inline-styles): added handling of transitions

Author: marekdedic

docs/rules/no-inline-styles.md

@@ -23,6 +23,8 @@ This rule reports all attributes and directives that would compile to inline sty
 <script>
   /* eslint svelte/no-inline-styles: "error" */
 
+  import { fade } from 'svelte/transition';
+
   export let classTwo;
   export let blockDisplay;
 </script>
@@ -36,6 +38,8 @@ This rule reports all attributes and directives that would compile to inline sty
 <span style="display: block;">Hello World!</span>
 
 <span style:display={blockDisplay ? 'block' : 'inline'}>Hello World!</span>
+
+<span transition:fade>Hello World!</span>
 ```
 
 </ESLintCodeBlock>
@@ -44,7 +48,12 @@ This rule reports all attributes and directives that would compile to inline sty
 
 ```json
 {
-  "svelte/no-inline-styles": ["error", {}]
+  "svelte/no-inline-styles": [
+    "error",
+    {
+      "allowTransitions": false
+    }
+  ]
 }
 ```
 

src/rules/no-inline-styles.ts

@@ -7,14 +7,26 @@ export default createRule('no-inline-styles', {
 			category: 'Best Practices',
 			recommended: false
 		},
-		schema: [],
+		schema: [
+			{
+				type: 'object',
+				properties: {
+					allowTransitions: {
+						type: 'boolean'
+					}
+				},
+				additionalProperties: false
+			}
+		],
 		messages: {
 			hasStyleAttribute: 'Found disallowed style attribute.',
-			hasStyleDirective: 'Found disallowed style directive.'
+			hasStyleDirective: 'Found disallowed style directive.',
+			hasTransition: 'Found disallowed transition.'
 		},
 		type: 'suggestion'
 	},
 	create(context) {
+		const allowTransitions: boolean = context.options[0]?.allowTransitions ?? false;
 		return {
 			SvelteElement(node) {
 				if (node.kind !== 'html') {
@@ -27,6 +39,13 @@ export default createRule('no-inline-styles', {
 					if (attribute.type === 'SvelteAttribute' && attribute.key.name === 'style') {
 						context.report({ loc: attribute.loc, messageId: 'hasStyleAttribute' });
 					}
+					if (
+						!allowTransitions &&
+						attribute.type === 'SvelteDirective' &&
+						attribute.kind === 'Transition'
+					) {
+						context.report({ loc: attribute.loc, messageId: 'hasTransition' });
+					}
 				}
 			}
 		};

tests/fixtures/rules/no-inline-styles/invalid/transition01-errors.yaml

@@ -0,0 +1,8 @@
+- message: Found disallowed transition.
+  line: 5
+  column: 7
+  suggestions: null
+- message: Found disallowed transition.
+  line: 7
+  column: 7
+  suggestions: null

tests/fixtures/rules/no-inline-styles/invalid/transition01-input.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { fade, fly } from 'svelte/transition';
+</script>
+
+<span transition:fade>Hello World!</span>
+
+<span transition:fly={{ y: 200, duration: 2000 }}>Hello World!</span>

tests/fixtures/rules/no-inline-styles/valid/allowed-transitions/_config.json

@@ -0,0 +1,7 @@
+{
+	"options": [
+		{
+			"allowTransitions": true
+		}
+	]
+}

tests/fixtures/rules/no-inline-styles/valid/allowed-transitions/transition01-input.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { fade, fly } from 'svelte/transition';
+</script>
+
+<span transition:fade>Hello World!</span>
+
+<span transition:fly={{ y: 200, duration: 2000 }}>Hello World!</span>