At Rule Space

Insert or strip whitespace of @ at rules prefixed CSS rules and their starting parenthesis.

👍

true

The atRuleSpace style rule is enabled (i.e: true) by default. The rule will ensure the @ at rules will use a single whitespace occurrences before the starting parenthesis.


@media(min-width: 1200px) {
  .some-selector {
    font-size: 1.5rem;
    background-color: whitesmoke;
  }
}

@media(prefers-reduced-motion: reduce) {
 .foo {
    color: black;
    width: 200px;
    height: 200px;
  }
}

@media(min-width: 1200px) {
  .some-selector {
    font-size: 1.5rem;
    background-color: whitesmoke;
  }
}

@media(prefers-reduced-motion: reduce) {
  .foo {
    color: black;
    width: 200px;
    height: 200px;
  }
}

🤡

false

The atRuleSpace style rule is disabled (i.e: false) then @ rule occurrences will have white stripped between the rule name and the starting parenthesis.


@media(min-width: 1200px) {
  .some-selector {
    font-size: 1.5rem;
    background-color: whitesmoke;
  }
}

@media(prefers-reduced-motion: reduce) {
 .foo {
    color: black;
    width: 200px;
    height: 200px;
  }
}

@media(min-width: 1200px) {
  .some-selector {
    font-size: 1.5rem;
    background-color: whitesmoke;
  }
}

@media(prefers-reduced-motion: reduce) {
  .foo {
    color: black;
    width: 200px;
    height: 200px;
  }
}