How to Import CSS as Inline Styles (or URLs)

[sgarfinkel]

Summary

I'd like to import CSS styles as inline style tags or as URLs to the emitted asset so I can render components into a shadow root. As far as I can tell, my only options are to do a bare import "./foo.css", or a CSS modules import. Neither support the pattern I am looking for here.

Additional information

No response

Example

No response

[sunnypatell]

[sgarfinkel]

Correct me if I'm misunderstanding the approach here, but none of these options actually trigger postcss in anyway or any optimization performed by NextJS/Webpack/Turbopack? I'm not a huge fan of moving outside of that machinery since it is not conducive to HMR.

[sgarfinkel]

I think personally it would be nice if Next supported resource queries for both url and inline to support this pattern: https://webpack.js.org/configuration/module/#ruleresourcequery. Vite has this natively and it's very nice to not have to work around limitations.

[sgarfinkel]

Also, please don't repost obvious ChatGPT output as your own. I can ask it myself if I thought it would be at all helpful.