Dynamic functions + Media Queries

[sergeylaptev]

Hello and first of all thanks for the great library!:) I have a question regarding complex styling where I need to combine several styling props together and also change their look starting from specific breakpoint. From what I can see in the docs right now you can either have media queries support (via "mq" import and further usage in the stylesheet object) or complex combination of several styling props using dynamic functions (and multiple if statements inside). So the question is how to get the best of both worlds and apply media queries (let's say "starting from lg") to specific combination of styling props? Thank you!

[jpudysz]

Breakpoints are designed for that case: https://www.unistyl.es/v3/references/breakpoints

eg.:

{
    container: {
         alignItems: {
              xs: 'center', // from xs to lg use 'center'
              lg: 'flex-end' // from lg and above use 'flex-end'
         }
    }
}

Edit:

I would avoid if-else in dynamic functions.

I hope it answers your question 😄

[sergeylaptev]

I would love to avoid them too, but this is how your v2 documentation proposes to achieve compound variants;) https://v2.unistyl.es/reference/compound-variants/

[sergeylaptev]

Yes, because I'm still not sure how reliable and stable "beta" version of the library is.

[jpudysz]

Beta is not production ready. We're pattching a lot of things, especially after initial release. I would go with Unistyles 3.0 from first RC.

Anyway, you can still use breakpoints on 2.0 branch. For compound, there is no other way than if-else + dynamic function

[sergeylaptev]

Yeah it looks like for v2 the best bet would be to add same "breakpoints" object into theme itself. Get current breakpoint numeric value inside dynamic function like this

const breakpoint = theme.breakpoints[rt.breakpoint]

and then make media queries-like comparisons manually

if (breakpoint > theme.breakpoints.lg) {
  ....
}

I don't like this approach a lot as it seems cursed to me, but it is what it is for v2 at least. We desperately need v3 production ready solution!:)

[jpudysz]

We're doing what we can to ship it. Should be available somewhere in Q1 of 2025.

[sergeylaptev]

Thank you for your dedication!:)