Multiline string, invalid or unexpected token

Question

I'm trying to add css to my page dynamically by building a css string that will be appended to the document's head. Since this string is long I want to break it up into multiple lines in my editor, so I do the following:

function generateCss(colors){
    var cssString = "* {margin: 0;padding: 0;} \ 
        #mainWrapper {width: 100vw;height: 100vh;background-color:#"+ colors['background'] + ";} \
        #mainWrapper div {height: 2vw;} \
        .cell {width: 2vw;background-color:#"+ colors['color1'] + ";display: inline-block;} \
        .active {background-color:#"+ colors['color2'] +" !important;}";
    console.log(cssString);
}

However, on the line where I create the cssString I get error: Uncaught SyntaxError: Invalid or unexpected token. Can anybody please help me figure out what I'm doing wrong?

This is a picture of my IDE for syntax highlighting reference:

score 3 · Accepted Answer · edited May 23 '17 at 12:00

3

var cssString = "* {margin: 0;padding: 0;} \

Note that you have an extra space at the end of the string. This causes the problem.

P.S. as a side note, it might be good to take in use something different then escaping, as stated in the following question:

Creating multiline strings in JavaScript

edited May 23 '17 at 12:00

Community

1
1

answered Sep 18 '16 at 08:20

Vladimir M

4,403
1
19
24

I moved the slash closer to the actual text and am still getting the same error – MarksCode Sep 18 '16 at 08:23
NOT the leading space, you have a space after the "\" character: "s\s", gotta be "s\" – Vladimir M Sep 18 '16 at 08:27

score 1 · Answer 2 · answered Sep 18 '16 at 08:19

1

try this :

function generateCss(colors){
    var cssString = `* {margin: 0;padding: 0;}
        #mainWrapper {width: 100vw;height: 100vh;background-color:#${colors['background']};}
        #mainWrapper div {height: 2vw;}
        .cell {width: 2vw;background-color:#${colors['color1']};display: inline-block;}
        .active {background-color:#${colors['color2']}!important;}`;
    console.log(cssString);
}

answered Sep 18 '16 at 08:19

Phi Nguyen

3,046
14
26

Why should he try this? Explain what you changed and why. Don't forget to mention that it won't work with old browsers, since this is a very new Javascript feature. – Barmar Sep 18 '16 at 08:36

Multiline string, invalid or unexpected token

2 Answers2