CSS ломается при сборке приложения create-реагировать.Есть ли решение для этого?

Question

Я использую create-реагировать-приложение 2.1.8, и у меня есть спиннер в стиле CSS. На сервере dev все работает нормально, но когда я запускаю сборку, вывод css прерывается. CSS все еще там, но как-то взбирался. Часть, которая ломается специально, является границей.

Я пытался переписать CSS разными способами, но получаю те же результаты. Css оказывается зашифрованным при сборке, но не на сервере разработки.

Что является причиной этого и есть ли какое-то решение для этого?

Это HTML для прядильщика:

<div class="spinner-container">
  <div>
    <div>
      <div>
        <div>
          <div>
            <div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Это CSS, который я написал:

.spinner-container * {
  box-sizing: border-box;
  border-width: var(--size);
  border-style: solid;
  border-color: transparent;
  border-left-color: var(--spinner-color, black);
  border-right-color: var(--spinner-color, black);
  margin: auto;
  position: relative;
  display: grid;
  place-items: center;
  animation: container 3s infinite;
  width: calc(100% - var(--size));
  height: calc(100% - var(--size));
}

Вот что я получаю в инспекторе сборки:

.spinner-container * {
    box-sizing: border-box;
    border-right-color: transparent;
    border-left-color: #000;
    border-right: var(--size) solid #000;
    border-right-color: var(--spinner-color,#000);
    border-style: solid;
    border-width: var(--size);
    margin: auto;
    position: relative;
    display: grid;
    place-items: center;
    -webkit-animation: container 3s infinite;
    animation: container 3s infinite;
    width: calc(100% - var(--size));
    height: calc(100% - var(--size));

Я должен получить это: https://codepen.io/adamls/pen/xNOMza

Вместо этого я получаю что-то вроде этого: https://codepen.io/adamls/pen/oRYomv