search

davidguttman / cssify

Simple middleware for Browserify to add css styles to the browser.
122 stars 19 forks source link

ParseError: Unexpected token { while processing 'bootstrap.min.css' #13

Closed almilo closed 10 years ago

almilo commented 10 years ago

I am using beefy 1.1.0, cssify 0.5.1, bootstrap 3.1.1 and browserify 4.1.9 in a dead-simple test application. When requiring the bootstrap.min.css from my 'main.js' (application's entry point), I get the CSS content dumped in the console and this error: 'ParseError: Unexpected token {'.

main.js: require('bootstrap/dist/css/bootstrap.min.css');

package.json: { "name": "browserify-test", "version": "0.0.0", "license": "ISC", "dependencies": { "jquery": "^2.1.1", "angular": "^1.2.16", "bootstrap": "^3.1.1" }, "devDependencies": { "beefy": "^1.1.0", "cssify": "^0.5.1" }, "browserify": { "transform": [ "cssify" ] } }

Console command to run beefy: beefy main.js:app.js --live --open

davidguttman commented 10 years ago

Seems to be related to a difference in how Browserify handles requiring a file within a dependent module (e.g. 'bootstrap/dist/css/bootstrap.min.css') and requiring a file located relative to the require (e.g. './node_modules/bootstrap/dist/css/bootstrap.min.css) -- the latter seems to work fine.

From what I can tell, Browserify treats the former file as JS -- causing the parse error before CSSify gets a chance to run (and perform the appropriate transform).

As a work around you can do require('./node_modules/bootstrap/dist/css/bootstrap.min.css');

I'll see if there are any related issues on Browserify, but in the meantime, maybe @substack knows more.

MylesBorins commented 10 years ago

I'm having the same problem requiring an asset that is in the node_modules folder. Explicitly stating the path does not seem to help fwiw

davidguttman commented 10 years ago

Ok, looks like it's intentional that Browserify won't run transforms "globally" by default. You can change this behavior with the -g flag: https://github.com/substack/node-browserify#usage

MylesBorins commented 10 years ago

Hey david... can we reopen this? Calling the transform with -g does not appear to fix the problem

MylesBorins commented 10 years ago

I dug in a bit more... the transform is actually never called on the element, as browserify is trying to load it as js by default.

While this can be solved running it with -g, it breaks again if you are running it in conjunction with brfs. I'm going to dig deeper, but it seems like brfs is somehow trying to do something with the css file.

MylesBorins commented 10 years ago

fixed it!!! Turns out brfs was attempting to process .css files

I have filed a pull request that stops this edge case, although I think that there could be a discussion about what the best way to solve the issue it.

https://github.com/substack/brfs/pull/31

davidguttman commented 10 years ago

Rad, thanks Myles =)

MylesBorins commented 10 years ago

This pull request wasn't accepted by substack, with good reason. I found a work around of symlinking the css file

https://github.com/Famous/browserify-seed/commit/b469d61d6b2b82107d1852ede7806f6546e247e4

While it isn't the most elegant I think it is not terrible practice. It is in the static directory, and it's contents will only change if the location changes in the dependency.