MadLittleMods/postcss-css-variables

Cascading vars: Plugin works correctly? Or browsers do not work correctly?

belozer opened this issue · 4 comments

belozer commented

I'am not found specs with examples abount cascading vars. But try this case https://github.com/MadLittleMods/postcss-css-variables#caveats native in Browser on CodePen. (without plugin)

<div class="component">
    Black

    <h1 class="title">
        Blue

        <p class="decoration">
            Green

            <h1 class="title">Blue with this plugin, but green per spec</h1>
        </p>
    </h1>
</div>
.component {
  --text-color: blue;
}

.component .title {
  color: var(--text-color);
}

.component .decoration {
  --text-color: green;
  color: var(--text-color);
}

image

It turns out that the plugin works correctly? Or browsers do not work correctly?

belozer commented

Or is this an incorrect example?

And need next

<div class='block theme'>
  Blue
  <h1 class='block__title'>
    Red in plugin, but blue in spec
  </h1>
</div>
:root { --color: red }

.theme { --color: blue }

.block, 
.block__title {
  color: var(--color)
}
MadLittleMods commented

Thanks for noticing. I think it is an incorrect example, https://github.com/MadLittleMods/postcss-css-variables/blob/a817fb90a23eb9dbf7b3848583b67e0299250c3e/README.md#caveats and perhaps had falsely assumed custom properties were inherited/cascading. The --text-color: green; only applies to .decoration.

Your second example, #78 (comment) compiles as expected (all red btw) because we only take into account explicit relationships.

We can simplify the example to the following (feel free to create a PR)

<div class="block theme-blue">
  Red in plugin, but blue in spec
</div>
:root { --color: red }
.theme-blue { --color: blue }

.block {
  color: var(--color);
}
  • 👍1
belozer commented

@MadLittleMods PR Ready :) #79

MadLittleMods commented

Thanks for the PR @belozer. From my extra digging, I think we just need to change everything to <div>. Sorry for the confusion

✔️ I looked some more info to verify and CSS custom properties do inherit, https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables#Inheritance_of_CSS_Variables

❌ The problem with the example is the nesting of <p> and <h1>. <p> can't contain other block-level elements.

We can update the example to be the following,

<div class="component">
    Black

    <div class="title">
        Blue

        <div class="decoration">
            Green

            <div class="title">Blue with this plugin, but green per spec</div>
        </div>
    </div>
</div>
.component {
  --text-color: blue;
}

.component .title {
  color: var(--text-color);
}

.component .decoration {
  --text-color: green;
  color: var(--text-color);
}