---
title: "duplicate-view-transition-name"
description: "Reports two .for() calls in one style() call."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# duplicate-view-transition-name

This rule reports a `style()` call with more than one `.for()`. An element has one
`view-transition-name`, so only one of the names takes effect.

## Reported

```tsx
const transition = style.viewTransition({ old: "duration-150" });
style(transition.for("a"), transition.for("b"));
```

> duplicate-view-transition-name: 2 view-transition-name sources in one style() call; only one element value applies, and a runtime name wins
> 
> Example:2:1

## Fixed

```tsx
const transition = style.viewTransition({ old: "duration-150" });
style(transition.for("a"));
```

## How to fix

- Keep one `.for()` for the element, as in the example.
- If the names belong to different elements, give each element its own
  `style()` call with its own `.for()`.
- To combine several transitions on one element, pass the others without
  `.for()`, such as `style(fade, slide.for("a"))`.

## Rule settings

| Preset | Severity |
| --- | --- |
| `recommended` | warn |
| `strict` | deny |
| `stylistic` | off |

[Configure lint](/docs/configuration#lint) to change the severity or options.

Source: https://stillwind.dev/docs/lints/duplicate-view-transition-name/index.mdx