CSS Custom Property Inheritance Problem about stylex HOT 3 CLOSED

export const color = stylex.defineVars({
    shadow: "0, 0, 0",
    shadowStrength: "0.1",
})

export const shadow = stylex.defineVars({
    md: `0 2px 2px rgba(${color.shadow}, ${color.shadowStrength}`,
})

Having to repeat stuff like this is bad. This should be patched in stylex itself.

defineVars could keep track of variables it depends on, then createTheme can patch them.

from stylex.

@aspizu This is a subjective issue as one behaviour isn't automatically better. After all, we're replicating the behaviour in CSS itself.

That said, we recognise how the CSS behaviour may not match expectations and have considered many possible solutions none of which seem to quite work. If you have a longer proposal on how the whole system should work, we're happy to consider your ideas.

from stylex.

This is how CSS variables work, so the way things work today is expected. The workaround is to create a theme to "re-set" the derived variable:

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"
})
const themeBoo = stylex.createTheme(biz, {
    boo: foo.bar,
})

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

This will do what you expect.

from stylex.