Material-ui: Using template literals in JSS yields "Malformed CSS string" warning

[cezarderevlean]

I added jss-preset-default in order to be able to use template literals in JSS, among other stuff.

import { create } from 'jss';
import jssPreset from 'jss-preset-default';
import JssProvider from 'react-jss/lib/JssProvider';

const jss = create(jssPreset());

...

<JssProvider jss={jss}>
    <App />
</JssProvider>

import { withStyles } from 'material-ui/styles';

const styles = theme => ({
    test: `
        color: red;
        background: blue;
    `
});

class App extends Component {
    render() {
        return (
            <div className={this.props.classes.test}>
                Lorem ipsum dolor
            </div>
        );
    }
}

export default withStyles(styles)(App);

Expected Behavior

It should make the text in the div red and the div background blue, without any console errors.

Current Behavior

The styles apply correctly and work fine, but this error shows up in console (in red):
Warning: Malformed CSS string " "

| warning | @ | browser.js?1af0:49 |
| -- | -- | -- |
| exports.default | @ | parse.js?fbfc:31 |
| onProcessRule | @ | index.js?ff0a:15 |
| onProcessRule | @ | PluginsRegistry.js?e077:56 |
| process | @ | RuleList.js?5e19:147 |
| GlobalContainerRule | @ | index.js?9c36:36 |
| onCreateRule | @ | index.js?9c36:162 |
| onCreateRule | @ | PluginsRegistry.js?e077:39 |
| createRule | @ | createRule.js?c07d:33 |
| add | @ | RuleList.js?5e19:88 |
| StyleSheet | @ | StyleSheet.js?6b95:40 |
| createStyleSheet | @ | Jss.js?370d:123 |
| attach | @ | withStyles.js?deb5:282 |
| attach | @ | createPrototypeProxy.js?6ea8:44 |
| componentWillReceiveProps | @ | withStyles.js?deb5:238 |
| componentWillReceiveProps | @ | createPrototypeProxy.js?6ea8:44 |
| callComponentWillReceiveProps | @ | react-dom.development.js?cada:6389 |
| updateClassInstance | @ | react-dom.development.js?cada:6575 |
| updateClassComponent | @ | react-dom.development.js?cada:7848 |
| beginWork | @ | react-dom.development.js?cada:8225 |
| performUnitOfWork | @ | react-dom.development.js?cada:10224 |
| workLoop | @ | react-dom.development.js?cada:10288 |
| callCallback | @ | react-dom.development.js?cada:542 |
| invokeGuardedCallbackDev | @ | react-dom.development.js?cada:581 |
| invokeGuardedCallback | @ | react-dom.development.js?cada:438 |
| renderRoot | @ | react-dom.development.js?cada:10366 |
| performWorkOnRoot | @ | react-dom.development.js?cada:11014 |
| performWork | @ | react-dom.development.js?cada:10967 |
| requestWork | @ | react-dom.development.js?cada:10878 |
| scheduleWorkImpl | @ | react-dom.development.js?cada:10732 |
| scheduleWork | @ | react-dom.development.js?cada:10689 |
| scheduleTopLevelUpdate | @ | react-dom.development.js?cada:11193 |
| updateContainer | @ | react-dom.development.js?cada:11231 |
| renderSubtreeIntoContainer | @ | react-dom.development.js?cada:15229 |
| render | @ | react-dom.development.js?cada:15290 |
| render | @ | index.jsx?a980:36 |
| (anonymous) | @ | index.jsx?a980:55 |
| (anonymous) | @ | index.jsx?a980:55 |
| hotApply | @ | main.js:582 |
| (anonymous) | @ | main.js:290 |
| Promise resolved (async) |   |   |
| hotUpdateDownloaded | @ | main.js:289 |
| hotAddUpdateChunk | @ | main.js:266 |
| webpackHotUpdateCallback | @ | main.js:8 |
| (anonymous) | @ | 0.7715afa….hot-update.js:1 |

Steps to Reproduce (for bugs)

https://codesandbox.io/s/jpm8kx6245

1. Use code above
2. Check console

Context

I'm trying to use template literals in JSS (with the help of jss-template which is included in jss-preset-default).

Environment

| Tech | Version |
|--------------|---------|
├─ jss-preset-default | 4.0.1
├─ jss | 9.5.1
├─ material-ui | 1.0.0-beta.29
├─ react-jss | 8.2.1
└─ react | 16.2.0
Browser: Chrome | 63.0.3239.132

[oliviertassinari]

@cezarderevlean I can confirm the warning. Thanks for providing a reproduction example!
The warnings comes from this line: https://github.com/cssinjs/jss-template/blob/7e42501edbc53e33a811d22eb0a366db9f5359c5/src/parse.js#L20
If I eval cssText I get:

cssText = "
    color: red;
    background: blue;
  "
split = (3) ["↵    color: red", "    background: blue", "  "]

@kof Sounds like we have found an edge case (there is an extra line break).

[oliviertassinari]

@cezarderevlean I think that you should be opening the issue on JSS side. It's uncorrelated to Material-UI.

[kof]

Just fixed it in jss-template v1.0.1

[kof]

feel free to reopen if still a problem

[cezarderevlean]

Yes, it's fine now. Thank you!

[oliviertassinari]

@kof This was quick! Awesome :)