Unexpected token ILLEGAL in concatenated CSS file

Question

I'm getting the following error in the Chrome console:

Uncaught SyntaxError: Unexpected token ILLEGAL

At the start of my concatenated CSS file:

@import url("http://fonts.googleapis.com/css?family=Raleway:300,400,600")

This line ends up on its own, and it's specifically this line that throws the error:

I've had a look around and it seems this error should relate to invisible characters making their way into the code. Unfortunately in my case that doesn't seem to be true. I've even deleted this portion of code and re-written it by hand to make sure - no difference.

I use Stylus (with gulp) and the resulting compile is naturally what throws the error - is this maybe an issue with gulp-stylus? I've looked at the compiled code and can't track down any invisible characters there either…

Does anything else throw this error?

Bautzen

Answer 1

The error implies you are trying to load the style sheet with <script> instead of <link rel=stylesheet>.

CSS is not JavaScript and can't be treated as such.

Karnes

Afraid not: <link rel="stylesheet" href="/assets/dist/all.min.css" /> – Bautzen

@NathanHornby — Nothing stopping you having an incorrect <script> too. – Karnes

Well my script declarations also look fine - and I imagine if the issue were there it wouldn't flag it on the first line of my CSS file… – Bautzen

@NathanHornby — It would if it was being told to load the CSS file as a <script>. – Karnes

Um, no it doesn't. The only reference I can find for that error is for invisible characters - as stated in the question. – Bautzen

Loading that CSS with a link element — test-cases.dorward.me.uk/stackoverflow/31784650/link.html — I can't reproduce the problem. – Karnes

Loading that CSS with a script element — test-cases.dorward.me.uk/stackoverflow/31784650/script.html — gives the exact error message you screenshoted. – Karnes

I'm not sure what you want me to say - I've stated it clearly enough - the CSS is not being loaded in via a script element. I think I would be able to tell. – Bautzen

Have you opened the source in your browser and clicked on the links of all your script elements to make sure they contain what you think they should contain? – Karnes

Have you tried manually deleting that line to see if it makes the error message going away? Does doing so give you a similar error message on the next line? Does adding alert("JS"); give you a similar error or does it load an alert window? – Karnes

Ah sheet - you were half right, typo in my gulp file was creating the bloody issue - in a similar way to what you describe, but harder to spot :/ Issue an edit to your answer and I'll upvote it. – Bautzen

Cheers - and thanks for your persistence! I thought you were going mad :p – Bautzen

These errors sneak up on you when using WP. It's the difference between wp_enqueue_style and wp_enqueue_script. This kicked my butt for a good 3 hours. Stupid silly mistakes. – Scrap