[v3.4.x] 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!

[hellovietduc]

Reproducible code: https://play.tailwindcss.com/wOuW9kA3fp?file=config

[wongjn]

I can't quite understand the reasoning for needing the -@ to be last in the CSS order. Consider using a string argument instead:

addVariant('-@', `&:not([class*="@container"])`)

https://play.tailwindcss.com/ABRFP445Lr?file=config

[hellovietduc]

Because the nature of this variant, -@ needs to be the last variant so it can capture the full selector and put it in the :not() pseudo-class.

I finally made it work in 3.4.4:

/**
 * Register -@ variant
 * Use this to match elements that don't have a container ancestor.
 * This variant must be put last so it can capture the full selector.
 * @example tablet-portrait:-@:m-0
 * @output
 * ```css
 * @media (min-width: 744px) {
 *   .tablet-portrait\:-\@\:m-0:not([class*="@container"] .tablet-portrait\:-\@\:m-0) {
 *     margin: 0px;
 *   }
 * }
 * ```
 */
addVariant('-@', ({ modifySelectors }) => {
  modifySelectors(() => `&:not([class*="@container"] &)`)
})