Questions about variables resolution

[jesusreal]

This is a question, not an issue, but I really want to know why it behaves like that and I think it could be useful as reference for other people.

CSS input

:root {
  --color-root-1: red;
  --color-root-2: white;
}

.fd-shellbar {
  --color-block-bg: blue;
  --color-block-2: var(--color-root-2);
  color: var(--color-root-1);
  background-color: var(--color-block-bg);
  color: var(--color-block-2);
}

CSS output

:root {
  --color-root-1: red;
  --color-root-2: white;
}

.fd-shellbar {
  --color-block-bg: blue;
  --color-block-2: var(--color-root-2);
  color: red;
  color: var(--color-root-1);
  background-color: var(--color-block-bg);
  color: var(--color-block-2);
}

These are my questions:

1. Being --color-root-2 defined only once and only in :root, and being --color-block-2 defined only once and only being used in the block where it is defined, why not output this?

  color: white;
  color: var(--color-block-2);

2. Being --color-block-bg defined only once and only being used in the block where it is defined, why not output this?

  background-color: blue;
  background-color: var(--color-block-bg);

Is the reason for not doing these transformations that they are very time consuming?

Instead of polluting the description I created a repo with the codebase I have used to perform my tests: https://github.com/jesusreal/postcss-playground.

[pascalduez]

Hi @jesusreal,

see https://github.com/postcss/postcss-custom-properties/issues/173#issuecomment-483530357 for explanations.

[jesusreal]

Hi @pascalduez thanks a lot for pointing me to that information. Please correct me if I am wrong, but in my example there is no variable overriding, so in fact it actually should be possible to do the replacements I proposed.