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

[mdarens]

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.

[kof]

Can you give me an example of jss code you are using?

[kof]

Is this enough to reproduce?

{
  button: {
    '&:after': {
      content: ''
     }
  }
}

[kof]

I was always wondering whether jss should just simply check the " in the beginning, and if it is not there, add those quotes around automatically.

[mdarens]

Here is the code I am using to reproduce it now:

index.jsx:

import React from "react";
import ReactDOM from "react-dom";

import Root from "./root";

ReactDOM.render((
        <Root />
), document.getElementById("exampleApp"));

root.jsx:

import React from "react";
import jss from "./jss-preset";
import useSheet from "react-jss";

const styles = {
    foo: {
        "&:after": {
            display: "block",           
            content: "bar"
        }
    }
};

const Root = ({
    sheet: { classes }
}) => {
    return <h1 className={classes.foo}>Hello World</h1>
};

export default useSheet(Root, styles);

jss-preset.js:

import jss from "jss";
import jssExtend from "jss-extend";
import jssNested from "jss-nested";
import jssCamelCase from "jss-camel-case";
import jssDefaultUnit from "jss-default-unit";
import jssVendorPrefixer from "jss-vendor-prefixer";

jss.use(jssExtend());
jss.use(jssNested());
jss.use(jssCamelCase());
jss.use(jssDefaultUnit());
jss.use(jssVendorPrefixer());

export default jss;

The nesting/pseudo-class is not necessary to reproduce it, just used as it reflects the typical usage pattern. Other properties on the nested selector work fine, and using content without the escaped quotes directly on the className key reproduces the error as well.

[mdarens]

That's what barium does: https://github.com/yuanyan/barium/blob/master/src/converter.js#L37-L41

[kof]

Oh now I recall again why I didn't auto insert them. This would break other cases. There are values for content that can be put there without quotes. https://developer.mozilla.org/de/docs/Web/CSS/content

Barium is broken by design.

[kof]

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.

[mdarens]

Perhaps a warning when the environment is debug to make sure content will produce a valid value, and/or some validation:

• one ofinherit, initial, none, normal, unset
• contains () (for url,counter,attr)
• contains \ (for escapes)
• contains quote

[kof]

I think someone who is writing it, will test and see if it doesn't work?

[kof]

I mean it won't work in any browser, just won't throw error in others than IE.

[kof]

please confirm that the error in IE has been fixed.

[kof]

you need to remove css-vendor package and install a new version or simply remove everything and install again.