No Misspelled Properties

Rule no-misspelled-properties will enforce the correct spelling of CSS properties and prevent the use of unknown CSS properties.

Options

• extra-properties: [array of extra properties to check spelling against] (defaults to empty array []).

Examples

When enabled, the following are disallowed:

// incorrect spelling
.foo {
  borders: 0;
}

// unknown property
.bar {
  border-right-left: 0;
}

// incorrect spelling
.baz {
  -webkit-transit1on: width 2s;
}

When extra-properties contains a property value of transit1on as show below:

no-misspelled-properties:
  - 1
  -
    'extra-properties':
      - 'transit1on'

The following would now be allowed:

// incorrect spelling now whitelisted
.baz {
  -webkit-transit1on: width 2s;
}

// incorrect spelling now whitelisted
.quz {
  transit1on: width 2s;
}

While the following would remain disallowed:

// incorrect spelling
.foo {
  borders: 0;
}

// unknown property
.bar {
  border-right-left: 0;
}

Space Around Operator

Rule space-around-operator will enforce whether or not a single space should be included before and after the following operators: +, -, /, *, %, <, > ==, !=, <= and >=.

Options

• include: true/false (defaults to true)

Examples

When include: true, the following are allowed. When include: false, the following are disallowed:

.foo {
  margin: 5px + 15px;
}

$foo: 1;
$bar: 3;

.foo {
  margin: $foo + $bar + 'px';
}

$foo: 1 + 1;
$bar: 2 - 1;

@if $foo == $bar {
  $baz: 1;
}

@if ($foo != $bar) {
  $baz: 1;
}

When include: false, the following are allowed. When include: true, the following are disallowed:

.foo {
  margin: 5px+15px;
}

$foo: 1;
$bar: 3;

.foo {
  margin: $foo+$bar+'px';
}

$foo: 1+1;
$bar: 2-1;

@if $foo==$bar {
  $baz: 1;
}

@if ($foo!=$bar) {
  $baz: 1;
}

When include: true or include: false multiple spaces around operators are disallowed:

.foo {
  margin: 5px   +       15px;
}

$foo: 1      +1;
$bar: 2-     1;