Rendering in <style> tags causes extra line breaks

[NullVoxPopuli]

Code

    <div {{this.attachShadow}}></div>

    {{#if this.shadow}}
      {{#in-element this.shadow}}
        {{#unless @omitStyles}}
          <style type="text/css">
            @import '{{this.vendor}}';
            @import '{{this.app}}';
          </style>
        {{/unless}}

        {{yield}}
      {{/in-element}}
    {{/if}}

Output (just the style part)

Expected:

          <style type="text/css">
            @import '/assets/vendor.css';
            @import '/assets/limber.css';
          </style>

[NullVoxPopuli]

idk how important this is, because behaviorally, everything works...
it just looks weird 🙃

[NullVoxPopuli]

This is my full component (in case anyone else comes across this and wants shadow dom fun):

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';

interface Args {
  omitStyles: boolean;
}

export default class Shadowed extends Component<Args> {
  @tracked shadow?: ShadowRoot;

  vendor = '/assets/vendor.css';
  tailwind = '/assets/tailwind.css';
  app = '/assets/limber.css';

  attachShadow = (element: HTMLElement) => {
    this.shadow = element.attachShadow({ mode: 'open' });
  };

  <template>
    <div {{this.attachShadow}}></div>

    {{#if this.shadow}}
      {{#in-element this.shadow}}
        {{#unless @omitStyles}}
          <style type="text/css">
            @import '{{this.tailwind}}';
            @import '{{this.vendor}}';
            @import '{{this.app}}';
          </style>
        {{/unless}}

        {{yield}}
      {{/in-element}}
    {{/if}}
  </template>
}

[Alex Kanunnikov]

Try:
@import '{{~this.tailwind~}}';

[NullVoxPopuli]

Same results

[Boris Petrov]

I guess this is similar to those two issues - emberjs/ember.js#19602 and emberjs/ember.js#19603.