search

cheton / browserify-css

A Browserify transform for bundling, rebasing, inlining, and minifying CSS files.
http://cheton.github.io/browserify-css/
MIT License
144 stars 22 forks source link

Error: property missing ':' near line #38

Closed pranavk closed 6 years ago

pranavk commented 8 years ago

I am require'ing app.css from my app.js. Following jqueryui path in my app.css seems to generate above mentioned error, failing the build process

@import jquery-ui/themes/base/theme.css

I would debug it myself but can't find any debug or verbose option with browserify-css transform. Any idea regarding whats wrong or how do I move forward to debug this ?

cheton commented 8 years ago

May I know how did you install jQuery UI, via NPM or Bower? If jquery-ui is under the node_modules directory, you can add a node_modules prefix to the url:

@import url("node_modules/jquery-ui/themes/base/theme.css");
pranavk commented 8 years ago

I installed jquery-ui via npm, and yeah thats exactly how I am including it using the 'node_modules' prefix.

localjo commented 6 years ago

I'm having the same issue. When I @import the jQuery UI CSS like this;

@import url("node_modules/jquery-ui/themes/base/theme.css");

I get "Error: /node_modules/jquery-ui/themes/base/jquery-ui.css:786:30: property missing ':' while parsing file". The line in question is;

font-size: 1.1em/*{fsDefault}*/;

Which is something I have no control over, since it's part of the jquery-ui dependency. One workaround I found was to import the minified file instead;

@import url("node_modules/jquery-ui/themes/base/minified/jquery-ui.min.css");

This works for me, but I'd be curious to know if there's any way to handle @importing a file from a dependency that doesn't have correct syntax.

cheton commented 6 years ago

@localjo

Will the error disappear if you manually remove those comments?

localjo commented 6 years ago

Yes, but since these are dependencies in my node_modules folder, manually editing them is not recommended. It would be nice if there was a way to handle @importing a file that I can't edit that doesn't have perfect syntax, since that's a situation that often happens with third party dependencies.

cheton commented 6 years ago

I just want to make sure whether removing comments from CSS files will work. I can add a piece of code to filter out comments before passing to the CSS parser.

cheton commented 6 years ago

Published v0.14.0

Now you can turn on the stripComments option to filter out inline comments. The value defaults to false. https://github.com/cheton/browserify-css#stripcomments

Note: important comments /*! (e.g. copyright) are preserved.