MadLittleMods / MadLittleMods/postcss-css-variables
Multiclasses / Compound selector missing from output
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 551
- Forks
- 63
- PR merge metrics
- No merged PRs in 30d
Description
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;
}
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue names no source file or test entry point. Reproduce the provided CSS input with postcss-css-variables and inspect how compound selectors such as .btn._color_danger are handled; done means the generated output includes both compound-selector background rules shown in the expected output.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- tooling
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100