Multiclasses / Compound selector missing from output

[ronalson]

I'm trying to use the postcss-css-variables to build a CSS file for legacy browsers such as IE using preserved = false.

However I'm getting a inconsistent output while using multi-classes selector .class1.class2 {}. More specifically, the custom property value set inside this type of selector is ignored by the plugin.

Am I targeting something completed off?

Input

:root {
    --BRAND-COLOR--BASE:  #00b7b4;
    --BRAND-COLOR--SHADY: #00382d;
  
    --BRAND-RADIUS--BASE: 3px;
}

.btn {
    --btn-bg-color: var(--BRAND-COLOR--BASE, rgb(200,200,200));
    --btn-color: white;
    --btn-border-radius: var(--BRAND-RADIUS--BASE, 0);
}
.btn:hover {
    --btn-bg-color: var(--BRAND-COLOR--SHADY, rgb(100,100,100));
}
.btn._color_danger {
    --btn-bg-color: #FF6347;
}
.btn._color_danger:hover {
    --btn-bg-color: #FF4500;
}
.btn {
    background-color: var(--btn-bg-color);
    border-radius: var(--btn-border-radius);
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    color: var(--btn-color);
    font-family: sans-serif;
    text-decoration: none;
    padding: 10px 25px;
}

Expected Output

.btn {
    background-color: #00b7b4;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    color: white;
    font-family: sans-serif;
    text-decoration: none;
    padding: 10px 25px;
}
.btn:hover {
    background-color: #00382d;
}
.btn._color_danger {
    background-color: #FF6347;
}

.btn._color_danger:hover {
    background-color: #FF4500;
}

Actual Output

.btn {
    background-color: #00b7b4;
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    color: white;
    font-family: sans-serif;
    text-decoration: none;
    padding: 10px 25px;
}
.btn:hover {
    background-color: #00382d;
}

[MadLittleMods]

🤔 I suppose this should ideally work but I don't think it was considered and I don't see any tests/docs around this scenario so I'll leave it as a enhancement for now.

This can be simplified to,

Input

.btn {
    --btn-bg-color: #000;
    background-color: var(--btn-bg-color);
}
.btn.foo {
    --btn-bg-color: #f00;
}

Output

.btn {
    background-color: #000;
}

Expected

.btn {
    background-color: #000;
}
.btn.foo {
    background-color: #f00;
}

[ronalson]

😅 sorry for the extra verbose example.

But can you elaborate what does the enhancement status mean? I'm not sure if I should wait for it or not.

Is there anything I can do to help with this feature? Or (better) can you point me to and workaround?

[MadLittleMods]

@ronalson enhancement just means that it would ideally work but wasn't considered in the current implementation. It's some extra functionality vs something broken. I don't have plans to fix the current implementation but feel free to submit a PR with tests.

Here is a workaround 🤷‍♂️ ,

.btn,
.btn.foo {
    --btn-bg-color: #000;
    background-color: var(--btn-bg-color);
}
.btn.foo {
    --btn-bg-color: #f00;
}

---

I am working on a major refactor here, https://github.com/MadLittleMods/postcss-css-variables/tree/major-refactor but no ETA on having that finished.

[ronalson]

Thanks @MadLittleMods.

I'll playing with the workaround to see how far I can get. Already found some issues with undefined variables, but I have some ideas on how to get pass it.

BTW, thanks for making the plugin. I'll keep an eye on this major refactor.

[btamas]

I'm really sorry that issue was closed, because I have the same issue.