DEV Community

Discussion on: Using emotionJs with Vite

vfonic profile image

I'm trying to use component selectors in my emotion styles. Did you have any luck doing so?

For example, I have this OnOffSwitch component which has some child elements:

const OnOffWrapper = styled.div`
  display: inline-block;

  ${props =>
      ? `
    ${OnOffTrack} {
      background-color: ${props.color};
      border: 1px solid ${props.color};
    ${OnOffHandle} {
      transform: none;
      background-color: ${props.color};
      : `
    ${OnOffTrack} {
      background-color: transparent;
      border: 1px solid ${colors.silver};
    ${OnOffHandle} {
      transform: translateX(-100%);
      background-color: ${colors.silver};
Enter fullscreen mode Exit fullscreen mode

These styles (anything below display: inline-block;) are being ignored now.

I've found this, but there's no mention of how to achieve this with Vite:
Also this, which throws an error immediately ("Uncaught SyntaxError: missing ) after argument list"):