Skip to content
New issue

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

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

Already on GitHub? # 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?

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

Successfully merging this pull request may close these issues.

2 participants