[EXP] example needed to use the same styles / stylesheet used for content but in popup

[DanielRuf]

What is the example you wish to see?

Currently the documentation doesn't show, how we can style the popup content with the same css file.

Addind the getStyle code from content.tsx to popup.tsx doesn't seem to work.

Is there any context that might help us understand?

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems.

[DanielRuf]

Code that I have tried in popup.tsx:

import type { PlasmoContentScript, PlasmoGetStyle } from 'plasmo';
import styleText from 'data-text:~src/styles.css';

export const getStyle: PlasmoGetStyle = () => {
    const style = document.createElement('style');
    style.textContent = styleText;
    return style;
};

[louisgv]

@DanielRuf in popup, you can just do:

import "~src/styles.css"

And it should work, no need for the style injection code at all. Popup runs on its own container so there's no need to hoist the style into a dedicated shadowDOM container like in CSUI.

[DanielRuf]

@louisgv ah ok, so the difference is that we can use CSS modules but not the geStyle API, correct?

[DanielRuf]

@DanielRuf in popup, you can just do:

import "~src/styles.css"

And it should work, no need for the style injection code at all. Popup runs on its own container so there's no need to hoist the style into a dedicated shadowDOM container like in CSUI.

I'll try this next week. The docs were not that clear for me regarding this use case.

The only issue that I have: I can not remove the margin and background on the html / body element of popup. Or can this also be styled?

If so, do we need some selector like :root? The __plasmo class is a few levels deeper and not where I have to remove the background and margin.

[louisgv]

The only issue that I have: I can not remove the margin and background on the html / body element of popup. Or can this also be styled?

Yeah for popups, you can directly style the body and trace it down from there - there's no shadowDOM wrapper. You may do that via a separate css file as well, i.e have 2 imports, one to reuse the CSUI style, and one to fix the popup body style

[DanielRuf]

Seems to work, closing.