# Compile Time Errors

Immutable styles ships with a friendly compiler that helps assist development, rather than bark at you. If the compiler finds an error, such as a CSS override the compilation process is terminated and an error is thrown. Each error is documented below including the problem code and the error thrown.

## Invalid Attribute

When an invalid attribute is used.

```jsx
<p foo="invalidAttr">
  font-size: 20px;
</p>
```

The ruleset above throws an "Invalid Attribute" compile time error:

![](https://2035066516-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSaW3lW0D0P6RRGeAif%2F-LSa_Sc70KAX92GRTBtO%2F-LSa_TRxSCHbil2tgkxR%2FUnknownAttribute.png?generation=1543614360624890\&alt=media)

## Duplicate Property

When a CSS property is defined more than once in same block.

```jsx
<h1 className="title">
  color: darkslategray;
  font-size: 20px;
  color: burlywood;
</h1>
```

The ruleset above throws a "Duplicate Property" compile time error:

![](https://2035066516-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSaW3lW0D0P6RRGeAif%2F-LSa_Sc70KAX92GRTBtO%2F-LSa_TRzX6lP0Uu7kcB4%2FDuplicateCSSProperty.png?generation=1543614360844907\&alt=media)

## Override Found

When one style overrides another style.

```jsx
<p className="child">
  color: darksalmon;
</p>,

<div className="parent">
  <p className="child">
    font-size: 10px;
    color: lightsalmon;
  </p>
</div>
```

The rulesets above throws an "Override Found" compile time error:

![](https://2035066516-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSaW3lW0D0P6RRGeAif%2F-LSa_Sc70KAX92GRTBtO%2F-LSa_TS0nrFg2LWpOgeN%2FExactOverrideFound.png?generation=1543614360583619\&alt=media)

## Partial Override Found

When one style partially overrides another style.

```jsx
<dl className="address">
  margin: 20px 10px;
</dl>,

<footer>
  <dl className="address">
    margin-left: 20px;
  </dl>
</footer>
```

The rulesets above throws a "Partial Override Found" compile time error:

![](https://2035066516-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSaW3lW0D0P6RRGeAif%2F-LSa_Sc70KAX92GRTBtO%2F-LSa_TS2xCCjOTUERBcf%2FPartialOverrideFound.png?generation=1543614360722453\&alt=media)

## Nested Media Query

When a media query is nested inside another media query.

```jsx
<footer minWidth="900">
  padding: 0 30px;

  <p minWidth="300">
    font-size: 1rem;
  </p>
</footer>
```

The ruleset above throws a "Nested Media Query" compile time error:

![](https://2035066516-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSaW3lW0D0P6RRGeAif%2F-LSa_Sc70KAX92GRTBtO%2F-LSa_TS46b4zvNEYqCdD%2FNestedMediaQuery.png?generation=1543614360478330\&alt=media)

## Element Property Mismatch

When an inheritable property is used by an invalid element type.

```jsx
<div>
  font-size: 1.4rem;
</div>
```

The ruleset above throws a "Element Property Mismatch" compile time error:

![](https://2035066516-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSaW3lW0D0P6RRGeAif%2F-LSa_Sc70KAX92GRTBtO%2F-LSa_TS6S6EO8C2lxZl1%2FElementPropertyMismatch.png?generation=1543614360416245\&alt=media)

*See* [*Strict Inheritance*](https://callum-hart.gitbook.io/immutable-styles/advancedconcepts/strictinheritance) *for more details.*