Skip to content

SW13004: CSS nesting limit exceeded

CSS rules or functions in your stylesheet are nested too deeply.

View as Markdown

This error occurs when blocks or functions in your stylesheet are nested deeper than the compiler supports. The message gives the limit and the position where the nesting exceeds it.

Flatten selectors

Replace nested selectors with their full selector. For example:

.card {
  & .content {
    & .title {
      color: blue;
    }
  }
}

The same rule needs no nested blocks:

.card .content .title {
  color: blue;
}

This small example is within the limit. Apply the same transformation to the deeply nested construct that the error identifies.

How to fix

  • Flatten nested rules, for example by writing the full selector instead of nesting it.
  • Split a deeply nested value, such as many calc() calls inside each other, into custom properties.

Splitting the stylesheet into files does not help, because the limit applies to one construct.