Nested custom at rules @ are not being parsed

[phoenix-ru]

tl;dr Running this example panics:

$ cat test.css 
@tailwind base;
@tailwind components;
@tailwind utilities;

.a {
  @apply bg-blue-400 text-red-400;
}

$ cargo run --features="visitor" --example custom_at_rule test.css

thread 'main' panicked at 'called `Result::unwrap()` on an `Err` value: Error { kind: AtRuleInvalid("apply"), loc: Some(ErrorLocation { filename: "test.css", line: 5, column: 9 }) }', examples/custom_at_rule.rs:28:89

Problem I am facing

I am trying to implement a CSS transformer using lightningcss Rust crate for Vue's <style scoped>. These are user-controlled stylesheets which are traditionally transformed using PostCSS from:

.a { /* */ }

to

.a[data-v-somehash] { /* */ }

Trying to support CSS supersets

So far lightningcss seems to be a perfect candidate (and the only one with sane API). However, as my usage quite often includes Tailwind CSS, I would also like to be able to process these stylesheets.

I have read #94 and the example and decided to write an AnyAtRuleParser, which basically handles all unknown at rules by grabbing their raw content and holding onto it until .to_css is called, and then rules are flushed as-is.

Interestingly, it works for an input like this:

.test {
    background: yellow;
}

@media screen {
    /* Comment */
}

@tailwind;

@custom-whatnot {
    hello
    this should be unchecked
}

And produces a pretty weird result

.test{background:#ff0}@media screen{}@tailwind;@custom-whatnot{hello this should be unchecked}

Since processing Tailwind or any other PostCSS related transforms is not a scope of my tool, I intend to return this "CSS" back to the consumer after applying the Vue transforms and let the consumer run whatever PostCSS plugins he wants.

Actual issue

The issue in lightningcss is that custom AtRuleParser is not being called when traversing properties:

/* This works */
@apply tw-smth;

/* This panics or warns */
.test {
  @apply tw-smth;
}

[devongovett]

For nested at rules within a style rule to parse you need to enable the nesting option in ParserOptions. Once the CSS nesting spec stabilizes it will become the default.

[phoenix-ru]

Thanks for your hint, I created a pull request which enables this option in the example