# 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:

![](/files/-LSa_TRxSCHbil2tgkxR)

## 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:

![](/files/-LSa_TRzX6lP0Uu7kcB4)

## 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:

![](/files/-LSa_TS0nrFg2LWpOgeN)

## 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:

![](/files/-LSa_TS2xCCjOTUERBcf)

## 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:

![](/files/-LSa_TS46b4zvNEYqCdD)

## 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:

![](/files/-LSa_TS6S6EO8C2lxZl1)

*See* [*Strict Inheritance*](/immutable-styles/advancedconcepts/strictinheritance.md) *for more details.*


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://callum-hart.gitbook.io/immutable-styles/compiletimeerrors.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.