Support jsx prop in style when using transformCss

[John Paul Calvo]

I have this code at the moment

import NProgress from "nextjs-progressbar";

export default function PageLoader() {
  return (
    <NProgress
      options={{
        template: '<div class="bar" role="progressbar" aria-role="Changing page"></div>',
        barSelector: '[role="progressbar"]',
        showSpinner: false,
      }}
      transformCSS={() => {
        return (
          <style jsx>{`
            #nprogress {
              pointer-events: none;
            }

            #nprogress .bar {
              background: pink;
              position: fixed;
              z-index: 999;
              top: 0;
              left: 0;
              width: 100%;
              height: 0.25rem;
            }
          `}</style>
        );
      }}
    />
  );
}

I'm passing jsx prop to add css syntax highlighting in vscode. Although this is working, I'm getting this warning in the console.

Warning: Received `true` for a non-boolean attribute `jsx`

Thanks in advance and really appreciate this lib 😊

[Parbez]

u can fix it using a similar approach to https://github.com/apal21/nextjs-progressbar/blob/master/tsconfig.json#L21 and https://github.com/apal21/nextjs-progressbar/blob/master/styleTypes.d.ts