Using template literals in JSS yields "Malformed CSS string" warning

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

[kof]

Just fixed it in jss-template v1.0.1

[oliviertassinari]

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