search

postcss / postcss-custom-properties

Use Custom Properties in CSS
https://postcss.github.io/postcss-custom-properties
MIT License
597 stars 77 forks source link

Questions about variables resolution #185

Open jesusreal opened 5 years ago

jesusreal commented 5 years ago

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 commented 5 years ago

Hi @jesusreal,

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

jesusreal commented 5 years ago

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.