Commit 3602be73 authored by David Sveningsson's avatar David Sveningsson

fix(rules): better and more contextual messages for `deprecated`

parent 7fbf433f
......@@ -74,7 +74,9 @@ Array [
},
Object {
"column": 4,
"context": undefined,
"context": Object {
"tagName": "my-deprecated",
},
"line": 3,
"message": "<my-deprecated> is deprecated: replaced with <my-other>",
"offset": 39,
......@@ -123,7 +125,11 @@ Array [
},
Object {
"column": 6,
"context": undefined,
"context": Object {
"documentation": "\`<blink>\` has no direct replacement and blinking text is frowned upon by accessibility standards.",
"source": "non-standard",
"tagName": "blink",
},
"line": 8,
"message": "<blink> is deprecated",
"offset": 138,
......
......@@ -10,7 +10,9 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"tagName": "my-element",
},
"line": 1,
"message": "<my-element> is deprecated: replaced with <other-element>",
"offset": 1,
......@@ -34,9 +36,14 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "Use the CSS \`text-align\` or \`margin: auto\` properties instead.",
"message": "use CSS instead",
"source": "html4",
"tagName": "center",
},
"line": 1,
"message": "<center> is deprecated",
"message": "<center> is deprecated: use CSS instead",
"offset": 1,
"ruleId": "deprecated",
"selector": "center",
......@@ -45,9 +52,14 @@ Array [
},
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "Use CSS \`font-size\` property instead.",
"message": "use CSS instead",
"source": "html5",
"tagName": "big",
},
"line": 2,
"message": "<big> is deprecated",
"message": "<big> is deprecated: use CSS instead",
"offset": 22,
"ruleId": "deprecated",
"selector": "big",
......
......@@ -32,7 +32,7 @@ export interface MetaElement {
interactive: boolean | PropertyExpression;
/* element properties */
deprecated: boolean | string;
deprecated: boolean | string | DeprecatedElement;
foreign: boolean;
void: boolean;
transparent: boolean;
......@@ -101,8 +101,35 @@ The available evaluators are:
### `deprecated`
If true the element will trigger the [deprecated](/rules/deprecated.html) rule
when used. Can optionally be set to a string which will be displayed as well.
If truthy the element will trigger the [deprecated](/rules/deprecated.html) rule
when used.
Can be set to `true`, a string or an object.
```typescript
interface DeprecatedElement {
message?: string;
documentation?: string;
source?: string;
}
```
Setting `true` is the same as the empty object.
Setting a string is the same as setting `message` to the string.
If the `message` property is set the text will be displayed in the error message.
If the `documentation` property is set the text will be rendered as markdown and shown in the contextual documentation shown by editors.
`$tagname` can be used as a placeholder in the text.
If the `source` property is set it is used to help the end-user to understand when and by what it is deprecated.
It can be set to:
- HTML major revision, e.g. `html5` or `html4`.
- HTML minor revision, e.g. `html53` or `html32`.
- `whatwg`: WHATWG Living Standard.
- `non-standard`: non-standard element implemented only by one or few browsers.
- your library or application name.
### `foreign`
......
......@@ -125,9 +125,14 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "\`<abbr>\` can be used as a replacement.",
"message": "use <abbr> instead",
"source": "html5",
"tagName": "acronym",
},
"line": 2,
"message": "<acronym> is deprecated",
"message": "<acronym> is deprecated: use <abbr> instead",
"offset": 32,
"ruleId": "deprecated",
"selector": "acronym",
......@@ -235,7 +240,10 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"source": "html5",
"tagName": "applet",
},
"line": 2,
"message": "<applet> is deprecated",
"offset": 32,
......@@ -622,9 +630,14 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "Use CSS \`font-size\` property instead.",
"message": "use CSS instead",
"source": "html4",
"tagName": "basefont",
},
"line": 2,
"message": "<basefont> is deprecated",
"message": "<basefont> is deprecated: use CSS instead",
"offset": 32,
"ruleId": "deprecated",
"selector": "basefont",
......@@ -706,9 +719,14 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "Use the \`<audio>\` element instead but consider accessibility concerns with autoplaying sounds.",
"message": "use <audio> instead",
"source": "non-standard",
"tagName": "bgsound",
},
"line": 2,
"message": "<bgsound> is deprecated",
"message": "<bgsound> is deprecated: use <audio> instead",
"offset": 32,
"ruleId": "deprecated",
"selector": "bgsound",
......@@ -734,9 +752,14 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "Use CSS \`font-size\` property instead.",
"message": "use CSS instead",
"source": "html5",
"tagName": "big",
},
"line": 2,
"message": "<big> is deprecated",
"message": "<big> is deprecated: use CSS instead",
"offset": 32,
"ruleId": "deprecated",
"selector": "big",
......@@ -762,7 +785,11 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "\`<blink>\` has no direct replacement and blinking text is frowned upon by accessibility standards.",
"source": "non-standard",
"tagName": "blink",
},
"line": 2,
"message": "<blink> is deprecated",
"offset": 32,
......@@ -1060,9 +1087,14 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "Use the CSS \`text-align\` or \`margin: auto\` properties instead.",
"message": "use CSS instead",
"source": "html4",
"tagName": "center",
},
"line": 2,
"message": "<center> is deprecated",
"message": "<center> is deprecated: use CSS instead",
"offset": 32,
"ruleId": "deprecated",
"selector": "center",
......@@ -1450,7 +1482,11 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "The non-standard \`<dir>\` element has no direct replacement but MDN recommends replacing with \`<ul>\` and CSS.",
"source": "html4",
"tagName": "dir",
},
"line": 2,
"message": "<dir> is deprecated",
"offset": 32,
......@@ -1841,9 +1877,14 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "Use CSS font properties instead.",
"message": "use CSS instead",
"source": "html4",
"tagName": "font",
},
"line": 2,
"message": "<font> is deprecated",
"message": "<font> is deprecated: use CSS instead",
"offset": 32,
"ruleId": "deprecated",
"selector": "font",
......@@ -1969,7 +2010,11 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "The \`<frame>\` element can be replaced with the \`<iframe>\` element but a better solution is to remove usage of frames entirely.",
"source": "html5",
"tagName": "frame",
},
"line": 2,
"message": "<frame> is deprecated",
"offset": 32,
......@@ -2015,7 +2060,11 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "The \`<frameset>\` element can be replaced with the \`<iframe>\` element but a better solution is to remove usage of frames entirely.",
"source": "html5",
"tagName": "frameset",
},
"line": 2,
"message": "<frameset> is deprecated",
"offset": 32,
......@@ -2559,7 +2608,9 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"tagName": "hgroup",
},
"line": 2,
"message": "<hgroup> is deprecated",
"offset": 32,
......@@ -3252,7 +3303,10 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"source": "html4",
"tagName": "isindex",
},
"line": 2,
"message": "<isindex> is deprecated",
"offset": 32,
......@@ -3564,7 +3618,10 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"source": "html32",
"tagName": "listing",
},
"line": 2,
"message": "<listing> is deprecated",
"offset": 32,
......@@ -3628,7 +3685,11 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "Marked as obsolete by both W3C and WHATWG standards but still implemented in most browsers. Animated text should be avoided for accessibility reasons as well.",
"source": "html5",
"tagName": "marquee",
},
"line": 2,
"message": "<marquee> is deprecated",
"offset": 32,
......@@ -3878,9 +3939,14 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "Use CSS columns instead.",
"message": "use CSS instead",
"source": "html5",
"tagName": "multicol",
},
"line": 2,
"message": "<multicol> is deprecated",
"message": "<multicol> is deprecated: use CSS instead",
"offset": 32,
"ruleId": "deprecated",
"selector": "multicol",
......@@ -3936,7 +4002,10 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"source": "html32",
"tagName": "nextid",
},
"line": 2,
"message": "<nextid> is deprecated",
"offset": 32,
......@@ -3964,9 +4033,14 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "Use CSS \`white-space\` property instead.",
"message": "use CSS instead",
"source": "non-standard",
"tagName": "nobr",
},
"line": 2,
"message": "<nobr> is deprecated",
"message": "<nobr> is deprecated: use CSS instead",
"offset": 32,
"ruleId": "deprecated",
"selector": "nobr",
......@@ -3992,7 +4066,10 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"source": "non-standard",
"tagName": "noembed",
},
"line": 2,
"message": "<noembed> is deprecated",
"offset": 32,
......@@ -4020,7 +4097,10 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"source": "html5",
"tagName": "noframes",
},
"line": 2,
"message": "<noframes> is deprecated",
"offset": 32,
......@@ -4477,9 +4557,14 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "Use the \`<pre>\` element or use CSS to set a monospace font.",
"message": "use <pre> or CSS instead",
"source": "html2",
"tagName": "plaintext",
},
"line": 2,
"message": "<plaintext> is deprecated",
"message": "<plaintext> is deprecated: use <pre> or CSS instead",
"offset": 32,
"ruleId": "deprecated",
"selector": "plaintext",
......@@ -5137,9 +5222,14 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "Use CSS margin or padding instead.",
"message": "use CSS instead",
"source": "non-standard",
"tagName": "spacer",
},
"line": 2,
"message": "<spacer> is deprecated",
"message": "<spacer> is deprecated: use CSS instead",
"offset": 32,
"ruleId": "deprecated",
"selector": "spacer",
......@@ -5193,9 +5283,14 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "Use the \`<del>\` or \`<s>\` element instead.",
"message": "use <del> or <s> instead",
"source": "html5",
"tagName": "strike",
},
"line": 2,
"message": "<strike> is deprecated",
"message": "<strike> is deprecated: use <del> or <s> instead",
"offset": 32,
"ruleId": "deprecated",
"selector": "strike",
......@@ -6066,7 +6161,11 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "Use a more semantically correct element such as \`<code>\`, \`<var>\` or \`<pre>\`.",
"source": "html4",
"tagName": "tt",
},
"line": 2,
"message": "<tt> is deprecated",
"offset": 32,
......@@ -6336,7 +6435,11 @@ Array [
"messages": Array [
Object {
"column": 2,
"context": undefined,
"context": Object {
"documentation": "Use \`<pre>\` or \`<code>\` and escape content using HTML entities instead.",
"source": "html32",
"tagName": "xmp",
},
"line": 2,
"message": "<xmp> is deprecated",
"offset": 32,
......
......@@ -39,7 +39,11 @@
},
"acronym": {
"deprecated": true
"deprecated": {
"message": "use <abbr> instead",
"documentation": "`<abbr>` can be used as a replacement.",
"source": "html5"
}
},
"address": {
......@@ -51,7 +55,9 @@
},
"applet": {
"deprecated": true,
"deprecated": {
"source": "html5"
},
"deprecatedAttributes": ["datasrc", "datafld"]
},
......@@ -106,7 +112,11 @@
},
"basefont": {
"deprecated": true
"deprecated": {
"message": "use CSS instead",
"documentation": "Use CSS `font-size` property instead.",
"source": "html4"
}
},
"bdi": {
......@@ -122,15 +132,26 @@
},
"bgsound": {
"deprecated": true
"deprecated": {
"message": "use <audio> instead",
"documentation": "Use the `<audio>` element instead but consider accessibility concerns with autoplaying sounds.",
"source": "non-standard"
}
},
"big": {
"deprecated": true
"deprecated": {
"message": "use CSS instead",
"documentation": "Use CSS `font-size` property instead.",
"source": "html5"
}
},
"blink": {
"deprecated": true
"deprecated": {
"documentation": "`<blink>` has no direct replacement and blinking text is frowned upon by accessibility standards.",
"source": "non-standard"
}
},
"blockquote": {
......@@ -192,7 +213,11 @@
},
"center": {
"deprecated": true
"deprecated": {
"message": "use CSS instead",
"documentation": "Use the CSS `text-align` or `margin: auto` properties instead.",
"source": "html4"
}
},
"cite": {
......@@ -255,7 +280,10 @@
},
"dir": {
"deprecated": true
"deprecated": {
"documentation": "The non-standard `<dir>` element has no direct replacement but MDN recommends replacing with `<ul>` and CSS.",
"source": "html4"
}
},
"div": {
......@@ -318,7 +346,11 @@
},
"font": {
"deprecated": true
"deprecated": {
"message": "use CSS instead",
"documentation": "Use CSS font properties instead.",
"source": "html4"
}
},
"footer": {
......@@ -341,13 +373,19 @@
},
"frame": {
"deprecated": true,
"deprecated": {
"documentation": "The `<frame>` element can be replaced with the `<iframe>` element but a better solution is to remove usage of frames entirely.",
"source": "html5"
},
"deprecatedAttributes": ["datasrc", "datafld"],
"requiredAttributes": ["title"]
},
"frameset": {
"deprecated": true
"deprecated": {
"documentation": "The `<frameset>` element can be replaced with the `<iframe>` element but a better solution is to remove usage of frames entirely.",
"source": "html5"
}
},
"h1": {
......@@ -547,7 +585,9 @@
},
"isindex": {
"deprecated": true
"deprecated": {
"source": "html4"
}
},
"kbd": {
......@@ -596,7 +636,9 @@
},
"listing": {
"deprecated": true
"deprecated": {
"source": "html32"
}
},
"main": {
......@@ -616,7 +658,10 @@
},
"marquee": {
"deprecated": true,
"deprecated": {
"documentation": "Marked as obsolete by both W3C and WHATWG standards but still implemented in most browsers. Animated text should be avoided for accessibility reasons as well.",
"source": "html5"
},
"deprecatedAttributes": ["datasrc", "datafld", "dataformatas"]
},
......@@ -647,7 +692,11 @@
},
"multicol": {
"deprecated": true
"deprecated": {
"message": "use CSS instead",
"documentation": "Use CSS columns instead.",
"source": "html5"