Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: added the
no-inline-styles
rule (#608)
- Loading branch information
1 parent
318b9bf
commit ff28fd3
Showing
17 changed files
with
188 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'eslint-plugin-svelte': minor | ||
--- | ||
|
||
feat: added the no-inline-styles rule |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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' }); | ||
} | ||
} | ||
} | ||
}; | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
tests/fixtures/rules/no-inline-styles/invalid/style-attribute01-errors.yaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
- message: Found disallowed style attribute. | ||
line: 1 | ||
column: 7 | ||
suggestions: null |
1 change: 1 addition & 0 deletions
1
tests/fixtures/rules/no-inline-styles/invalid/style-attribute01-input.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<span style="display: block;">Hello World!</span> |
4 changes: 4 additions & 0 deletions
4
tests/fixtures/rules/no-inline-styles/invalid/style-directive01-errors.yaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
- message: Found disallowed style directive. | ||
line: 5 | ||
column: 7 | ||
suggestions: null |
5 changes: 5 additions & 0 deletions
5
tests/fixtures/rules/no-inline-styles/invalid/style-directive01-input.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
<script> | ||
export let block; | ||
</script> | ||
|
||
<span style:display={block ? 'block' : 'inline-block'}>Hello World!</span> |
8 changes: 8 additions & 0 deletions
8
tests/fixtures/rules/no-inline-styles/invalid/transition01-errors.yaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,8 @@ | ||
- message: Found disallowed transition. | ||
line: 5 | ||
column: 7 | ||
suggestions: null | ||
- message: Found disallowed transition. | ||
line: 7 | ||
column: 7 | ||
suggestions: null |
7 changes: 7 additions & 0 deletions
7
tests/fixtures/rules/no-inline-styles/invalid/transition01-input.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
7 changes: 7 additions & 0 deletions
7
tests/fixtures/rules/no-inline-styles/valid/allowed-transitions/_config.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{ | ||
"options": [ | ||
{ | ||
"allowTransitions": true | ||
} | ||
] | ||
} |
7 changes: 7 additions & 0 deletions
7
tests/fixtures/rules/no-inline-styles/valid/allowed-transitions/transition01-input.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
1 change: 1 addition & 0 deletions
1
tests/fixtures/rules/no-inline-styles/valid/class-attribute01-input.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<span class="my-class">Hello World!</span> |
1 change: 1 addition & 0 deletions
1
tests/fixtures/rules/no-inline-styles/valid/class-directive01-input.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<span class:one={true}>Hello World!</span> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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')); |