Parsing styled-jsx

[ghost]

Hi,

I'm working on our UI Library and I want to convert all the components to string so we can shown it as code ready to copy and paste.

We use styled-jsx and we need to convert snippets like this ⬇️ into strings.

<Button type="button" size="md" primary>Save</Button>
      <style jsx>{`
        .address{
          grid-template-columns: 66% 28%;
          display: grid;
          justify-content: space-between;
        }
`}</style>

This is the current output:

  <Button
    primary
    type="button"
  >
    Save
  </Button>
  <_class
    css=".address[data-jsx=&quot;2524236662&quot;]{-ms-grid-columns: 66% 28%;grid-template-columns: 66% 28%;display: -ms-grid;display: grid;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;}
/*@ sourceURL=components/ui-library/Forms.js */
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9yaWNhcmRvcmF1Y2gvU2l0ZXMvc2NhbGVhcGkuY29tL2Zyb250ZW5kL2NvbXBvbmVudHMvdWktbGlicmFyeS9Gb3Jtcy5qcyIsImNvbXBvbmVudHMvdWktbGlicmFyeS9Gb3Jtcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEwQ2tCLGdDQUV1QiwwQkFDakIsQUFEaUIsK0JBQ2pCLGtCQUNpQixBQURqQixjQUNpQiwwQkFDaEMsQUFEZ0MsdUJBQ2hDLEFBRGdDLCtCQUNoQyxDQUFBO0FDN0NULCtDQUErQyIsImZpbGUiOiJ0by5jc3MiLCJzb3VyY2VzQ29udGVu0= */"
    styleId={2524236662}
  />
</Form>

My code:

    let codeForm = reactElementToJSXString(
      this.props.children,
      {
        showDefaultProps: false,
        filterProps: ['data-jsx']
      }
    );

Thanks for this amazing lib!

[vvo]

Interesting feature request, no idea how to do it still! :)