How to use createShadowRootUi and CSS imports

[zuozuomuxi]

This is a fantastic framework, thank you for your work!

I've encountered an issue while using it: I import CSS files in components, and as I understand it, Vite transforms the imported CSS files into a piece of JavaScript code that dynamically adds a <style> element. I hope that when using createShadowRootUi, these dynamically added style elements would be appended to the shadow DOM, but I'm not sure how to achieve this.

// App.tsx
import './style.css';
// Or use CSS modules // => import styles from './style.module.css';

export default () => <h1 className="my-app-heading">Hello</h1>;

Below is the example code from the documentation

// 1. Import the style
import './style.css';   // =====> I don't have a separate CSS file 😭
import ReactDOM from 'react-dom/client';
import App from './App.tsx';

export default defineContentScript({
  matches: ['<all_urls>'],
  // 2. Set cssInjectionMode
  cssInjectionMode: 'ui',

  async main(ctx) {
    // 3. Define your UI
    const ui = await createShadowRootUi(ctx, {
      // ...
  },
});

[aklinker1]

No worries if you don't have a separate CSS file. If you use modules or import them inside components, it will just work during development, no additional changes required... If you're not seeing that, can you share a zip of your project for me to debug?

Right now, during development and production, content scripts are bundled into a single JS file. CSS, regardless of how it's generated/included/imported, should also be output to a single file. Then that file is fetched as text and added inside the shadow root, during development and production.

I'm working on an ESM version of content scripts that will skip the bundle step during development, and move the styles into the shadow root, but right now, that's not how WXT handles content script CSS.

[zuozuomuxi]

I was misled by a small mistake of my own, mistakenly thinking that the framework did not implement this feature. Thank you for your answer.

By the way, I have another question: I just tried to migrate an old project to WXT today. In my project's manifest.json, there are fields like key and externally_connectable, but these fields are not supported in the manifest parameter of WXT's defineConfig. What should I do?

[aklinker1]

The types for the manifest field are incomplete, but it doesn't matter. You can ts-ignore fields you know exist, and they'll show up in the final manifest as you list them.

See #521