Unclosed block when styling component

[bluskript]

When applying tested styling in PostCSS with this plugin, I get the following error:

1:31:59 PM [vite] Internal server error: /home/amadeus/HarmonyProject/tempest-new/src/components/HBtn.vue?vue&type=style&index=0&scoped=true&lang.postcss:74:1: Unclosed block
  Plugin: vite:css
  File: /home/amadeus/HarmonyProject/tempest-new/src/components/HBtn.vue?vue&type=style&index=0&scoped=true&lang.postcss
  72 |        @apply bg-gray-600 text-gray-500 bg-opacity-75;
  73 |  }
  74 |  .outlined {
     |   ^
  75 |    &: hover {
  76 |        @apply bg-current bg-opacity-25 text-white;

Here is the code that causes it:

<style scoped lang="postcss">
.btn {
  @apply px-4 py-2 outline-none rounded transition duration-200 ease-in-out justify-center items-center;
  &:disabled {
    @apply pointer-events-none;
  }
}

.not-flat {
  @apply shadow-lg;
  &:hover {
    transform: translate(0, -0.125rem);
    @apply shadow-xl;
  }
}

.primary {
  &.filled {
    @apply bg-primary-400 text-white;
    &:hover {
      @apply bg-primary-300;
    }
  }
  &.outlined {
    @apply border-primary-300 text-primary-300;
    &:hover {
      @apply bg-primary-300 text-white bg-opacity-25;
    }
  }
  &.text {
    @apply text-primary-300;
    &:hover {
      @apply bg-primary-300 bg-opacity-25;
    }
  }
}

.secondary {
  &.filled {
    @apply bg-secondary-400 text-white;
    &:hover {
      @apply bg-secondary-300;
    }
  }
  &.outlined {
    @apply text-secondary-300;
  }
  &.text {
    @apply text-secondary-300;
    &:hover {
      @apply bg-secondary-300 bg-opacity-25;
    }
  }
}

.icon {
  @apply rounded-full px-2 py-2;
}

.filled {
  &:disabled {
    @apply bg-gray-600 text-gray-500 bg-opacity-75;
  }
}

.outlined {
  @apply border;
  &:hover {
    @apply bg-current bg-opacity-25 text-white;
  }
  &:disabled {
    @apply border border-gray-500 text-gray-500 bg-opacity-75;
  }
}

.text {
  @apply text-white;
  &:hover {
    @apply bg-current bg-opacity-25;
  }
  &:disabled {
    @apply text-gray-500 bg-opacity-75;
  }
}
</style>

It seems to only happen when I specify a &: selector.

[schelmo]

i had this issue too: #50
should be fixed by version 0.5 if using transformCSS: true (the default)