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 [email protected] 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 .

[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 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