Skip to content

feat: typed CSSProperties for mux-player custom CSS vars#1216

Merged
luwes merged 8 commits intomuxinc:mainfrom
ignasio-mux:feat/mux-player-cssproperties
Nov 21, 2025
Merged

feat: typed CSSProperties for mux-player custom CSS vars#1216
luwes merged 8 commits intomuxinc:mainfrom
ignasio-mux:feat/mux-player-cssproperties

Conversation

@ignasio-mux
Copy link
Contributor

@ignasio-mux ignasio-mux commented Oct 21, 2025

This PR closes #1198

Created MuxPlayerCSSProperties interface that extends CSSProperties with support for any CSS custom property starting with --

@ignasio-mux ignasio-mux requested a review from a team as a code owner October 21, 2025 16:20
@vercel
Copy link

vercel bot commented Oct 21, 2025

@ignasio-mux is attempting to deploy a commit to the Mux Team on Vercel.

A member of the Team first needs to authorize it.

@snyk-io
Copy link

snyk-io bot commented Oct 21, 2025 •
edited
Loading

✅ Snyk checks have passed. No issues have been found so far.

Status Scanner Critical High Medium Low Total (0)
✅ Open Source Security 0 0 0 0 0 issues
✅ Licenses 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@vercel
Copy link

vercel bot commented Oct 22, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
elements-demo-astro Ready Ready Preview Comment Oct 24, 2025 2:23pm
elements-demo-nextjs Ready Ready Preview Comment Oct 24, 2025 2:23pm
elements-demo-svelte-kit Ready Ready Preview Comment Oct 24, 2025 2:23pm
elements-demo-vanilla Ready Ready Preview Comment Oct 24, 2025 2:23pm
elements-demo-vue Ready Ready Preview Comment Oct 24, 2025 2:23pm

