jss: [jss-vendor-prefixer] Naive use of `content` prop causes uncaught error in IE

When using the content prop (in this case for the usual task of styling pseudo-elements), if escaped quote characters are not passed into the string given as the value, the value ends up getting passed without quotes.

While Chrome and Edge pass it through and simply ignore the invalid value, in IE11, css-vendor/supported-value.js throws an error:

[Main Thread]
supportedValue [Line: 41, Col: 1], supported-value.js
Anonymous function [Line: 37, Col: 1], index.js
run [Line: 49, Col: 1], PluginsRegistry.js
createRule [Line: 213, Col: 1], StyleSheet.js
Anonymous function [Line: 37, Col: 1], index.js
run [Line: 49, Col: 1], PluginsRegistry.js
createRule [Line: 213, Col: 1], StyleSheet.js
StyleSheet [Line: 60, Col: 1], StyleSheet.js
createStyleSheet [Line: 79, Col: 1], Jss.js
attach [Line: 38, Col: 1], index.js
ref [Line: 47, Col: 1], index.js
componentWillMount [Line: 71, Col: 1], index.js
ReactCompositeComponentMixin.mountComponent [Line: 210, Col: 1], ReactCompositeComponent.js
wrapper [Line: 66, Col: 1], ReactPerf.js
ReactReconciler.mountComponent [Line: 37, Col: 1], ReactReconciler.js
ReactCompositeComponentMixin.mountComponent [Line: 225, Col: 1], ReactCompositeComponent.js
wrapper [Line: 66, Col: 1], ReactPerf.js
ReactReconciler.mountComponent [Line: 37, Col: 1], ReactReconciler.js
mountComponentIntoNode [Line: 266, Col: 1], ReactMount.js
Mixin.perform [Line: 136, Col: 1], Transaction.js
batchedMountComponentIntoNode [Line: 282, Col: 1], ReactMount.js
Mixin.perform [Line: 136, Col: 1], Transaction.js
ReactDefaultBatchingStrategy.batchedUpdates [Line: 62, Col: 1], ReactDefaultBatchingStrategy.js
batchedUpdates [Line: 94, Col: 1], ReactUpdates.js
ReactMount._renderNewRootComponent [Line: 476, Col: 1], ReactMount.js
wrapper [Line: 66, Col: 1], ReactPerf.js
ReactMount._renderSubtreeIntoContainer [Line: 550, Col: 1], ReactMount.js
ReactMount.render [Line: 570, Col: 1], ReactMount.js
wrapper [Line: 66, Col: 1], ReactPerf.js
Anonymous function [Line: 9, Col: 1], index.jsx
s [Line: 1, Col: 1], _prelude.js
e [Line: 1, Col: 1], _prelude.js
Anonymous function [Line: 1, Col: 1], _prelude.js
Anonymous function [Line: 1, Col: 1], _prelude.js
Global code [Line: 1, Col: 1], _prelude.js

When jss-vendor-prefixer is disabled, IE behavior is identical to Chrome/Edge.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 21 (19 by maintainers)

Commits related to this issue

Most upvoted comments

I have got a similar issue with this line content: '\'\'',. IE11 is throwing right here. Using content: '""', solves the issue.

The only thing I can optimize there is when content value is an empty string, in this case I can auto insert double quotes.

Now back to the original issue. I am really surprised that IE throws a js error in such case.