First usage impressions

[LekoArts]

Hello!

First and foremost, thanks for the library! If you feel like this better fits into Discussions, feel free to move it there.

I wanted to refactor a project of mine and saw the library pop-up on Twitter so I gave it a try: https://github.com/LekoArts/gatsby-source-tmdb/tree/7701461beb678b3ca2534e03b4c6df1aeea818a0/example

So here are some loosely structured thoughts about using it the first time. I didn't hit any bugs, only usage limitations and some confusion around docs.

---

1. For the globalStyle I'd also like to use element selectors like h1. I needed to define the global styles for headings inside a normal CSS file
2. I wasn't able to use the :hover:after pseudo selector so I also had to revert to a normal CSS file for that
3. Some utilities around media query breakpoints would be a nice touch, for now I've done that myself by putting them into my theme file as an export (automatic generation of min-width media queries would also be easy with that then)
4. The selectors portion in the docs was unclear to me, at the beginning I got a lot of error messages as I e.g. tried to use element selectors or classnames there. Only later it made click that it only affects the current style/class and that you can use that with a parent
5. After writing the whole code now I feel like there's already some opportunity to refactor a bit. I did things like these:
   https://github.com/LekoArts/gatsby-source-tmdb/blob/7701461beb678b3ca2534e03b4c6df1aeea818a0/example/src/components/detail-view.css.ts#L74-L80
   But what would be better to define a css var like icon-fill-color in the icon and then in the CSS the --icon-fill-color: 'newColor' is reassigned instead of overriding the fill itself. I probably didn't do that as the docs had part of that pattern only here: https://github.com/seek-oss/vanilla-extract#createvar
6. Last but not least I still longed for targeting child nodes (Question - targeting child nodes best practise #15) inside the style itself, so e.g.

   export const exampleStyle = style({
   	color: 'white',
   	children: {
   		div: {
     			color: 'black'
   		}
   	}
   })

   As I think the CSS cascade is there for a reason (and normal CSS modules also support that) and in the end I'm more productive with that. So a solution or some docs about achieving that would be great!

[markdalgleish]

Hey! Thanks for the feedback!

To address your points:

1. You can target h1 using globalStyle, e.g. globalStyle('h1', { fontSize: 48 }). Did you run into issues with this?

2. You can only use simple pseudos at the top level (e.g. :hover, :focus), but you can use more complex pseudos via selectors, for example:

   style({
     selectors: {
       '&:hover:after': {
         ...
       }
     }
   })

3. At SEEK we also have our own utilities around breakpoints. I'm not sure this belongs in core, but we may look into this if we build libraries on top of vanilla-extract.

4. Agreed, the docs could definitely use some more explanation around how selectors works 👍 It was a deliberate choice to keep the documentation streamlined, but probably not the right call in hindsight.

5. Not sure I'm understanding the point here, sorry. Are you saying we should provide more guidance on how to make use of CSS Variables?

6. You can target child nodes, we just force you to be explicit about the global nature of this type of styling, while also making it clear that you're targeting different nodes within each style block. Your example can be written like this:

   export const exampleStyle = style({
     color: 'white'
   });
   
   globalStyle(`${exampleStyle} div`, {
     color: 'black'
   });

   As mentioned above, we could definitely make this clearer in the docs.

[LekoArts]

Thanks for the quick response!

1. & 6. Coming from using mostly emotion/styled-components in the last years the pattern of having a single <GlobalStyle /> inside e.g. my wrapping layout component is really ingrained in my habits. So I didn't try those things because I thought I can only use globalStyle once 😆 Sounds stupid now afterwards but that was my thought process there. So having guidance around using globalStyle would be much appreciated!
2. I think I tried :hover:after on the top level and then on the selectors the compiler always screamed at me that I should place the & at the end 😅
3. Yep, not necessary, would be a nice to have
4. 👍
5. Then let's rephrase it: The vars: { [colorVar]: 'blue' } portion of https://github.com/seek-oss/vanilla-extract#createvar would make a good section on its own. Not necessarily as API explanation but "usage patterns". Hope that makes sense in combination with the first message: Not reassign the CSS property itself but the CSS var

[markdalgleish]

Opened a PR to add more detail about selectors: #24

[LekoArts]

Thanks a lot!

[LekoArts]

After letting that info sink in a bit I now was able to remove my normal CSS file and use vanilla-extract for everything: LekoArts/gatsby-source-tmdb@734d44d

Thanks again!

[markdalgleish]

Oh, that's awesome! Nice one 👏

[joshuabaker]

@markdalgleish Regarding point 6 here, what’s your recommended approach for child selectors within variants?

export const parent = recipe({
  variants: {
    primary: {
      [`& ${child}`]: {
        color: "blue",
      },
    },
    secondary: {
      [`& ${child}`]: {
        color: "red",
      },
    },
  },
});

Stitches, Emotion, et al. all allow component targeting, however, this is listed as explicitly prohibited.