Web component CSS import path is not interpolated in style tag

[ScriptShah]

<!-- Thank you for your contribution. Before you submit the issue:
1. Search open and closed issues for duplicates.
2. Read the contributing guidelines.
-->

Description

The web component renders a <style> tag containing a literal CSS
@import string instead of interpolating the cssImportPath value.

Specifically, the following code:

<style>@import '{finalCssImportPath}';</style>

does not interpolate finalCssImportPath in JSX. As a result, the
browser receives the CSS import as a literal string and the stylesheet
is never loaded.

This causes the component styles to be missing even when a valid
cssImportPath is provided.

This issue affects the web component rendering logic and occurs
consistently whenever the component is rendered.

---

Environment

• OS: Any
• Browser: Any modern browser
• Framework: React (web component usage)

---

Expected Result

The value of cssImportPath should be correctly interpolated into the
CSS @import statement so that the referenced stylesheet is loaded and
applied at runtime.

---

Actual Result

The rendered output contains a literal string:

@import '{finalCssImportPath}';

instead of the resolved CSS path, causing the stylesheet import to fail.

---

Steps to Reproduce

1. Use the AsyncApiWebComponent and provide a custom cssImportPath
   prop.
2. Render the component in a browser.
3. Inspect the rendered <style> tag in the DOM.
4. Observe that {finalCssImportPath} appears as a literal string and
   the CSS file is not loaded.

---

Troubleshooting

• Verified that cssImportPath contains a valid path.
• Confirmed that JSX does not interpolate variables inside string
  literals.
• Identified that using a JSX expression (template literal) resolves
  the issue, for example:

<style>{`@import '${finalCssImportPath}';`}</style>

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[ScriptShah]

I’d be happy to work on this issue and submit a pull request.

Please assign it to me so I can start working on the fix. Thanks!

[Athaxv]

Hi @ScriptShah ,
Thanks for reporting this issue. I’d like to suggest an alternative approach that should make the behavior more reliable.

During testing, CSS may still appear to load due to:

1. Browser caching
2. External CSS sources
3. Multiple component instances mounting

While the following approach works:
{@import '${finalCssImportPath}';}

it can result in duplicate loads and inconsistent behavior.

Proposed fix:
Replace the <style>@import</style> approach with a <link> tag managed via component lifecycle methods. This helps prevent duplicate CSS injection and improves performance and reliability.

Happy to discuss or help refine this further.

[AceTheCreator]

I’d be happy to work on this issue and submit a pull request.

Please assign it to me so I can start working on the fix. Thanks!

@ScriptShah feel free to open a PR for this 😄