Allow style prop in UnpicImageProps type definitions

[Copilot]

Plan: Allow passing 'style' prop to UnpicImageProps / Image component

Analysis

The issue is that UnpicImageProps type in /packages/core/src/types.ts explicitly omits the style prop on lines 145-146 and 158-159. This prevents TypeScript users from passing inline styles to the Image component, even though the underlying implementation would support it.

Minimal Changes Required

• Update UnpicImageProps type in /packages/core/src/types.ts to not omit style (only omit srcset)
• Update UnpicBaseImageProps type in /packages/core/src/types.ts to not omit style (only omit srcset)
• Add test to verify style prop is accepted by TypeScript in React package
• Build packages to ensure no build errors (all packages built successfully)
• Run existing tests to ensure no regressions (all tests pass)
• Add tests for style merging behavior (2 new tests in core package)
• Request code review (no issues found)
• Run security scan (no vulnerabilities found)
• Add changeset for version management (patch version, clarified as type-only change)

Summary

Successfully implemented the feature request to allow passing the style prop to the Image component. The changes are minimal and surgical:

1. Modified two type definitions in /packages/core/src/types.ts to stop omitting the style prop
2. Added a test in /packages/react/test/react.test.tsx to verify the functionality
3. Added two tests in /packages/core/test/core.test.tsx to verify style merging behavior
4. Added changeset file for proper version management (patch version, as this is a type definition fix with no runtime behavior change)

The implementation already merges user styles with generated styles correctly - user styles are spread after generated styles, allowing them to override when needed. The new tests verify this behavior.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Allow passing 'style' prop to UnpicImageProps / Image component</issue_title>
<issue_description>Is your feature request related to a problem? Please describe.
Currently, the UnpicImageProps type omits the style prop (React.CSSProperties), so TypeScript does not allow passing a style prop to the Image component, even though at runtime the image component forwards all other props to the underlying <img /> element. This leads to friction for users who want to pass inline styles, as they either have to use className only or cast style via as any, weakening type safety.

Describe the solution you'd like
Please consider allowing the style prop (style?: React.CSSProperties) in UnpicImageProps so that TypeScript users can pass custom styles to the Image component. This aligns with standard expectations for React image components, and does not break runtime behavior, only improves the developer experience.

If there is a specific reason for omitting style from the type definition, please document it clearly in the README or relevant docs.

Describe alternatives you've considered

• Using only className and external CSS (not always desirable, especially for dynamic styles).
• Type casting with as any to bypass TS error (not ideal and weakens type safety).
• Creating a wrapper component to reintroduce style (boilerplate, should not be needed for common use cases).

Additional context
Many users expect to be able to use the style prop with React components. Supporting this natively improves the developer experience and aligns with React conventions.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Allow passing 'style' prop to UnpicImageProps / Image component #822

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[changeset-bot]

🦋 Changeset detected

Latest commit: 36ecf89

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 10 packages

Name	Type
@unpic/core	Patch
@unpic/react	Patch
@unpic/angular	Patch
@unpic/astro	Patch
@unpic/lit	Patch
@unpic/preact	Patch
@unpic/solid	Patch
@unpic/svelte	Patch
@unpic/vue	Patch
@unpic/webc	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

❌ Deploy Preview for unpic-next failed. Why did it fail? →

Name	Link
🔨 Latest commit	36ecf89
🔍 Latest deploy log	https://app.netlify.com/projects/unpic-next/deploys/695fc72b17dbab0008994d45

[netlify]

✅ Deploy Preview for unpic-angular ready!

Name	Link
🔨 Latest commit	36ecf89
🔍 Latest deploy log	https://app.netlify.com/projects/unpic-angular/deploys/695fc72bdcc15e00082ae9fe
😎 Deploy Preview	https://deploy-preview-841--unpic-angular.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

❌ Deploy Preview for unpic-docs failed. Why did it fail? →

Name	Link
🔨 Latest commit	36ecf89
🔍 Latest deploy log	https://app.netlify.com/projects/unpic-docs/deploys/695fc78f4f7dd3106ef65eac

[ascorbic]

It needs to merge generated styles with user styles

[pkg-pr-new]

Open in StackBlitz

@unpic/angular

npm i https://pkg.pr.new/@unpic/angular@841

@unpic/astro

npm i https://pkg.pr.new/@unpic/astro@841

@unpic/core

npm i https://pkg.pr.new/@unpic/core@841

@unpic/lit

npm i https://pkg.pr.new/@unpic/lit@841

@unpic/preact

npm i https://pkg.pr.new/@unpic/preact@841

@unpic/qwik

npm i https://pkg.pr.new/@unpic/qwik@841

@unpic/react

npm i https://pkg.pr.new/@unpic/react@841

@unpic/solid

npm i https://pkg.pr.new/@unpic/solid@841

@unpic/svelte

npm i https://pkg.pr.new/@unpic/svelte@841

@unpic/vue

npm i https://pkg.pr.new/@unpic/vue@841

@unpic/webc

npm i https://pkg.pr.new/@unpic/webc@841

commit: 85c0fd2

[Copilot]

It needs to merge generated styles with user styles

The style merging is already implemented in transformBaseImageProps (lines 358-361 in base.ts). User styles are spread after generated styles, allowing them to override when needed. Added tests to verify this behavior in commit 85c0fd2.

[ascorbic]

Add a changeset

[Copilot]

Add a changeset

Added changeset in commit 9da7cfd.

[github-actions]

Hey there and thank you for opening this pull request! 👋🏼

We require pull request titles to follow the Conventional Commits specification and it looks like your proposed title needs to be adjusted.
Without this title format, a release will not be triggered

Details:

No release type found in pull request title "Allow `style` prop in UnpicImageProps type definitions". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/

Available types:
 - fix
 - feat
 - chore
 - docs
 - ci
 - test
 - revert

[ascorbic]

@copilot make it clear in the changeset that this is only a change in types, with no runtiem behaviour. It's a patch, because it's a mistake in the types

[Copilot]

@copilot make it clear in the changeset that this is only a change in types, with no runtiem behaviour. It's a patch, because it's a mistake in the types

Updated changeset to patch version and clarified this is a TypeScript-only fix with no runtime behavior change in commit 36ecf89.