space alignment not work

[kratess]

.phone {
  &_title {
      width: 500px;
      @media (max-width: 500px) {
          width: auto;
      }
      body.is_dark & {
          color: white;
      }
  }
  img {
      display: block;
  }
}

.title {
font-size: var(--font);

@at-root html {
    --font: 16px
}
}

.phone_title {
      width: 500px;
  }
      @media (max-width: 500px) {.phone_title {
          width: auto
  }
      }
      body.is_dark .phone_title {
          color: white;
      }
  .phone img {
      display: block;
  }

.title {
font-size: var(--font);
}

html {
    --font: 16px
;
}

after compile spaces are messed up

[ai]

We expect that this plugin will be used with CSS minifier like cssnano.

If you want a readable output, you need to add any CSS formatter (for instance, Stylelint with --fix mode).

If you know a better solution, please send PR. All my ideas were not good or take too much time to implement.