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
- catch IE exceptions when feature testing a value jsstyles/jss#242 — committed to cssinjs/css-vendor by kof 8 years ago
- temp fix for jss css-vendor content esc issue https://github.com/jsstyles/jss/issues/242 — committed to Gopal2bn/coreui1 by deleted user 8 years ago
I have got a similar issue with this line
content: '\'\'',. IE11 is throwing right here. Usingcontent: '""',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.