Open ecc521 opened 4 years ago
Try to set the global variables and then change them within the @madia frame. Maybe this will solve your problem
[image: Picture]
On Mon, Sep 2, 2019 at 9:25 PM ecc521 notifications@github.com wrote:
Inputting the code
@media screen and (min-width: 500px) { :root { --defaultFontSize: 2.8vw; --specialFontSize: var(--defaultFontSize); } }
@media screen and (min-width: 600px) { :root { --defaultFontSize: 3.8vw; } }
body { font-size: var(--specialFontSize) }
outputs
body { font-size: undefined }
@media screen and (min-width: 600px) {
body { font-size: undefined } }
@media screen and (min-width: 500px) {
body { font-size: 2.8vw } }
@media screen and (min-width: 500px) {
body { font-size: 2.8vw } }
Note the font-size:undefined in the second declaration. That should be a 3.8vw.
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/MadLittleMods/postcss-css-variables/issues/105?email_source=notifications&email_token=AHFJSLDRHIH2I7PSQRT6PLDQHVLBXA5CNFSM4IS7RULKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HI2VYVQ, or mute the thread https://github.com/notifications/unsubscribe-auth/AHFJSLGT76DRDXUQMP2DLF3QHVLBXANCNFSM4IS7RULA .
That is actually what my site happened to do - the code in the bug report was just a short example. Anyways, putting the following code into the playground results in incorrect values, as well as duplication:
:root {
--defaultFontSize: 4vw;
--specialFontSize: 3vw;
}
@media screen and (min-width: 500px) {
:root {
--defaultFontSize: 2.8vw;
--specialFontSize: var(--defaultFontSize);
}
}
@media screen and (min-width: 600px) {
:root {
--defaultFontSize: 3.8vw;
}
}
body {
font-size: var(--specialFontSize)
}
Yields
body {
font-size: 3vw
}
@media screen and (min-width: 600px) {
body {
font-size: 3vw
}
}
@media screen and (min-width: 500px) {
body {
font-size: 2.8vw
}
}
@media screen and (min-width: 500px) {
body {
font-size: 2.8vw
}
}
Notice how the output has a body {font-size: 3vw}
inside the @media screen and (min-width:600px)
. This is incorrect, and should state body{font-size: 3.8vw}
.
Additionally, there are two identical @media min-width 500px
statements.
The duplicated block is tracked by https://github.com/MadLittleMods/postcss-css-variables/issues/67 and the wrong value is probably the same problem as https://github.com/MadLittleMods/postcss-css-variables/issues/16
Inputting the code
outputs
Note the font-size:undefined in the second declaration. That should be a 3.8vw.