grommet / grommet/jsx-to-string

Ignoring styled-jsx

Open
#32 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.