@vercel vercel bot temporarily deployed to Preview – elements-demo-svelte-kit October 22, 2025 17:24 Inactive
@ronalduQualabs ronalduQualabs self-requested a review October 23, 2025 15:47
@vercel vercel bot temporarily deployed to Preview – elements-demo-svelte-kit October 24, 2025 14:22 Inactive
@ignasio-mux ignasio-mux requested a review from luwes October 24, 2025 14:25
@luwes luwes changed the title Feat: Properly typed CSSProperties for mux-player custom CSS vars feat: typed CSSProperties for mux-player custom CSS vars Oct 30, 2025
luwes
luwes requested changes Oct 30, 2025
View reviewed changes
packages/mux-player-react/src/types.ts Outdated
declare global {
namespace JSX {
interface IntrinsicElements {
'mux-player': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
Copy link
Contributor

@luwes luwes Oct 30, 2025

Choose a reason for hiding this comment

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

Hmm, what about all the other supported props. src, muted, etc. Are those types still intact?

Copy link
Contributor Author

@ignasio-mux ignasio-mux Nov 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

I decided to restore JSX IntrinsicElements for the web component. I tried using React.HTMLAttributes, but during testing I realized it allows any random attribute (like nacho="true"), which makes TypeScript checks pointless.

There doesn’t seem to be a simple way to only allow valid HTML, data-, aria-, and known component attributes at the same time.

I think this PR still makes sense since it fixes the issue for the React component.

@ignasio-mux ignasio-mux requested a review from luwes November 3, 2025 13:59
@luwes luwes merged commit 252e2f4 into muxinc:main Nov 21, 2025
5 of 10 checks passed
@github-actions github-actions bot mentioned this pull request Nov 21, 2025
Merged
luwes pushed a commit that referenced this pull request Nov 21, 2025
@github-actions
chore: release main (#1232)
a52639d 
🤖 I have created a release *beep* *boop*
---


<details><summary>@mux/mux-audio: 0.15.15</summary>

##
[0.15.15](https://github.com/muxinc/elements/compare/@mux/mux-audio@0.15.14...@mux/mux-audio@0.15.15)
(2025-11-21)


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @mux/playback-core bumped from 0.31.2 to 0.31.3
</details>

<details><summary>@mux/mux-audio-react: 0.15.15</summary>

##
[0.15.15](https://github.com/muxinc/elements/compare/@mux/mux-audio-react@0.15.14...@mux/mux-audio-react@0.15.15)
(2025-11-21)


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @mux/playback-core bumped from 0.31.2 to 0.31.3
</details>

<details><summary>@mux/playback-core: 0.31.3</summary>

##
[0.31.3](https://github.com/muxinc/elements/compare/@mux/playback-core@0.31.2...@mux/playback-core@0.31.3)
(2025-11-21)


### Bug Fixes

* suppressing non fatal errors
([#1239](#1239))
([1c2e0c3](1c2e0c3))
</details>

<details><summary>@mux/mux-player: 3.9.0</summary>

##
[3.9.0](https://github.com/muxinc/elements/compare/@mux/mux-player@3.8.0...@mux/mux-player@3.9.0)
(2025-11-21)


### Bug Fixes

* Add MENU_ITEM constant for styling of menu items with CSS
([#1212](#1212))
([78f7154](78f7154))
* bump the prod-dependencies group across 1 directory with 2 updates
([#1242](#1242))
([3379e62](3379e62))


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @mux/mux-video bumped from 0.27.2 to 0.28.0
    * @mux/playback-core bumped from 0.31.2 to 0.31.3
</details>

<details><summary>@mux/mux-player-astro: 3.9.0</summary>

##
[3.9.0](https://github.com/muxinc/elements/compare/@mux/mux-player-astro@3.8.0...@mux/mux-player-astro@3.9.0)
(2025-11-21)


### Miscellaneous Chores

* **@mux/mux-player-astro:** Synchronize player versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @mux/mux-player bumped from 3.8.0 to 3.9.0
    * @mux/playback-core bumped from 0.31.2 to 0.31.3
</details>

<details><summary>@mux/mux-player-react: 3.9.0</summary>

##
[3.9.0](https://github.com/muxinc/elements/compare/@mux/mux-player-react@3.8.0...@mux/mux-player-react@3.9.0)
(2025-11-21)


### Features

* typed CSSProperties for mux-player custom CSS vars
([#1216](#1216))
([252e2f4](252e2f4))


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @mux/mux-player bumped from 3.8.0 to 3.9.0
    * @mux/playback-core bumped from 0.31.2 to 0.31.3
</details>

<details><summary>@mux/mux-video: 0.28.0</summary>

##
[0.28.0](https://github.com/muxinc/elements/compare/@mux/mux-video@0.27.2...@mux/mux-video@0.28.0)
(2025-11-21)


### Features

* player disable tracking and cookies reactive
([#1214](#1214))
([54f7793](54f7793))


### Bug Fixes

* Add display names to React Components
([#1237](#1237))
([a201167](a201167))
* bump the prod-dependencies group across 1 directory with 2 updates
([#1242](#1242))
([3379e62](3379e62))


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @mux/playback-core bumped from 0.31.2 to 0.31.3
</details>

<details><summary>@mux/mux-video-react: 0.28.0</summary>

##
[0.28.0](https://github.com/muxinc/elements/compare/@mux/mux-video-react@0.27.2...@mux/mux-video-react@0.28.0)
(2025-11-21)


### Miscellaneous Chores

* **@mux/mux-video-react:** Synchronize video versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @mux/playback-core bumped from 0.31.2 to 0.31.3
</details>

<details><summary>@mux/mux-uploader: 1.4.0</summary>

##
[1.4.0](https://github.com/muxinc/elements/compare/@mux/mux-uploader@1.3.0...@mux/mux-uploader@1.4.0)
(2025-11-21)


### Features

* Add internationalization support to MuxUploader
([#1220](#1220))
([64cf297](64cf297))
</details>

<details><summary>@mux/mux-uploader-astro: 1.4.0</summary>

##
[1.4.0](https://github.com/muxinc/elements/compare/@mux/mux-uploader-astro@1.3.0...@mux/mux-uploader-astro@1.4.0)
(2025-11-21)


### Miscellaneous Chores

* **@mux/mux-uploader-astro:** Synchronize uploader versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @mux/mux-uploader bumped from 1.3.0 to 1.4.0
</details>

<details><summary>@mux/mux-uploader-react: 1.4.0</summary>

##
[1.4.0](https://github.com/muxinc/elements/compare/@mux/mux-uploader-react@1.3.0...@mux/mux-uploader-react@1.4.0)
(2025-11-21)


### Features

* Add internationalization support to MuxUploader
([#1220](#1220))
([64cf297](64cf297))


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @mux/mux-uploader bumped from 1.3.0 to 1.4.0
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@arcataroger
Copy link

arcataroger commented Nov 24, 2025 •
edited
Loading

Hello @luwes and @ignasio-mux,

Thank you for this fix. However, given this:

/**
 * CSS properties interface for Mux components
 * Extends standard CSSProperties to include custom CSS variables
 */
export interface MuxCSSProperties extends CSSProperties {
  [key: `--${string}`]: string | undefined;
}

Isn't that essentially the same as @ts-ignore? Done that way, there's no actual type hinting, and no guarantee that a property either exists or is properly used.

Is there no way to individually enumerate the actually-supported custom CSS props and values, e.g.:

"--controls"?: 'none' or "--controls-backdrop-color"?: CSSProperties["color"]

If that is too much work, I understand... at least this PR will stop the Typescript errors. Thank you either way!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@luwes luwes luwes approved these changes

@N1Knight N1Knight N1Knight approved these changes

@ronalduQualabs ronalduQualabs ronalduQualabs approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Feature Request: Properly typed CSSProperties for mux-player custom CSS vars

5 participants

@ignasio-mux @arcataroger @luwes @N1Knight @ronalduQualabs