depth-based precedence system

[RJWadley]

this adds style "depth" to the precedence system use by restyle. deeper styles, e.g. media queries, will have higher precedence than shallower styles. The deeper the style is nested, the higher its precedence.

rsl, rsm, and rsh are where are base styles would go:

const A = styled("div", {
    background: "green",
})

styles nested one level deep go into layers rsl1, rsm1, and rsh1

const A = styled("div", {
    "@media (max-width: 600px)": {
        background: "yellow",
    },
})

more levels are created as needed. for example, this class would go into rsl2

const A = styled("div", {
    "&": {
        "&": {
            background: "red",
        },
    },
})

this has the added benefit of reducing the impact of property order. for example, this element would previously have always been green due to class ordering:

const A = styled("div", {
    "@media (max-width: 600px)": {
        background: "yellow",
    },
    background: "green",
})

using this depth-based system the nested media query always takes higher precedence regardless of property order

using precedence layers like this would let react handle the orchestration of classes in a way that retains their priority, while also clarifying how restyle handles multiple conflicting styles - "deeper styles win"

fixes #23

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
restyle	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 12, 2024 5:42pm