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

Add support for custom HTML tags #647

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Conversation

ottobonn
Copy link

This PR is my follow-up to the discussion in vercel/next.js#13376. It adds support for custom HTML tags (whose names are lower case and contain hyphens) to styled-jsx.

Here's an example of such a tag in React:

export default function Test() {
  return (
    <my-test class="root">
      <style jsx>{`
        .root {
          margin: 0;
          width: 100%;
          height: 100%;
        }
      </style>
    </my-test>
  );
}

Before this PR, the output of styled-jsx would be:

<my-test class="root" className="jsx-12345">

This output is not quite right, because React passes through the raw class attribute of the element for custom HTML tags, and styled-jsx is attaching additional class names to className.

This PR adds code to detect custom element names and to use class instead of className for them.

@ottobonn ottobonn requested a review from giuseppeg as a code owner May 27, 2020 04:14
@ottobonn
Copy link
Author

Looks like the CI build failed due to the Zeit/Vercel rename...

@heff
Copy link

heff commented Mar 23, 2021

Thanks for figuring this out @ottobonn! Running into this issue with people trying to use styled-jsx with media-chrome custom elements. Is there something I can do to help get this over the line?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants