Transition component of Headless UI with stitches

[nibtime]

Hi,

I've just migrated a NextJS project from twin + emotion to twin + stitches. This broke the Transition component of Headless UI. (https://github.com/ben-rogerson/twin.examples/blob/master/headlessui-typescript/src/components/Transition.tsx). Fortunately, it can be adapted quite easily, in case anybody runs into the same problem:

stitches.config.ts

// https://stitches.dev/
// https://github.com/ben-rogerson/twin.examples/tree/master/next-stitches-typescript

import type { CSS as StitchesCSS } from '@stitches/react';
import { createStitches } from '@stitches/react';

export const stitches = createStitches({
	prefix: '',
	theme: {},
	utils: {},
});

export const { css, styled, globalCss, theme, keyframes, getCssText, config } =
	stitches;

export type CSS = StitchesCSS<typeof stitches>;

const _inlineCss = css({});

/**
 * Helper to inline css by className
 */
export const inlineCss = (css: CSS) => _inlineCss({ css });

/**
 * Helper to generate boolean variants for stitches styled components.
 */
export const boolVariant = <Condition extends string>(
	booleanCondition: Condition,
	stylesIfTrue: CSS,
	stylesIfFalse?: CSS
) => {
	return {
		[booleanCondition]: {
			true: stylesIfTrue,
			...(stylesIfFalse ? { false: stylesIfFalse } : {}),
		},
	} as Record<Condition, { true: CSS; false: CSS }>;
};

/**
 * Helper to apply conditional styles to stitches css prop
 */
export const cssIf = (
	condition: boolean,
	stylesIfTrue: CSS,
	stylesIfFalse?: CSS
): CSS => {
	return {
		...(condition ? stylesIfTrue : stylesIfFalse ? stylesIfFalse : {}),
	};
};

components/Transition.tsx

import type { TransitionEvents } from '@headlessui/react';
import { Transition as HeadlessUiTransition } from '@headlessui/react';
import type { TwStyle } from 'twin.macro';
import { inlineCss } from 'stitches.config';

/**
 * HeadlessUI "Transition"
 * Customized for twin.macro + typescript
 * https://headlessui.dev/react/transition
 */

type TransitionProps = {
	enter?: TwStyle;
	enterFrom?: TwStyle;
	enterTo?: TwStyle;
	entered?: TwStyle;
	leave?: TwStyle;
	leaveFrom?: TwStyle;
	leaveTo?: TwStyle;
	children: React.ReactNode;
	show?: boolean;
	as?: React.ElementType;
	unmount?: boolean;
} & TransitionEvents;

export default function Transition(props: TransitionProps) {
	return <HeadlessUiTransition {...getProps(props)} />;
}

Transition.Child = function TransitionChild(props: TransitionProps) {
	return <HeadlessUiTransition.Child {...getProps(props)} />;
};

function getProps(props: TransitionProps) {
	const {
		enter,
		enterFrom,
		enterTo,
		entered,
		leave,
		leaveFrom,
		leaveTo,
		...rest
	} = props;
	return {
		...rest,
		...(enter ? { enter: inlineCss(enter).className } : {}),
		...(enterFrom ? { enterFrom: inlineCss(enterFrom).className } : {}),
		...(enterTo ? { enterTo: inlineCss(enterTo).className } : {}),
		...(entered ? { entered: inlineCss(entered).className } : {}),
		...(leave ? { leave: inlineCss(leave).className } : {}),
		...(leaveFrom ? { leaveFrom: inlineCss(leaveFrom).className } : {}),
		...(leaveTo ? { leaveTo: inlineCss(leaveTo).className } : {}),
	};
}

[tmswr]

I have issues using the above, specifically with the Dialog component. Sometimes when closing, the elements will "leave" just fine, but retain pointer events, so the elements behind the Dialog cannot be interacted with. I've taken a look at the code and can't figure out why this is happening? I believe it has something to do with the modified Transition file.

[ben-rogerson]

Is there any evidence of it happening without the twin wrap in their issues?