Duplicate Property Detection

Duplicate property detection prevents overrides from happening within the same ruleset. Overrides of this nature are generally more accidental than intensional, for example:

<section className="hero">
  background: ivory;
  display: flex;
  background: coral;
</section>

In the example above the background property has been defined twice within the same ruleset. A compile time error catches the duplicate property and throws the following:

It should be noted that if a property partially overrides another property in the same ruleset a partial override error is thrown:

<h1 className="heading">
  margin: 0px;
  color: dimgray;
  margin-bottom: 10px;
</h1>

In the example above both margin and margin-bottom have been used. Since the longhand property margin-bottom overrides the shorthand property margin a partial override error is thrown:

More information on partial overrides can be found here.