CSS file is created with extra {} for comments when using :global

[fenglish]

Some x-dash components use :global to import other x-dash component styling.

e.g.
x-topic-search and x-teaser-timeline

If the imported CSS file includes comments, CSS file is created with extra {} for the comments. The consumer side throws an error about the invalid CSS.

@financial-times/x-follow-button/dist/FollowButton.css

/* Button.scss */
/* Mixins: are going to be reused across various components */
.main_button__3Mk67 {
  background-color: transparent;
}

x-topic-search scss file

:global {
	@import "~@financial-times/x-follow-button/dist/FollowButton";
}

⬇️ ⬇️ ⬇️ ⬇️

x-topic-search css file

{
  /* Button.scss */
  /* Mixins: are going to be reused across various components */ }

.main_button__3Mk67 {
    background-color: transparent;
}