References not being transformed as expected

[tbck]

I've setup some components with custom media queries that will be used as defaults (--a and --b). I'm trying to configure them with a global (--c), similar to https://github.com/suitcss/theme. I'm getting an unexpected output.

Given this input:

@custom-media --a (foo: bar);

@media (--a) {
    selector { property: value; }
}

@custom-media --b (foo: bar);

@media (--b) {
    selector { property: value; }
}

@custom-media --c (bar: baz);

@custom-media --a (--c);
@custom-media --b (--c);

I get this output:

@media (bar: baz) {
    selector { property: value; }
}

@media (--c) {
    selector { property: value; }
}

I was expecting this output:

@media (bar: baz) {
    selector { property: value; }
}

@media (bar: baz) {
    selector { property: value; }
}

[tbck]

Exploring this a bit further... I've got a simpler example.

This actually works as I expected:

@custom-media --c (bar: baz);

@custom-media --a (--c);

@media (--a) {
    selector { property: value; }
}

@custom-media --b (--c);

@media (--b) {
    selector { property: value; }
}

But putting --c's definition at the end causes trouble:

@custom-media --a (--c);

@media (--a) {
    selector { property: value; }
}

@custom-media --b (--c);

@media (--b) {
    selector { property: value; }
}

@custom-media --c (bar: baz);

[tbck]

Exploring this even further... The problem appears to be concerning circular dependencies.

Changing the test fixture transform-circular-reference.css to:

body { color: #000  }

@custom-media --a (--b);
@custom-media --b (--a);

@media (--a) {
  selector {
    property: value;
  }
}

@media (--b) {
  selector {
    property: value;
  }
}

Makes the test fail - only one media query is removed.

I may get around to a PR for this, but it is Friday so who knows.