Now when we are using JSX syntax in sealgen we can sometimes find ourselves doing stuff like this

return (<div>{`<script>console.log("XD")</script>`}</div>);

or

return (<div>{`<style>.cmp-something { opacity: 0; }</style>`}</div>);

While we can in most case go around that with using stimulus or creating css in external files and only using class name in JSX it would be nice to add something more straightforward for simpler cases. for example

import customStyles from "./index.css";
import customScript from "./index.js";

// ...

return (<div>{customScript}{customStyles}</div>);

Its gonna be more readeable and and we will get proper syntax support while using external files.

The problem is we cant do what i just presented because imports in our projects already have .js extension. This task is about coming up with an idea how to solve this issue and implement that.