Add no-unknown-style-directive-property rule (#128)

Author: ota-meshi

README.md

@@ -248,6 +248,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | [@ota-meshi/svelte/no-not-function-handler](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-not-function-handler/) | disallow use of not function in event handler | :star: |
 | [@ota-meshi/svelte/no-object-in-text-mustaches](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-object-in-text-mustaches/) | disallow objects in text mustache interpolation | :star: |
 | [@ota-meshi/svelte/no-shorthand-style-property-overrides](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-shorthand-style-property-overrides/) | disallow shorthand style properties that override related longhand properties | :star: |
+| [@ota-meshi/svelte/no-unknown-style-directive-property](https://ota-meshi.github.io/eslint-plugin-svelte/rules/no-unknown-style-directive-property/) | disallow unknown `style:property` | :star: |
 | [@ota-meshi/svelte/valid-compile](https://ota-meshi.github.io/eslint-plugin-svelte/rules/valid-compile/) | disallow warnings when compiling. | :star: |
 
 ## Security Vulnerability

docs/rules.md

@@ -21,6 +21,7 @@ These rules relate to possible syntax or logic errors in Svelte code:
 | [@ota-meshi/svelte/no-not-function-handler](./rules/no-not-function-handler.md) | disallow use of not function in event handler | :star: |
 | [@ota-meshi/svelte/no-object-in-text-mustaches](./rules/no-object-in-text-mustaches.md) | disallow objects in text mustache interpolation | :star: |
 | [@ota-meshi/svelte/no-shorthand-style-property-overrides](./rules/no-shorthand-style-property-overrides.md) | disallow shorthand style properties that override related longhand properties | :star: |
+| [@ota-meshi/svelte/no-unknown-style-directive-property](./rules/no-unknown-style-directive-property.md) | disallow unknown `style:property` | :star: |
 | [@ota-meshi/svelte/valid-compile](./rules/valid-compile.md) | disallow warnings when compiling. | :star: |
 
 ## Security Vulnerability

docs/rules/no-shorthand-style-property-overrides.md

@@ -45,6 +45,12 @@ This rule was inspired by [Stylelint's declaration-block-no-shorthand-property-o
 
 Nothing.
 
+## :books: Further reading
+
+- [Stylelint - declaration-block-no-shorthand-property-overrides]
+
+[stylelint - declaration-block-no-shorthand-property-overrides]: https://stylelint.io/user-guide/rules/list/declaration-block-no-shorthand-property-overrides/
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/src/rules/no-shorthand-style-property-overrides.ts)

docs/rules/no-unknown-style-directive-property.md

@@ -0,0 +1,71 @@
+---
+pageClass: "rule-details"
+sidebarDepth: 0
+title: "@ota-meshi/svelte/no-unknown-style-directive-property"
+description: "disallow unknown `style:property`"
+---
+
+# @ota-meshi/svelte/no-unknown-style-directive-property
+
+> disallow unknown `style:property`
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+- :gear: This rule is included in `"plugin:@ota-meshi/svelte/recommended"`.
+
+## :book: Rule Details
+
+This rule reports an unknown CSS property in style directive.
+
+This rule was inspired by [Stylelint's property-no-unknown rule](https://stylelint.io/user-guide/rules/list/property-no-unknown/).
+
+Note that this rule only checks the `style:property` directive. If you want to check inside the `style` attribute and `style` element, consider introducing [Stylelint](https://stylelint.io/).
+
+<ESLintCodeBlock>
+
+<!--eslint-skip-->
+
+```svelte
+<script>
+  /* eslint @ota-meshi/svelte/no-unknown-style-directive-property: "error" */
+  let red = "red"
+  let color = red
+</script>
+
+<!-- ✓ GOOD -->
+<div style:color={red}>...</div>
+<div style:color>...</div>
+
+<!-- ✗ BAD -->
+<div style:unknown-color={red}>...</div>
+<div style:red>...</div>
+```
+
+</ESLintCodeBlock>
+
+## :wrench: Options
+
+```json
+{
+  "@ota-meshi/svelte/no-unknown-style-directive-property": [
+    "error",
+    {
+      "ignoreProperties": [],
+      "ignorePrefixed": true
+    }
+  ]
+}
+```
+
+- `ignoreProperties` ... You can specify property names or patterns that you want to ignore from checking.
+- `ignorePrefixed` ... If `true`, ignores properties with vendor prefix from checking. Default is `true`.
+
+## :books: Further reading
+
+- [Stylelint - property-no-unknown]
+
+[stylelint - property-no-unknown]: https://stylelint.io/user-guide/rules/list/property-no-unknown/
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/src/rules/no-unknown-style-directive-property.ts)
+- [Test source](https://github.com/ota-meshi/eslint-plugin-svelte/blob/main/tests/src/rules/no-unknown-style-directive-property.ts)

src/configs/recommended.ts

@@ -16,6 +16,7 @@ export = {
     "@ota-meshi/svelte/no-not-function-handler": "error",
     "@ota-meshi/svelte/no-object-in-text-mustaches": "error",
     "@ota-meshi/svelte/no-shorthand-style-property-overrides": "error",
+    "@ota-meshi/svelte/no-unknown-style-directive-property": "error",
     "@ota-meshi/svelte/no-unused-svelte-ignore": "error",
     "@ota-meshi/svelte/system": "error",
     "@ota-meshi/svelte/valid-compile": "error",

src/rules/no-unknown-style-directive-property.ts

@@ -0,0 +1,69 @@
+import { createRule } from "../utils"
+import { all as allKnownCSSProperties } from "known-css-properties"
+import { toRegExp } from "../utils/regexp"
+import { hasVendorPrefix } from "../utils/css-utils"
+
+export default createRule("no-unknown-style-directive-property", {
+  meta: {
+    docs: {
+      description: "disallow unknown `style:property`",
+      category: "Possible Errors",
+      recommended: true,
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          ignoreProperties: {
+            type: "array",
+            items: {
+              type: "string",
+            },
+            uniqueItems: true,
+            minItems: 1,
+          },
+          ignorePrefixed: { type: "boolean" },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      unknown: "Unexpected unknown style directive property '{{property}}'.",
+    },
+    type: "problem",
+  },
+  create(context) {
+    const ignoreProperties = [
+      ...(context.options[0]?.ignoreProperties ?? []),
+    ].map(toRegExp)
+    const ignorePrefixed: boolean = context.options[0]?.ignorePrefixed ?? true
+    const knownProperties = new Set<string>(allKnownCSSProperties)
+
+    /** Checks whether given name is valid */
+    function validName(name: string) {
+      return (
+        name.startsWith("--") ||
+        knownProperties.has(name) ||
+        ignoreProperties.some((r) => r.test(name)) ||
+        (ignorePrefixed && hasVendorPrefix(name))
+      )
+    }
+
+    return {
+      SvelteStyleDirective(node) {
+        const prop = node.key.name
+
+        if (validName(prop.name)) {
+          return
+        }
+        context.report({
+          node: prop,
+          messageId: "unknown",
+          data: {
+            property: prop.name,
+          },
+        })
+      },
+    }
+  },
+})

src/utils/rules.ts

@@ -17,6 +17,7 @@ import noNotFunctionHandler from "../rules/no-not-function-handler"
 import noObjectInTextMustaches from "../rules/no-object-in-text-mustaches"
 import noShorthandStylePropertyOverrides from "../rules/no-shorthand-style-property-overrides"
 import noTargetBlank from "../rules/no-target-blank"
+import noUnknownStyleDirectiveProperty from "../rules/no-unknown-style-directive-property"
 import noUnusedSvelteIgnore from "../rules/no-unused-svelte-ignore"
 import noUselessMustaches from "../rules/no-useless-mustaches"
 import preferClassDirective from "../rules/prefer-class-directive"
@@ -46,6 +47,7 @@ export const rules = [
   noObjectInTextMustaches,
   noShorthandStylePropertyOverrides,
   noTargetBlank,
+  noUnknownStyleDirectiveProperty,
   noUnusedSvelteIgnore,
   noUselessMustaches,
   preferClassDirective,

tests/fixtures/rules/no-unknown-style-directive-property/invalid/ignoreProperties/_config.json

@@ -0,0 +1,3 @@
+{
+  "options": [{ "ignoreProperties": ["foo", "/^bar/"] }]
+}

tests/fixtures/rules/no-unknown-style-directive-property/invalid/ignoreProperties/test01-errors.json

@@ -0,0 +1,17 @@
+[
+  {
+    "message": "Unexpected unknown style directive property 'unknown-color'.",
+    "line": 8,
+    "column": 12
+  },
+  {
+    "message": "Unexpected unknown style directive property 'unknown'.",
+    "line": 9,
+    "column": 12
+  },
+  {
+    "message": "Unexpected unknown style directive property 'foo-bar'.",
+    "line": 15,
+    "column": 12
+  }
+]

tests/fixtures/rules/no-unknown-style-directive-property/invalid/ignoreProperties/test01-input.svelte

@@ -0,0 +1,15 @@
+<script>
+  let red = "red"
+  let unknown = red
+  let foo = red
+  let bar = red
+</script>
+
+<div style:unknown-color={red}>...</div>
+<div style:unknown>...</div>
+<div style:foo={red}>...</div>
+<div style:foo>...</div>
+<div style:bar={red}>...</div>
+<div style:bar>...</div>
+<div style:bar-foo={red}>...</div>
+<div style:foo-bar={red}>...</div>