grommet / grommet/jsx-to-string
Ignoring styled-jsx
- Dominant language
- JavaScript
- Stars
- 122
- Forks
- 26
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
I'm working on our UI Library and I want to convect 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.
```
Save
{`
.address{
grid-template-columns: 66% 28%;
display: grid;
justify-content: space-between;
}
`}
```
This is the current output:
```
Name Last Name Address Country Do you own a car? Colors Save <_class styleId={2524236662} css='.address[data-jsx="2524236662"]{-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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9yaWNhcmRvcmF1Y2gvU2l0ZXMvc2NhbGVhcGkuY29tL2Zyb250ZW5kL2NvbXBvbmVudHMvdWktbGlicmFyeS9Gb3Jtcy5qcyIsImNvbXBvbmVudHMvdWktbGlicmFyeS9Gb3Jtcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0SGtCLGdDQUV1QiwwQkFDakIsQUFEaUIsK0JBQ2pCLGtCQUNpQixBQURqQixjQUNpQiwwQkFDaEMsQUFEZ0MsdUJBQ2hDLEFBR />
```
And I want to hide:
`/*@ sourceURL=components/ui-library/Forms.js */ /*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9yaWNhcmRvcmF1Y2gvU2l0ZXMvc2NhbGVhcGkuY29tL2Zyb250ZW5kL2NvbXBvbmVudHMvdWktbGlicmFyeS9Gb3Jtcy5qcyIsImNvbXBvbmVudHMvdWktbGlicmFyeS9Gb3Jtcy5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUE0SGtCLGdDQUV1QiwwQkFDakIsQUFEaUIsK0JBQ2pCLGtCQUNpQixBQURqQixjQUNpQiwwQkFDaEMsQUFEZ0MsdUJBQ2hDLEFBR`
My code:
```
let codeForm = jsxToString(
Form1,
{
shortBooleanSyntax: true,
ignoreTags: ['svg', 'img', 'div', 'style jsx']
}
);
```
Thanks for this amazing lib!
Contributor guide
No contributing guide indexed for this repository
Research direction
Start from the jsxToString call and its ignoreTags option shown in the issue, then trace how styled-jsx output is handled. Done means the generated string omits the styled-jsx element and its sourceURL/sourceMappingURL comments while preserving the other JSX output.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100