Can @variant work instead of @custom-variant? Is this the expected result?

[rozsazoltan]

Can @variant work instead of @custom-variant? Is this the expected result?

• https://play.tailwindcss.com/Lt0JXja7yT?file=css
• https://play.tailwindcss.com/BX8ftQSWOW?file=css
• https://tailwindcss.com/docs/functions-and-directives#custom-variant-directive

<div class="
  dark size-32
  not-dark:bg-red-500
  dark:bg-green-500
  stronger-dark:bg-amber-500
">...</div>

@variant dark {
  &:where(.dark, .dark *) {
    @slot;
  }

  @media (prefers-color-scheme: dark) {
    &:where(.system, .system *) {
      @slot;
    }
  }
}

@variant not-dark {
  &:not(:where(.dark, .dark *)) {
    @media not (prefers-color-scheme: dark) {
      @slot;
    }

    &:not(:where(.system, .system *)) {
      @slot;
    }
  }
}

@variant stronger-dark {
  &&:where(.dark, .dark *) {
    @slot;
  }
}

[rozsazoltan]

Yeah:

• Implement @variant #15663

For backwards compatibility, the @variant rules that don't have a body and are defined inline:

@variant hocus (&:hover, &:focus);

And @variant rules that are defined with a body and a @slot:

@variant hocus {
  &:hover, &:focus {
    @slot;
  }
}

Will automatically be upgraded to @custom-variant internally, so no breaking changes are introduced with this PR.

• tailwindcss/packages/tailwindcss/src/at-import.test.ts

  Lines 590 to 620 in 6c30d5e

  	test('resolves `@variant` used as `@custom-variant` inside `@reference`', async () => {
  	let loadStylesheet = async (id: string, base: string) => {
  	expect(base).toBe('/root')
  	expect(id).toBe('./foo/bar.css')
  	return {
  	content: css`
  	@variant dark {
  	&:where([data-theme='dark'] *) {
  	@slot;
  	}
  	}
  	`,
  	base: '/root/foo',
  	}
  	}
  	await expect(
  	run(
  	css`
  	@reference './foo/bar.css';
  	@tailwind utilities;
  	`,
  	{ loadStylesheet, candidates: ['dark:flex'] },
  	),
  	).resolves.toMatchInlineSnapshot(`
  	".dark\\:flex:where([data-theme="dark"] *) {
  	display: flex;
  	}
  	"
  	`)
  	})