Skip to content

Commit

Permalink
Add property-no-unknown rule
Browse files Browse the repository at this point in the history
  • Loading branch information
pamelalozano16 committed Aug 25, 2023
1 parent 9aa4449 commit 0347303
Show file tree
Hide file tree
Showing 7 changed files with 728 additions and 3 deletions.
6 changes: 6 additions & 0 deletions CHANGELOG.md
@@ -1,3 +1,9 @@
# 5.2.0

- Added: `property-no-unknown` rule to disallow unknown properties. (#490).

**Full Changelog**: https://github.com/stylelint-scss/stylelint-scss/compare/v5.2.0...v5.1.0

# 5.1.0

- Added: `function-disallowed-list` rule support to ban specific built-in functions (#422, #844).
Expand Down
5 changes: 2 additions & 3 deletions README.md
Expand Up @@ -30,9 +30,7 @@ Create the `.stylelintrc.json` config file (or open the existing one), add `styl

```jsonc
{
"plugins": [
"stylelint-scss"
],
"plugins": ["stylelint-scss"],
"rules": {
// recommended rules
"at-rule-no-unknown": null,
Expand Down Expand Up @@ -135,6 +133,7 @@ Please also see the [example configs](./docs/examples/) for special cases.

- [`declaration-nested-properties`](./src/rules/declaration-nested-properties/README.md): Require or disallow properties with `-` in their names to be in a form of a nested group.
- [`declaration-nested-properties-no-divided-groups`](./src/rules/declaration-nested-properties-no-divided-groups/README.md): Disallow nested properties of the same "namespace" to be divided into multiple groups.
- [`property-no-unknown`](./src/rules/property-no-unknown/README.md): Disallow unknown properties, including [nested properties](https://sass-lang.com/documentation/style-rules/declarations/#nesting).

### Dimension

Expand Down
1 change: 1 addition & 0 deletions src/rules/index.js
Expand Up @@ -58,6 +58,7 @@ const rules = {
"operator-no-unspaced": require("./operator-no-unspaced"),
"partial-no-import": require("./partial-no-import"),
"percent-placeholder-pattern": require("./percent-placeholder-pattern"),
"property-no-unknown": require("./property-no-unknown"),
"selector-nest-combinators": require("./selector-nest-combinators"),
"selector-no-redundant-nesting-selector": require("./selector-no-redundant-nesting-selector"),
"selector-no-union-class-name": require("./selector-no-union-class-name")
Expand Down
207 changes: 207 additions & 0 deletions src/rules/property-no-unknown/README.md
@@ -0,0 +1,207 @@
# property-no-unknown

Disallow unknown properties.

<!-- prettier-ignore -->
```scss
a { height: 100%; }
/** ↑
* This property */
```

This rule considers properties defined in the [CSS Specifications and browser specific properties](https://github.com/betit/known-css-properties#source) to be known.

This rule ignores:

- variables (`$sass`, `@less`, `--custom-property`)
- vendor-prefixed properties (e.g., `-moz-align-self`, `-webkit-align-self`)

Use option `checkPrefixed` described below to turn on checking of vendor-prefixed properties.

The [`message` secondary option](../../../docs/user-guide/configure.md#message) can accept the arguments of this rule.

## Options

### `true`

The following patterns are considered problems:

<!-- prettier-ignore -->
```scss
a {
colr: blue;
}
```

<!-- prettier-ignore -->
```scss
a {
my-property: 1;
}
```

<!-- prettier-ignore -->
```scss
a {
font: {
stuff: bold;
}
}
```

The following patterns are _not_ considered problems:

<!-- prettier-ignore -->
```scss
a {
color: green;
}
```

<!-- prettier-ignore -->
```scss
a {
fill: black;
}
```

<!-- prettier-ignore -->
```scss
a {
-moz-align-self: center;
}
```

<!-- prettier-ignore -->
```scss
a {
-webkit-align-self: center;
}
```

<!-- prettier-ignore -->
```scss
a {
align-self: center;
}
```

<!-- prettier-ignore -->
```scss
a {
font: {
weight: bold;
}
}
```

## Optional secondary options

### `ignoreProperties: ["/regex/", /regex/, "string"]`

Given:

```json
["/^my-/", "custom"]
```

The following patterns are _not_ considered problems:

<!-- prettier-ignore -->
```scss
a {
my-property: 10px;
}
```

<!-- prettier-ignore -->
```scss
a {
my-other-property: 10px;
}
```

<!-- prettier-ignore -->
```scss
a {
custom: 10px;
}
```

### `ignoreSelectors: ["/regex/", /regex/, "string"]`

Skips checking properties of the given selectors against this rule.

Given:

```json
[":root"]
```

The following patterns are _not_ considered problems:

<!-- prettier-ignore -->
```scss
:root {
my-property: blue;
}
```

### `ignoreAtRules: ["/regex/", /regex/, "string"]`

Ignores properties nested within specified at-rules.

Given:

```json
["supports"]
```

The following patterns are _not_ considered problems:

<!-- prettier-ignore -->
```scss
@supports (display: grid) {
a {
my-property: 1;
}
}
```

### `checkPrefixed: true | false` (default: `false`)

If `true`, this rule will check vendor-prefixed properties.

For example with `true`:

The following patterns are _not_ considered problems:

<!-- prettier-ignore -->
```scss
a {
-webkit-overflow-scrolling: auto;
}
```

<!-- prettier-ignore -->
```scss
a {
-moz-box-flex: 0;
}
```

The following patterns are considered problems:

<!-- prettier-ignore -->
```scss
a {
-moz-align-self: center;
}
```

<!-- prettier-ignore -->
```scss
a {
-moz-overflow-scrolling: center;
}
```

0 comments on commit 0347303

Please sign in to comment.