Incorrect output and duplication when defining a variable relative to another

[ecc521]

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.

[ui-coder]

Try to set the global variables and then change them within the @MADIa frame. Maybe this will solve your problem ============== Best regards, Willie S. Ceres (@htmlstrap) ------------------------ [image: Picture]

…

On Mon, Sep 2, 2019 at 9:25 PM ecc521 ***@***.***> 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 <#105?email_source=notifications&email_token=AHFJSLDRHIH2I7PSQRT6PLDQHVLBXA5CNFSM4IS7RULKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HI2VYVQ>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AHFJSLGT76DRDXUQMP2DLF3QHVLBXANCNFSM4IS7RULA> .

[ecc521]

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.

[MadLittleMods]

The duplicated block is tracked by #67 and the wrong value is probably the same problem as #16