How to discard a media query along with its content?

[Stigjb]

I want to discard all @media print definitions from a CSS file. For example, given:

  .foo { width: 100px; }
  @media print {
    .bar { width: 50mm; }
  }
  .baz { width: 200px; }

I want the result to be .foo{width:100px}.baz{width:200px}.

I have experimented with visitors, and successfully identified the print queries with a MediaQuery visitor. However, if I return [] from the visitor, the properties within are just unwrapped. In fact, both the MediaQuery and MediaQueryExit visitors seem to come before any of the contents.

Is there a way to do this?

[Stigjb]

I found the solution. MediaQuery was the wrong visitor here, but a Rule visitor did the trick. Here is my solution:

const { code } = transform({
  filename: 'test.css',
  code: Buffer.from(styleString),
  minify: true,
  visitor: {
    Rule(rule) {
      if (rule.type === 'media') {
        if (rule.value.query.mediaQueries.some((q) => q.mediaType === 'print')) {
          return [];
        }
      }
      return rule;
    },
  },
});