Skip to content

Commit

Permalink
Add createViewTransition function (#1450)
Browse files Browse the repository at this point in the history
Co-authored-by: Adam Skoufis <askoufis@users.noreply.github.com>
  • Loading branch information
wuz and askoufis authored Oct 1, 2024
1 parent d271b9f commit 7b256d2
Show file tree
Hide file tree
Showing 8 changed files with 86 additions and 0 deletions.
5 changes: 5 additions & 0 deletions .changeset/good-wombats-doubt.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@vanilla-extract/babel-plugin-debug-ids": minor
---

Add support for the new `createViewTransition` API
20 changes: 20 additions & 0 deletions .changeset/purple-cheetahs-hear.md
Original file line number Diff line number Diff line change
@@ -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
});
``
13 changes: 13 additions & 0 deletions packages/babel-plugin-debug-ids/src/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
3 changes: 3 additions & 0 deletions packages/babel-plugin-debug-ids/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ const debuggableFunctionConfig = {
createContainer: {
maxParams: 1,
},
createViewTransition: {
maxParams: 1,
},
layer: {
maxParams: 2,
hasDebugId: ({ arguments: args }) => {
Expand Down
1 change: 1 addition & 0 deletions packages/css/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,5 @@ export * from './theme';
export * from './style';
export * from './vars';
export { createContainer } from './container';
export { createViewTransition } from './viewTransition';
export * from './layer';
6 changes: 6 additions & 0 deletions packages/css/src/viewTransition.ts
Original file line number Diff line number Diff line change
@@ -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);
1 change: 1 addition & 0 deletions site/contents.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const contents = [
'keyframes',
'create-container',
'layer',
'create-view-transition',
'add-function-serializer',
],
},
Expand Down
37 changes: 37 additions & 0 deletions site/docs/api/create-view-transition.md
Original file line number Diff line number Diff line change
@@ -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

0 comments on commit 7b256d2

Please sign in to comment.