Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

Fix: Support empty style attribute #296

Merged
merged 1 commit into from
Apr 3, 2020
Merged

Conversation

cribbles
Copy link
Contributor

@cribbles cribbles commented Apr 1, 2020

Fixes a bug in which empty style attributes result in unrecoverable JSX failures. For example:

<div style>Foo</div>

Would result in the following console error:

Uncaught Invariant Violation: The `style` prop expects a
mapping from style properties to values, not a string.
For example, style={{marginRight: spacing + 'em'}} when
using JSX.

and the React JSX failing to render.

The problem is that empty properties are rendered as boolean true by default. This is consistent with HTML/React syntax interop expectations for most properties but not style, which expects an Object value in React-land.

Since an empty style attribute is semantically meaningless (where HTML is concerned) we can simply skip over this property.

Fixes a bug in which empty style attributes result in
unrecoverable JSX failures. For example:

```html
<div style>Foo</div>
```

Would result in the following console error:

```
Uncaught Invariant Violation: The `style` prop expects a
mapping from style properties to values, not a string.
For example, style={{marginRight: spacing + 'em'}} when
using JSX.
```

and the React JSX failing to render.

The problem is that empty properties are rendered as
boolean `true` by default. This is consistent with
HTML/React syntax interop expectations for most properties
but not `style`, which expects an `Object` value in
React-land.

Since an empty `style` attribute is semantically
meaningless (where HTML is concerned) we can simply skip
over this property.
@codecov
Copy link

codecov bot commented Apr 1, 2020

Codecov Report

Merging #296 into master will increase coverage by 0.00%.
The diff coverage is 100.00%.

Impacted file tree graph

@@           Coverage Diff           @@
##           master     #296   +/-   ##
=======================================
  Coverage   99.22%   99.22%           
=======================================
  Files           1        1           
  Lines         386      387    +1     
  Branches       64       65    +1     
=======================================
+ Hits          383      384    +1     
  Misses          3        3           
Impacted Files Coverage Δ
index.js 99.22% <100.00%> (+<0.01%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update be04c33...d92c032. Read the comment docs.

cribbles pushed a commit to contentful/field-editors that referenced this pull request Apr 2, 2020
Pulls in a pre-compiled local branch including the changes from this
`markdown-to-jsx` PR:
quantizor/markdown-to-jsx#296 which in turn
fixes a bug in which empty style attributes (e.g. `<div
style>Foo</div>`) would cause unrecoverable crashes in the markdown
field editor.
cribbles pushed a commit to contentful/field-editors that referenced this pull request Apr 3, 2020
Pulls in a pre-compiled local branch including the changes from this
`markdown-to-jsx` PR:
quantizor/markdown-to-jsx#296 which in turn
fixes a bug in which empty style attributes (e.g. `<div
style>Foo</div>`) would cause unrecoverable crashes in the markdown
field editor.
@quantizor quantizor merged commit 8939f6f into quantizor:master Apr 3, 2020
@quantizor
Copy link
Owner

Thanks

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

Successfully merging this pull request may close these issues.

None yet

2 participants