Fix className hydration for <Transition appear> (#2390)

* Fix `className` hydration for `<Transition appear>`

* Update changelog

packages/@headlessui-react/src/components/transitions/transition.ssr.test.tsx

@@ -9,8 +9,34 @@ beforeAll(() => {
 
 describe('Rendering', () => {
   describe('SSR', () => {
+    it('A transition without appear=true does not insert classes during SSR', async () => {
+      let result = await renderSSR(
+        <Transition
+          as={Fragment}
+          show={true}
+          enter="enter"
+          enterFrom="enter-from"
+          enterTo="enter-to"
+        >
+          <div className="inner"></div>
+        </Transition>
+      )
+
+      let div = document.querySelector('.inner')
+
+      expect(div).not.toBeNull()
+      expect(div?.className).toBe('inner')
+
+      await result.hydrate()
+
+      div = document.querySelector('.inner')
+
+      expect(div).not.toBeNull()
+      expect(div?.className).toBe('inner')
+    })
+
     it('should not overwrite className of children when as=Fragment', async () => {
-      await renderSSR(
+      let result = await renderSSR(
         <Transition
           as={Fragment}
           show={true}
@@ -27,6 +53,13 @@ describe('Rendering', () => {
 
       expect(div).not.toBeNull()
       expect(div?.className).toBe('inner enter enter-from')
+
+      await result.hydrate()
+
+      div = document.querySelector('.inner')
+
+      expect(div).not.toBeNull()
+      expect(div?.className).toBe('inner enter enter-from')
     })
   })
 })

packages/@headlessui-react/src/components/transitions/transition.tsx

@@ -436,7 +436,7 @@ function TransitionChildFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_
   let theirProps = rest
   let ourProps = { ref: transitionRef }
 
-  if (appear && show && env.isServer) {
+  if (appear && show) {
     theirProps = {
       ...theirProps,
       // Already apply the `enter` and `enterFrom` on the server if required