Browserify complains about CSS

[0x80]

I'm getting this from my Grunt Browserify output. Are these files really CSS or do they need some sort of preprocessing?

>> /Users/me/project/node_modules/react-spinkit/css/fade-in.css:1
>> @-webkit-keyframes fade-in {
>> ^
>> ParseError: Unexpected character '@'

[KyleAMathews]

You need to add a CSS transformer like CSSify. Also the code is confusing atm because I didn't realize this when I first wrote this that you can't conditionally require things so CSS is always required.

[0x80]

Why don't you leave it up to the user to import the css into their own? Like with material-ui for example you place something like this in your less or sass files:

@import "node_modules/material-ui/src/less/scaffolding.less"; @import "node_modules/material-ui/src/less/components.less";

Then you can let people manage their own without forcing them into a certain workflow, and you don't have to worry about it.

[blakeembrey]

@KyleAMathews You can't use CSSify in modules from your application, so that doesn't work. You need to add it as a dependency here and set it in your package.json like https://github.com/substack/node-browserify#browserifytransform. Otherwise, I'd love to implement the CSS in JS with something like https://github.com/blakeembrey/free-style (which I've been working on) - if you're willing to check it out I'd be willing to make a PR.

[KyleAMathews]

@blakeembrey you can't do something like browserify -t cssify entry.js > bundle.js?

Also free-style looks pretty cool! Only problem here is animation doesn't work for inline styles and I want server rendered code to work before the JS code is loaded.

[blakeembrey]

@KyleAMathews Not on my own application with this as a dependency, since transforms are only for your own module (not dependencies). If you want CSSify to work with this, you need to put it in the package.json file as described under the browserify property.

The inline styles is a good point (I actually opted for SVG over this module, since this was causing me too much grief to bother fixing), but I'm not sure I follow what you mean with the server rendered code? It'd be the same sort of output as this?

[KyleAMathews]

@blakeembrey huh... hadn't realized that as I use Webpack and its "loaders" override all requires regardless of where in the code so this module just works for me.

By server rendered code — perhaps I was misunderstanding how your module works. I was assuming it works by injecting generated css in a style tag in the header using JS after the web page boots... I think I've seen some other projects that do this. But looking at it again, there's a way to add the CSS to the head on the server using getStyles()? Is there also a way to pull out the css into webpack similar to https://github.com/js-next/react-style-webpack-plugin ?

[blakeembrey]

@KyleAMathews Interesting - that actually sounds challenging since free-style supports multiple style sheets and instances. The goal is to generate stylesheets themselves from JavaScript (to support the animations)?

[KyleAMathews]

@blakeembrey yeah exactly. Generate the css from JS and have some way for Webpack/Browserify/etc to pull them out into an external css file similar to the react-style plugin.

[blakeembrey]

Yes, it should be possible for something like what they're doing.

[antonsivogrivov]

And what about the solution? I have the same issue.

[KyleAMathews]

@ansiv @blakeembrey I think the simplest thing to do atm it sounds like is to add the browersify specific css transform instructions to the package.json. And then hope that the React community decides soon on a React native way of handling css rules that don't work with inline styles.

[KyleAMathews]

@ansiv @blakeembrey could one of you create a PR?