Skip to content

fix(Image): inline ImageFit and ImagePosition types to avoid csstype leak (TS2742) #13823

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tomeelog wants to merge 1 commit into
base: main
Choose a base branch
from
+32 −4
Open

fix(Image): inline ImageFit and ImagePosition types to avoid csstype leak (TS2742) #13823

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions packages/vant/src/image/test/index.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'rstest-canvas-mock';
import { mount } from '../../../test';
import { Lazyload } from '../../lazyload';
import VanImage from '..';
import type { ImageFit, ImagePosition } from '../types';

const IMAGE_URL = 'https://img.com';

Expand Down Expand Up @@ -244,3 +245,25 @@ test('should render default slot correctly', () => {
// },
// });
// });

// Regression test for https://github.com/youzan/vant/issues/13818
// ImageFit and ImagePosition must be self-contained types that do not
// reference csstype, so that consumers generating d.ts files do not
// encounter TS2742 ("cannot be named without a reference to …csstype").
test('ImageFit only allows valid CSS object-fit keywords', () => {
const validFits: ImageFit[] = ['contain', 'cover', 'fill', 'none', 'scale-down'];
validFits.forEach((fit) => {
const wrapper = mount(VanImage, {
props: { src: 'https://img.com', fit },
});
expect(wrapper.find('img').attributes('style')).toContain(`object-fit: ${fit}`);
});
});

test('ImagePosition accepts a string value', () => {
const position: ImagePosition = 'center top';
const wrapper = mount(VanImage, {
props: { src: 'https://img.com', position },
});
expect(wrapper.find('img').attributes('style')).toContain('object-position: center top');
});
13 changes: 9 additions & 4 deletions packages/vant/src/image/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
import type { CSSProperties } from 'vue';
// Use explicit union types instead of CSSProperties lookups to avoid
// csstype leaking into consumers' generated d.ts files (TS2742).
export type ImageFit =
| 'contain'
| 'cover'
| 'fill'
| 'none'
| 'scale-down';
Comment on lines +3 to +8

@gemini-code-assist gemini-code-assist Bot Apr 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

The new ImageFit type is missing global CSS values such as inherit, initial, and unset which were previously supported via CSSProperties['objectFit']. Omitting these could be a breaking change for users relying on them. Consider including these global values in the union to maintain full compatibility while still avoiding the csstype leak.

export type ImageFit =
  | 'contain'
  | 'cover'
  | 'fill'
  | 'none'
  | 'scale-down'
  | 'inherit'
  | 'initial'
  | 'revert'
  | 'revert-layer'
  | 'unset';


export type ImageFit = CSSProperties['objectFit'];

export type ImagePosition = CSSProperties['objectPosition'];
export type ImagePosition = string;

export type ImageThemeVars = {
imagePlaceholderTextColor?: string;
Expand Down
Loading