solidjs / solid-styled-components

A 1kb Styled Components library for Solid
MIT License
280 stars 26 forks source link

Directive support for styled components? #4

Closed mattmccray closed 2 years ago

mattmccray commented 3 years ago

Should styled components support use: directives? I don't see any comments about it one way or another in the ReadMe.

If they should be supported (which I'd like), then I guess this is a bug report because they aren't working.

If not, then this is a feature request!

ryansolid commented 3 years ago

It'd be pretty tricky. Since at the point of the inner spread on to the native element they don't have access to the variable. It would need to get passed as a prop I guess.. I'm not sure it makes sense. Honestly, I'm not sure if it is possible. I don't think this works with Svelte and since Solid's components are virtual it's pretty hard to have this directive bind to anything.

Let's think.. we serialize a special like _property on props object.. then we update spread to be able to read this. But it would never work outside of a spread. Hmm it is pretty hacky.

It's a lot like a ref. I mapped that to a prop since it isn't arbitrary. Maybe that is the other option? Components with directives need to forward a ref? That would be hard to enforce but would work cleaner. But then it would compile to:

<StyledDiv use:something={state.value} />

createComponent(StyledDiv, {
  ref(el) {
    something(el, () => state.value);
  }
})

Challenge is it would need to merge all directives and refs... And if the component never implements ref it will never be called. Hmm.. that inconsistency would be hard since it wouldn't even error and we'd never know. That is incredibly confusing. Still that is pretty powerful. I think we still need to do better. But it's a start of a potential approach.