[v3.4.1] Custom variant for elements that are not descendants of @container breaks

[hellovietduc]

Hi everyone!

I have the following situation:

• There's a shared component called ContentPicker.
• There are 2 pages that uses that component, let's call them PageA and PageB.
  • PageA is an older page that currently doesn't use container queries.
  • PageB is newer, and is using container queries.

I want to write styles for ContentPicker component so that it can work in both cases.

• @tablet-portrait:grid-cols-3 won't work in PageA.
  • tablet-portrait is my custom responsive breakpoint.
• If I add tablet-portrait:grid-cols-3, it'll work in PageA but not in PageB.
  • The reason is container queries don't take precedence over media queries. TW doesn't guarantee the order of the generated styles -> even if I put the class tablet-portrait:grid-cols-3 after @tablet-portrait:grid-cols-3, the order in the stylesheet might still be different.

What I came up with that worked in v3.3.x was this custom variant:

/**
 * Register -@ variant
 * Use this to match elements that don't have a container ancestor.
 * This variant must be put last.
 * @example hhover:-@:m-0
 */
addVariant('-@', ({ container }) => {
  const newRule = postcss.rule({ selector: '' })
  const clonedContainer = container.clone()
  clonedContainer.walkRules((rule: { selector: string }) => {
    // This will match elements that don't have any ancestor using
    // the `@container` utility class
    rule.selector = `&:not([class*="@container"] &)`
  })
  newRule.append(clonedContainer.nodes)
  container.removeAll()
  container.append(newRule)
})

When used together @tablet-portrait:grid-cols-3 tablet-portrait:-@:grid-cols-3:

• tablet-portrait:-@:grid-cols-3 would work in PageA.
• @tablet-portrait:grid-cols-3 would work in PageB.

Important

However, this custom variant breaks after upgrading to v3.4.1!

I guess TW changed something internally that might have broken the way I use the addVariant function. I'm using some undocumented API so this is expected. But I still want to get help making this custom variant work again. I'm also open to alternative suggestions.

FYI, I have considered this: Adding a @container class to a top-level element in PageA. I don't choose this way because I want to make ContentPicker component work in both cases. The page using that component doesn't need to add additional style to be able to use it.

Thanks in advance everyone!