Define variables in media-dependent @import

[carlcs]

New @import support is working great, but not if I add media queries to it. Variables defined within a imported CSS-file are then being ignored.

Example import.css

/* Basic import */
@import "import.include-sm.css";

/* Media-dependent import */
@import "import.include-lg.css" (min-width: 64em);

import.include-sm.css

:root {
  --font-size: 2em;
}
.Section {
  font-size: var(--font-size);
}

import.include-lg.css

:root {
  --font-size: 3em;
}
.Section {
  font-size: var(--font-size);
}

import.out.css

/* Basic import */
.Section {
  font-size: 2em;
}

/* Media-dependent import */
@media (min-width: 64em) {
  :root {
    --font-size: 3em;
  }
  .Section {
    font-size: 2em;
  }
}

[MoOx]

This is probably due the standard rework-vars limitation. Maybe you should report this issue over there.

[carlcs]

@MoOx already moved this to the right place. Closing

[MoOx]

Maybe we should keep this open until we update appropriate dependency here ?

[ianstormtaylor]

@MoOx is this something we should close? Is it the variables inside media limitation?

[MoOx]

See that by your self https://github.com/postcss/postcss-custom-properties/issues/9