From 7b256d2a8ee815911ee96199abe78d6b7246c415 Mon Sep 17 00:00:00 2001
From: Conlin Durbin <conlindurbin@protonmail.com>
Date: Mon, 30 Sep 2024 23:48:17 -0400
Subject: [PATCH] Add createViewTransition function (#1450)

Co-authored-by: Adam Skoufis <askoufis@users.noreply.github.com>
---
 .changeset/good-wombats-doubt.md              |  5 +++
 .changeset/purple-cheetahs-hear.md            | 20 ++++++++++
 .../babel-plugin-debug-ids/src/index.test.ts  | 13 +++++++
 packages/babel-plugin-debug-ids/src/index.ts  |  3 ++
 packages/css/src/index.ts                     |  1 +
 packages/css/src/viewTransition.ts            |  6 +++
 site/contents.js                              |  1 +
 site/docs/api/create-view-transition.md       | 37 +++++++++++++++++++
 8 files changed, 86 insertions(+)
 create mode 100644 .changeset/good-wombats-doubt.md
 create mode 100644 .changeset/purple-cheetahs-hear.md
 create mode 100644 packages/css/src/viewTransition.ts
 create mode 100644 site/docs/api/create-view-transition.md

diff --git a/.changeset/good-wombats-doubt.md b/.changeset/good-wombats-doubt.md
new file mode 100644
index 000000000..10f908329
--- /dev/null
+++ b/.changeset/good-wombats-doubt.md
@@ -0,0 +1,5 @@
+---
+"@vanilla-extract/babel-plugin-debug-ids": minor
+---
+
+Add support for the new `createViewTransition` API
diff --git a/.changeset/purple-cheetahs-hear.md b/.changeset/purple-cheetahs-hear.md
new file mode 100644
index 000000000..28cbeb67e
--- /dev/null
+++ b/.changeset/purple-cheetahs-hear.md
@@ -0,0 +1,20 @@
+---
+"@vanilla-extract/css": minor
+---
+
+Add `createViewTransition` API
+
+`createViewTransition` creates a single scoped view transition name for use with CSS View Transitions. This avoids potential naming collisions with other view transitions.
+
+```ts
+import {
+  style,
+  createViewTransition
+} from '@vanilla-extract/css';
+
+export const titleViewTransition = createViewTransition();
+
+export const pageTitle = style({
+  viewTransitionName: titleViewTransition
+});
+``
diff --git a/packages/babel-plugin-debug-ids/src/index.test.ts b/packages/babel-plugin-debug-ids/src/index.test.ts
index 61eb3d87d..9b9d4e862 100644
--- a/packages/babel-plugin-debug-ids/src/index.test.ts
+++ b/packages/babel-plugin-debug-ids/src/index.test.ts
@@ -230,6 +230,19 @@ describe('babel plugin', () => {
     `);
   });
 
+  it('should handle createViewTransition assigned to const', () => {
+    const source = `
+      import { createViewTransition } from '@vanilla-extract/css';
+
+      const myViewTransition = createViewTransition();
+    `;
+
+    expect(transform(source)).toMatchInlineSnapshot(`
+      import { createViewTransition } from '@vanilla-extract/css';
+      const myViewTransition = createViewTransition("myViewTransition");
+    `);
+  });
+
   it('should handle fontFace assigned to const', () => {
     const source = `
       import { fontFace } from '@vanilla-extract/css';
diff --git a/packages/babel-plugin-debug-ids/src/index.ts b/packages/babel-plugin-debug-ids/src/index.ts
index 2ba1eca55..2b0ef6d2f 100644
--- a/packages/babel-plugin-debug-ids/src/index.ts
+++ b/packages/babel-plugin-debug-ids/src/index.ts
@@ -39,6 +39,9 @@ const debuggableFunctionConfig = {
   createContainer: {
     maxParams: 1,
   },
+  createViewTransition: {
+    maxParams: 1,
+  },
   layer: {
     maxParams: 2,
     hasDebugId: ({ arguments: args }) => {
diff --git a/packages/css/src/index.ts b/packages/css/src/index.ts
index 28937df8c..b167e4832 100644
--- a/packages/css/src/index.ts
+++ b/packages/css/src/index.ts
@@ -13,4 +13,5 @@ export * from './theme';
 export * from './style';
 export * from './vars';
 export { createContainer } from './container';
+export { createViewTransition } from './viewTransition';
 export * from './layer';
diff --git a/packages/css/src/viewTransition.ts b/packages/css/src/viewTransition.ts
new file mode 100644
index 000000000..654d69828
--- /dev/null
+++ b/packages/css/src/viewTransition.ts
@@ -0,0 +1,6 @@
+import { generateIdentifier } from './identifier';
+
+// createViewTransition is used for locally scoping CSS view transitions
+// For now it is mostly just an alias of generateIdentifier
+export const createViewTransition = (debugId?: string) =>
+  generateIdentifier(debugId);
diff --git a/site/contents.js b/site/contents.js
index 8ff921c5c..61f8449a2 100644
--- a/site/contents.js
+++ b/site/contents.js
@@ -25,6 +25,7 @@ const contents = [
       'keyframes',
       'create-container',
       'layer',
+      'create-view-transition',
       'add-function-serializer',
     ],
   },
diff --git a/site/docs/api/create-view-transition.md b/site/docs/api/create-view-transition.md
new file mode 100644
index 000000000..a8e58b67f
--- /dev/null
+++ b/site/docs/api/create-view-transition.md
@@ -0,0 +1,37 @@
+---
+title: createViewTransition
+parent: api
+---
+
+# createViewTransition
+
+Creates a single scoped view transition name for use with [CSS View Transitions].
+This avoids potential naming collisions with other view transitions.
+
+> 🚧&nbsp;&nbsp;Ensure your target browsers [support view transitions].
+> Vanilla-extract supports the [view transition syntax][css view transitions] but does not polyfill the feature in unsupported browsers.
+
+```ts compiled
+// itemPage.css.ts
+import {
+  style,
+  createViewTransition
+} from '@vanilla-extract/css';
+
+export const titleViewTransition = createViewTransition();
+
+export const pageTitle = style({
+  viewTransitionName: titleViewTransition
+});
+
+// navigation.css.ts
+import { style } from '@vanilla-extract/css';
+import { titleViewTransition } from './itemPage.css.ts';
+
+export const navigationLinkTitle = style({
+  viewTransitionName: titleViewTransition
+});
+```
+
+[css view transitions]: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API#css_additions
+[support view transitions]: https://caniuse.com/view-transitions