ParseError: Unexpected token

[trusktr]

I've a file that imports css like this:

import 'famous/core/famous.css'
import 'highlight.js/styles/solarized_light.css'

The famous.css file gets loaded just fine, but the second css file fails on the first character (a .).

solarized_light.css begins like this:

/*

Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>

*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #fdf6e3;
  color: #657b83;
  -webkit-text-size-adjust: none;
}

I've got the following transforms:

                  browserify.add(appFile)
                    .transform(to5ify)
                    .transform(famousify)
                    .transform(cssify)
                    .bundle(function(err, app) { ... }

and I'm getting this error:

Error: Error bundling app file /Users/josephpea/src/trusktr+readem/src/ejs/js/app.js.
/Users/josephpea/src/trusktr+readem/node_modules/highlight.js/styles/solarized_light.css:7
.hljs {
^
ParseError: Unexpected token
    at Labeled.<anonymous> (/Users/josephpea/src/trusktr+readem/bin/read'em.js:164:40)
    at Labeled.emit (events.js:95:17)
    at Labeled.<anonymous> (/Users/josephpea/src/trusktr+readem/node_modules/browserify/node_modules/labeled-stream-splicer/node_modules/stream-splicer/index.js:132:18)
    at Labeled.emit (events.js:117:20)
    at DestroyableTransform.<anonymous> (/Users/josephpea/src/trusktr+readem/node_modules/browserify/node_modules/labeled-stream-splicer/node_modules/stream-splicer/index.js:132:18)
    at DestroyableTransform.emit (events.js:95:17)
    at DestroyableTransform._transform (/Users/josephpea/src/trusktr+readem/node_modules/browserify/index.js:621:30)
    at DestroyableTransform.Transform._read (/Users/josephpea/src/trusktr+readem/node_modules/browserify/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:184:10)
    at DestroyableTransform.Transform._write (/Users/josephpea/src/trusktr+readem/node_modules/browserify/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:172:12)
    at Labeled.Pipeline._write (/Users/josephpea/src/trusktr+readem/node_modules/browserify/node_modules/labeled-stream-splicer/node_modules/stream-splicer/index.js:72:22)

Any idea what might be happening?

[trusktr]

My guess is that for some reason cssify isn't being applied, and the file is being read like a JavaScript file?

[trusktr]

It's not ES6 (6to5ify) getting in the way, I tried the following and still get the same error:

require('famous/core/famous.css')
require('highlight.js/styles/solarized_light.css')

[trusktr]

I'm only using cssify now, getting the same error.

                    //.transform(to5ify)
                    //.transform(famousify)
                    .transform(cssify)

[trusktr]

I pasted the content from famous.css into solarized_light.css, but the error is the same, right at the first period in front of the first class name. This makes me wonder if cssify is not recognizing the file as a CSS file or something?

[trusktr]

Apparently it's not cssify's fault at all. Browserify seems to support css files now, as I've completely removed cssify, and I'm still able to import famous.css just fine, and solarized_light.css continues to throw the same error.

[trusktr]

Nevermind, I was confused, there was another cssify somewhere in node_modules that was still working so it's not browserify. I removed node_modules and started over. Now I have cssify only in the top-level node_modules and am getting this problem.

Question: Does cssify ignore styles if they are required from a module dependency? For example, maybe having cssify inside of the highlight.js module would work, only?

[trusktr]

Yep! I think that's it. 'highlight.js/styles/solarized_light.css' is in a sub module, so it won't work in my module/application. I believe I must use a global transform. That's unintuitive on behalf of browserify.

[davidguttman]

Thanks for all the work on this! I'll look into what the best way to do this is.