Is this good approach? -- <style>{ ${Comp} {....} }</style>

[iamyoki]

We usually write styles inside styled, but in the render area of the function component we need to flexibly assemble these styled components, and there is no selector for inline styles, babel plugin isn't my choice since I'm using swc to compile, so here is my solution, and I wanna discuss with people what's the PROS and CONS of this approach.

<>
  <style>{`
    ${SomeContainer} {
      ${SomeButton}:hover {
        background-color: slateblue;
      }
    }
  `}</style>

  <SomeContainer>
    <SomeButton>...</SomeButton>
  </SomeContainer>
</>

! [image] (https://github.com/user-attachments/assets/9589f96d-f1ec-4291-ba61-947cbd32d860) DOM appearence

PROS:

• CSS standard is supporting nesting, so we don't need css() utility.
• ${Comp} will resolved as .sc-gnpbhQ (a generated classname corresponding to your element)
• <style> element will alongside with lifecycle (mount, updates, unmount)
• Deeper <style> takes higher priority

CONS:

• Not eventually scoped.
• Will be some redundant <style> element in DOM. If you render 20 <Parent/> and Parent has a style element, there will be 20 same <style> in DOM
• No IDE intellisense

---

UPDATES:

I've achieved a way to make style scoped, here is the usage:

export function App() {
  return style(
    css`
      color: blue;

      p:nth-of-type(even) {
        color: red;
      }

      ${Heading.h1} {
        color: yellow;
      }
    `,
    <div>
      <p>I am blue</p>
      <p>I am red</p>
      <Heading.h1>I am yellow</Heading.h1>
    </div>
  );
}

! [image] (https://github.com/user-attachments/assets/22fa41cf-63dc-4ee1-9f3b-b0b1a4b23436)

And the DOM looks like this:
! [image] (https://github.com/user-attachments/assets/63fda4a3-bec1-49b0-a929-6dc13b71d587)

What does style fn do?

const Style = memo(({ children: styles }) => {
  const id = useId();
  const normalized = id.replace(/:/g, "-");
  return (
    <style data-id={normalized}>{`
      style[data-id=${normalized}]+* {${styles}}
    `}</style>
  );
});
Style.displayName = "Style";

const style = (styles, element) => {
  return (
    <>
      <Style>{styles.join('')}</Style>
      {element}
    </>
  );
};

It renders a style html tag with an unique id, and select the root element in stylesheet, so that style will only effect under the root jsx element.

I'm trying to take it a step further, so far so good.

Or put style below jsx, more vue style