CSS Variables Order

[lemmon]

I've noticed that PurgeCSS removes variables even though they are used if they are not in "proper" order.

:root {
  --color: var(--default);
  --yellow: #ffdc00;
  --extra: yellow;
  --default: #0074d9;
}

.blue {
  color: var(--color);
}

.yellow {
  color: var(--yellow);
}

In this example the --default variable gets deleted since it is only defined after the --color variable. If I put --default before --color everythign works.

PurgeCSS v3.0.0

[ImanMh]

I have the same issue. I assume this is not fixed yea? or maybe I'm doing something wrong.

[jrencz]

I can confirm this happens in purgecss 4.1.3 as well.

In case I try

/* other declarations */
.foo {
   .bar {
      --some-var: 1;
      @media (/*anything*/) {
        --some-var: 2;
      }
   }
}

I end up with

@media (/*anything*/) {
  .foo .bar {
    --some-var: 2;
  }
}
/* other declarations */
.foo .bar {
  --some-var: 1;
}

Instead of expected

/* other declarations */
.foo .bar {
  --some-var: 1;
}
@media (/*anything*/) {
  .foo .bar {
    --some-var: 2;
  }
}

But when I add something that won't change the semantics, like content: '' then the order is as expected

[Ffloriel]

@jrencz your issue doesn't seem to be similar to this one. PurgeCSS wouldn't change the order of the rules. PostCSS is most likely the cause of this change.

[jrencz]

The case is that I'm not using postcss

{
  "scripts": {
    "prod": "...",
    "postprod": "purgecss --config ./purgecss.config.js"
  }
}