Skip to content
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.

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

Compatibility with Solid and other JSX flavors #2247

Closed
4 tasks done
DaniGuardiola opened this issue Feb 8, 2023 · 0 comments · Fixed by #2255
Closed
4 tasks done

Compatibility with Solid and other JSX flavors #2247

DaniGuardiola opened this issue Feb 8, 2023 · 0 comments · Fixed by #2255
Labels
💪 phase/solved Post is done 🦋 type/enhancement This is great to have

Comments

@DaniGuardiola
Copy link

DaniGuardiola commented Feb 8, 2023

Initial checklist

Problem

Currently this package is only compatible with React-like JSX flavors, for example by outputting className for CSS classes, and camel cased CSS properties in the style object..

Solution

The underlying utility used in the recma plugin to create the jsx is hast-util-to-estree. This util has recently updated to support options to customize how it get rendered (for example, by using class instead of className, which is necessary for Solid).

These new options should be made available and passed through by this package, so that users can take advantage of them.

Context: syntax-tree/hast-util-to-estree#7 (comment)

Alternatives

None :)

@wooorm wooorm added the 🦋 type/enhancement This is great to have label Feb 9, 2023
wooorm added a commit that referenced this issue Feb 9, 2023
React uses their own style of attributes (similar to the DOM), such as
`className` instead of `class`.
Some ther frameworks don’t support that: they want you to pass `class`.
Similarly, React wants `WebkitBoxShadow`, while other frameworks want
`-webkit-box-shadow`.

This particularly becomes an issue around more complex things such as
SVG.
With this commit, you can now configure the exact style that your
particular framework accepts.

Closes GH-2247.
wooorm added a commit that referenced this issue Feb 9, 2023
React uses their own style of attributes (similar to the DOM), such as `className` instead of `class`.
Some ther frameworks don’t support that: they want you to pass `class`. Similarly, React wants `WebkitBoxShadow`, while other frameworks want `-webkit-box-shadow`.

This particularly becomes an issue around more complex things such as SVG.
With this commit, you can now configure the exact style that your particular framework accepts.

Closes GH-2247.
Closes GH-2255.

Reviewed-by: Christian Murphy <christian.murphy.42@gmail.com>
@wooorm wooorm added the 💪 phase/solved Post is done label Feb 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💪 phase/solved Post is done 🦋 type/enhancement This is great to have
Development

Successfully merging a pull request may close this issue.

2 participants