Merge branch 'main' into eslint-compat-utils

Author: ota-meshi

.changeset/happy-monkeys-grin.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-svelte': minor
+---
+
+feat: added the no-inline-styles rule

CHANGELOG.md

@@ -1,5 +1,11 @@
 # eslint-plugin-svelte
 
+## 2.34.1
+
+### Patch Changes
+
+- [#604](https://github.com/sveltejs/eslint-plugin-svelte/pull/604) [`796c0ad`](https://github.com/sveltejs/eslint-plugin-svelte/commit/796c0ad5f71dd927989caea109027e1735202c3b) Thanks [@ota-meshi](https://github.com/ota-meshi)! - fix: false positives for custom-element with svelte v3 in `svelte/valid-compile`
+
 ## 2.34.0
 
 ### Minor Changes

README.md

@@ -342,6 +342,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/no-at-debug-tags](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-at-debug-tags/) | disallow the use of `{@debug}` | :star: |
 | [svelte/no-ignored-unsubscribe](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-ignored-unsubscribe/) | disallow ignoring the unsubscribe method returned by the `subscribe()` on Svelte stores. |  |
 | [svelte/no-immutable-reactive-statements](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-immutable-reactive-statements/) | disallow reactive statements that don't reference reactive values. |  |
+| [svelte/no-inline-styles](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-inline-styles/) | disallow attributes and directives that produce inline styles |  |
 | [svelte/no-reactive-functions](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-reactive-functions/) | it's not necessary to define functions in reactive statements | :bulb: |
 | [svelte/no-reactive-literals](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-reactive-literals/) | don't assign literal values in reactive statements | :bulb: |
 | [svelte/no-unused-class-name](https://sveltejs.github.io/eslint-plugin-svelte/rules/no-unused-class-name/) | disallow the use of a class in the template without a corresponding style |  |

docs/rules.md

@@ -55,6 +55,7 @@ These rules relate to better ways of doing things to help you avoid problems:
 | [svelte/no-at-debug-tags](./rules/no-at-debug-tags.md)                                   | disallow the use of `{@debug}`                                                                                                            | :star:   |
 | [svelte/no-ignored-unsubscribe](./rules/no-ignored-unsubscribe.md)                       | disallow ignoring the unsubscribe method returned by the `subscribe()` on Svelte stores.                                                  |          |
 | [svelte/no-immutable-reactive-statements](./rules/no-immutable-reactive-statements.md)   | disallow reactive statements that don't reference reactive values.                                                                        |          |
+| [svelte/no-inline-styles](./rules/no-inline-styles.md)                                   | disallow attributes and directives that produce inline styles                                                                             |          |
 | [svelte/no-reactive-functions](./rules/no-reactive-functions.md)                         | it's not necessary to define functions in reactive statements                                                                             | :bulb:   |
 | [svelte/no-reactive-literals](./rules/no-reactive-literals.md)                           | don't assign literal values in reactive statements                                                                                        | :bulb:   |
 | [svelte/no-unused-class-name](./rules/no-unused-class-name.md)                           | disallow the use of a class in the template without a corresponding style                                                                 |          |

docs/rules/no-inline-styles.md

@@ -0,0 +1,69 @@
+---
+pageClass: 'rule-details'
+sidebarDepth: 0
+title: 'svelte/no-inline-styles'
+description: 'disallow attributes and directives that produce inline styles'
+---
+
+# svelte/no-inline-styles
+
+> disallow attributes and directives that produce inline styles
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+
+## :book: Rule Details
+
+This rule reports all attributes and directives that would compile to inline styles. This is mainly useful when adding Content Security Policy to your app, as having inline styles requires the `style-src: 'unsafe-inline'` directive, which is generally discouraged and unsafe.
+
+<ESLintCodeBlock>
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint svelte/no-inline-styles: "error" */
+
+  import { fade } from 'svelte/transition';
+
+  export let classTwo;
+  export let blockDisplay;
+</script>
+
+<!-- ✓ GOOD -->
+<span class="one">Hello World!</span>
+
+<span class:two={classTwo}>Hello World!</span>
+
+<!-- ✗ BAD -->
+<span style="display: block;">Hello World!</span>
+
+<span style:display={blockDisplay ? 'block' : 'inline'}>Hello World!</span>
+
+<span transition:fade>Hello World!</span>
+```
+
+</ESLintCodeBlock>
+
+## :wrench: Options
+
+```json
+{
+  "svelte/no-inline-styles": [
+    "error",
+    {
+      "allowTransitions": false
+    }
+  ]
+}
+```
+
+- `allowTransitions` ... Most svelte transitions (including the built-in ones) use inline styles. However, it is theoretically possible to only use transitions that don't (see this [issue](https://github.com/sveltejs/svelte/issues/6662) about removing inline styles from built-in transitions). This option allows transitions to be used in such cases. Default `false`.
+
+## :books: Further Reading
+
+- [CSP documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/src/rules/no-inline-styles.ts)
+- [Test source](https://github.com/sveltejs/eslint-plugin-svelte/blob/main/tests/src/rules/no-inline-styles.ts)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-svelte",
-  "version": "2.34.0",
+  "version": "2.34.1",
   "description": "ESLint plugin for Svelte using AST",
   "repository": "git+https://github.com/sveltejs/eslint-plugin-svelte.git",
   "homepage": "https://sveltejs.github.io/eslint-plugin-svelte",
@@ -163,7 +163,7 @@
     "source-map-js": "^1.0.2",
     "stylelint": "^15.0.0",
     "stylelint-config-standard": "^34.0.0",
-    "stylus": "^0.60.0",
+    "stylus": "^0.61.0",
     "svelte": "^4.0.0",
     "svelte-adapter-ghpages": "0.1.0",
     "svelte-i18n": "^4.0.0",

src/meta.ts

@@ -2,4 +2,4 @@
 // This file has been automatically generated,
 // in order to update its content execute "pnpm run update"
 export const name = 'eslint-plugin-svelte' as const;
-export const version = '2.34.0' as const;
+export const version = '2.34.1' as const;

src/rules/no-inline-styles.ts

@@ -0,0 +1,53 @@
+import { createRule } from '../utils';
+
+export default createRule('no-inline-styles', {
+	meta: {
+		docs: {
+			description: 'disallow attributes and directives that produce inline styles',
+			category: 'Best Practices',
+			recommended: false
+		},
+		schema: [
+			{
+				type: 'object',
+				properties: {
+					allowTransitions: {
+						type: 'boolean'
+					}
+				},
+				additionalProperties: false
+			}
+		],
+		messages: {
+			hasStyleAttribute: 'Found disallowed style attribute.',
+			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') {
+					return;
+				}
+				for (const attribute of node.startTag.attributes) {
+					if (attribute.type === 'SvelteStyleDirective') {
+						context.report({ loc: attribute.loc, messageId: 'hasStyleDirective' });
+					}
+					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' });
+					}
+				}
+			}
+		};
+	}
+});

src/shared/svelte-compile-warns/index.ts

@@ -15,7 +15,7 @@ import { transform as transformWithStylus } from './transform/stylus';
 import type { IgnoreItem } from './ignore-comment';
 import { getSvelteIgnoreItems } from './ignore-comment';
 import { extractLeadingComments } from './extract-leading-comments';
-import { getLangValue } from '../../utils/ast-utils';
+import { findAttribute, getLangValue } from '../../utils/ast-utils';
 import path from 'path';
 import fs from 'fs';
 import semver from 'semver';
@@ -116,7 +116,7 @@ function getSvelteCompileWarningsWithoutCache(context: RuleContext): SvelteCompi
 	transformResults.push(...transformScripts(context, text));
 
 	if (!transformResults.length) {
-		const warnings = getWarningsFromCode(text);
+		const warnings = getWarningsFromCode(text, context);
 		return {
 			...processIgnore(
 				warnings.warnings,
@@ -297,7 +297,7 @@ function getSvelteCompileWarningsWithoutCache(context: RuleContext): SvelteCompi
 	}
 
 	const code = remapContext.postprocess();
-	const baseWarnings = getWarningsFromCode(code);
+	const baseWarnings = getWarningsFromCode(code, context);
 
 	const warnings: Warning[] = [];
 	for (const warn of baseWarnings.warnings) {
@@ -402,17 +402,37 @@ function* transformScripts(context: RuleContext, text: string) {
 	}
 }
 
+function hasTagOption(program: AST.SvelteProgram) {
+	return program.body.some((body) => {
+		if (body.type !== 'SvelteElement' || body.kind !== 'special') {
+			return false;
+		}
+		if (body.name.name !== 'svelte:options') {
+			return false;
+		}
+
+		return Boolean(findAttribute(body, 'tag'));
+	});
+}
+
 /**
  * Get compile warnings
  */
-function getWarningsFromCode(code: string): {
+function getWarningsFromCode(
+	code: string,
+	context: RuleContext
+): {
 	warnings: Warning[];
 	kind: 'warn' | 'error';
 } {
 	try {
 		const result = compiler.compile(code, {
 			generate: false,
-			...(semver.satisfies(compiler.VERSION, '>=4.0.0-0') ? { customElement: true } : {})
+			...(semver.satisfies(compiler.VERSION, '>=4.0.0-0')
+				? { customElement: true }
+				: hasTagOption(context.getSourceCode().ast)
+				? { customElement: true }
+				: {})
 		});
 
 		return { warnings: result.warnings as Warning[], kind: 'warn' };

src/utils/rules.ts

@@ -29,6 +29,7 @@ import noExportLoadInSvelteModuleInKitPages from '../rules/no-export-load-in-sve
 import noExtraReactiveCurlies from '../rules/no-extra-reactive-curlies';
 import noIgnoredUnsubscribe from '../rules/no-ignored-unsubscribe';
 import noImmutableReactiveStatements from '../rules/no-immutable-reactive-statements';
+import noInlineStyles from '../rules/no-inline-styles';
 import noInnerDeclarations from '../rules/no-inner-declarations';
 import noNotFunctionHandler from '../rules/no-not-function-handler';
 import noObjectInTextMustaches from '../rules/no-object-in-text-mustaches';
@@ -91,6 +92,7 @@ export const rules = [
 	noExtraReactiveCurlies,
 	noIgnoredUnsubscribe,
 	noImmutableReactiveStatements,
+	noInlineStyles,
 	noInnerDeclarations,
 	noNotFunctionHandler,
 	noObjectInTextMustaches,

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

@@ -0,0 +1,4 @@
+- message: Found disallowed style attribute.
+  line: 1
+  column: 7
+  suggestions: null

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

@@ -0,0 +1 @@
+<span style="display: block;">Hello World!</span>

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

@@ -0,0 +1,4 @@
+- message: Found disallowed style directive.
+  line: 5
+  column: 7
+  suggestions: null

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

@@ -0,0 +1,5 @@
+<script>
+	export let block;
+</script>
+
+<span style:display={block ? 'block' : 'inline-block'}>Hello World!</span>

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>

tests/fixtures/rules/no-inline-styles/valid/class-attribute01-input.svelte

@@ -0,0 +1 @@
+<span class="my-class">Hello World!</span>

tests/fixtures/rules/no-inline-styles/valid/class-directive01-input.svelte

@@ -0,0 +1 @@
+<span class:one={true}>Hello World!</span>

tests/fixtures/rules/valid-compile/valid/svelte3-options-custom-element-input.svelte

@@ -0,0 +1 @@
+<svelte:options tag="my-component" />

tests/fixtures/rules/valid-compile/valid/svelte3-options-custom-element-requirements.json

@@ -0,0 +1,3 @@
+{
+	"svelte": "^3.0.0"
+}

tests/src/rules/no-inline-styles.ts

@@ -0,0 +1,12 @@
+import { RuleTester } from 'eslint';
+import rule from '../../../src/rules/no-inline-styles';
+import { loadTestCases } from '../../utils/utils';
+
+const tester = new RuleTester({
+	parserOptions: {
+		ecmaVersion: 2020,
+		sourceType: 'module'
+	}
+});
+
+tester.run('no-inline-styles', rule as any, loadTestCases('no-inline-styles'));