CSS Custom Property Inheritance Problem

[aspizu]

Was messing around with CSS custom properties and realized something which is impossible to do with them. The stylex API lets you describe this, but it doesn't actually work the way you would think it should.

tokens.stylex.ts

export const foo = stylex.defineVars({
    bar: "red"
})

export const biz = stylex.defineVars({
    boo: foo.bar
})

And, now using stylex.createTime:

app.ts

import stylex from "@stylexjs/stylex"
import {biz, foo} from "~/tokens.stylex"

const styles = stylex.create({
    foo: {
        aspectRatio: 1,
        background: biz.boo,
        width: "100px"
    }
})

const theme = stylex.createTheme(foo, {
    bar: "blue"
})

export function App() {
    return (
        <div {...stylex.props(theme)}>
            <div {...stylex.props(styles.foo)}></div>
        </div>
    )
}

Expected behavior

You would expect the box to be of color blue.

But, what actually happens is that it remains red.