[BUG] styled-components not working with Plasmo

uri3000 commented 1 year ago

What happened?

Cannot get my styled-components to work. Any special I need to do to include it in the build?

Version

Latest

What OS are you seeing the problem on?

MacOSX

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contact Details

abramson.uri@gmail.com

Code of Conduct

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

louisgv commented 1 year ago

@uri3000 can you please provide more info/reproduction? Please see the emotion example: https://github.com/PlasmoHQ/examples/tree/main/with-emotion

uri3000 commented 1 year ago

Got it, thank you for the help! I will try Emotion instead.

Not sure it makes sense but... perhaps one suggestion would be to have the build process extendable to allow sort of "build plugins". One use of such a build plugin could be to take care of such injections for different css-in-js frameworks like @emotion or @styled-components.

The way its currently working would require me to write this boilerplate code to render a style tag within each React components file I use:


const styleElement = document.createElement("style")

const styleCache = createCache({
  key: "plasmo-emotion-cache",
  prepend: true,
  container: styleElement
})

export const getStyle = () => styleElement

Instead, this should be handled as an external aspect of building tsx files. In this example when importing "styled" components of type StyledInterface (of the styled-components library) you can tell the developer want to include their

PlasmoHQ / plasmo