Doesn't seem to work with Solid Start's filesystem routes

lxsmnsyc / solid-styled

Reactive stylesheets for SolidJS

MIT License

173 stars 10 forks source link

Doesn't seem to work with Solid Start's filesystem routes #20

Closed X1nto closed 1 year ago

X1nto commented 1 year ago

So, I have a page in src/routes/index.tsx:

export default function Home() {
  css`
    #container {
      width: 100%;
      display: flex;
      flex-direction: row;
      gap: 32px;
    }

    #sidebar {
      max-width: 100px;
    }

    #main {
      flex-grow: 1;
    }
  `
  return (
    <div id="container">
      <div id="sidebar">Hello this is sidebar</div>
      <div id="main">Hello this is main</div>
    </div>
  );
}

However, these styles are not getting applied to the website: There are no errors in the console, it just straight up refuses to work. What's interesting, is that it seems to work inside the src/root.tsx file.

lxsmnsyc commented 1 year ago

What does <head> contain? Seems like compiler is working correctly

X1nto commented 1 year ago

What does <head> contain? Seems like compiler is working correctly

Hm, it seems add styles

X1nto commented 1 year ago

As far as I understood, it didn't add the s:c-Home-aa557f6b-0-1 thing to the #container div.

lxsmnsyc commented 1 year ago

Okay I do see it now. Can you make a repro of this?

X1nto commented 1 year ago

Okay I do see it now. Can you make a repro of this?

Sure! I'll do it first thing in the morning.

X1nto commented 1 year ago

repro.zip @lxsmnsyc attached reproduction project, please see comments inside routes/index.tsx and components/PageButton.tsx.

lxsmnsyc commented 1 year ago

repro.zip @lxsmnsyc attached reproduction project, please see comments inside routes/index.tsx and components/PageButton.tsx.

Here's some of my comments

 //this also won't work if I replace `a` with `A`
 return (
   <a href={props.href}>
     {props.children}
   </a>
 )

This is mentioned in the docs

For the index page, it's definitely weird that the JSX isn't getting transformed. I'm most likely thinking that it transforms before solid-styled goes through. I'm not sure what to do with this one hmmm

lxsmnsyc commented 1 year ago

Okay weird, seems like the pages are transformed first.

lxsmnsyc commented 1 year ago

@X1nto I've released 0.9.1, please check if it works

X1nto commented 1 year ago

@X1nto I've released 0.9.1, please check if it works

Fixed with routes, but using A instead of a still doesn't work. Although since that is out of the scope of this issue, I'll be closing this one. If you want, I can open a separate issue regarding the A and a thing.

lxsmnsyc commented 1 year ago

@X1nto please read my other comment.

X1nto commented 1 year ago

@X1nto please read my other comment.

Oh, sorry, didn't notice the comment 😄