fmarcia/uglifycss

Port of YUI CSS Compressor from Java to NodeJS

UglifyCSS is a port of YUI Compressor to NodeJS for its CSS part. Its name is a reference to the awesome UglifyJS but UglifyCSS is not a CSS parser. Like YUI CSS Compressor, it applies many regexp replacements. Note that a port to JavaScript is also available in the YUI Compressor repository.

UglifyCSS passes successfully the test suite of YUI compressor CSS.

Be sure to submit valid CSS to UglifyCSS or you could get weird results.

Installation

For a command line usage:

$ npm install uglifycss -g

For API usage:

$ npm install uglifycss

From Github:

$ git clone git://github.com/fmarcia/UglifyCSS.git

Command line

$ uglifycss [options] [filename] [...] > output

Options:

• --max-line-len n adds a newline (approx.) every n characters; 0 means no newline and is the default value
• --expand-vars expands variables; by default, @variables blocks are preserved and var(x)s are not expanded
• --ugly-comments removes newlines within preserved comments; by default, newlines are preserved
• --cute-comments preserves newlines within and around preserved comments
• --convert-urls d converts relative urls using the d directory as location target
• --debug prints full error stack on error
• --output f puts the result in f file

If no file name is specified, input is read from stdin.

API

2 functions are provided:

• processString( content, options ) to process a given string
• processFiles( [ filename1, ... ], options ) to process the concatenation of given files

Options are identical to the command line:

• <int> maxLineLen for --max-line-len n
• <bool> expandVars for --expand-vars
• <bool> uglyComments for --ugly-comments
• <bool> cuteComments for --cute-comments
• <string> convertUrls for --convert-urls d
• <bool> debug for --debug

Both functions return uglified css.

Example

var uglifycss = require('uglifycss');

var uglified = uglifycss.processFiles(
    [ 'file1', 'file2' ],
    { maxLineLen: 500, expandVars: true }
);

console.log(uglified);

License

UglifyCSS is MIT licensed.

uglifycss's Issues

UglifyCSS looses parts of the css when there's a comment ending with '.../*/'

Hi,

I had a strange issue, where uglifycss lost some parts of my css while uglifying. Through trial and error I was able to pin it down a bit.

In some of my CSS I have comments that are "marked" like this:

/*//////////////////////////////////////////////*/
/* Some interesting bla bla bla */

With the latest version of uglifycss (0.0.15) some parts of the css will be lost. It worked with an older version, I only update a few weeks ago.

I found out, that a slash following and asterik and another slash at the end of a comment => .../*/ or /*/// ///*/ causes the problems.

I think uglify should handle this better or throw an error indicating that it appears to be a nested comment. See also http://www.w3.org/TR/CSS21/syndata.html#comments

Cheers,
Dominik

Strips off white spaces wrongly in background data URIs

Try the following css

body {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='15'><g fill='rgb(0,0,0)'></g></svg>");
}

UglifyCSS removes the space between svg & xmlns

UglifyCSS maintains \r\n in cute-comments

Hi,

I write CSS using \r\n as line separator.
When I call UglifyCSS on the command line the line breaks are converted to\n while \r\n is maintained in the "cute" comments.

Please add an -o option to specify output file

The issue is Windows...

When piping command output in a windows environment, you'll get UTF-16, so the on-disk size of the resulting minified file can actually grow larger than the un-minified input file that used the UTF-8 encoding.
If uglifycss knew how to write to disk by itself, we can avoid this headache.

Tag a stable release

Can you please tag a stable release, so that we can refer to a known version in npm (or other tools).
Thanks!

Please add LICENSE file with exact wording of "MIT" license

Your README.md (and the headers of the source files) say(s), this source project is licensed under MIT license. Unfortunately, there are dozens of MIT licenses out there [1].

Please ship a copy of the meant MIT license, which very probably is the text well known under the MIT/Expat license [2].

This extra license file is a pre-requisite of getting your code into Debian. Once you have added that file, I'd suggest tagging a new version.

Thanks!
Mike

[1] https://fedoraproject.org/wiki/Licensing:MIT?rd=Licensing/MIT
[2] https://www.debian.org/legal/licenses/mit

@supports syntax is made invalid after uglifying

I have a file which contains the following css:
@supports ((-webkit-clip-path: polygon(0 0, 0 0, 0 0)) or (clip-path: polygon(0 0, 0 0, 0 0))) {
...

after I've run this through uglifycss the following output is created:
@supports((-webkit-clip-path:polygon(0 0,0 0,0 0)) or(clip-path:polygon(0 0,0 0,0 0))){

version:
└─┬ [email protected]
└── [email protected]

White spaces should not be removed in URLs

In case of a URL, spaces should not be removed, because they may be required, for an XML content for example:

.xxxx { background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10px" height="10px">...</svg>');

I suggest to replace Line 99
token = token.replace(/\s+/g, "");
with
token = token.replace(/\s+/g, " "); // "" has been replaced with " "

Bug with comments

Uglifycss bug when there is a comment like that (notice the /* inside) :

/* line 56, sprite/icon-header/*.png */
.my-css-class{
font-weight:bold;
}

This comment is totally valid. The problem is that these kind of comments are generated by SASS with sprites, so sadly I can't change them.

Regards,

npm install uglifycss -g not working

npm ERR! code E404
npm ERR! 404 no such package available : uglifycss
npm ERR! 404
npm ERR! 404 'uglifycss' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

process out of memory

I am trying to run a very large (30k lines) CSS file through uglifycss using the following command:

'/usr/local/bin/node' '/usr/bin/uglifycss' '/tmp/inputhmo4tj'

I get the following error:

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory
Aborted (core dumped)

How can I allocate more memory to this process or solve it in some other way?

package.json engines : Node version

Hi,

Could you precise in your package.json file the node version number required for UglifyCSS if it's possible ?

"engines": {
    "node": ">=x.y.z"
  }

Thank you

Only works where fs is available.

I'm using UglifyCSS in a browser environment (via webpack), but I had to fork it and remove all fs references. (https://github.com/aesopwolf/UglifyCSS)

What are your thoughts on breaking this project out into multiple parts? Or even just breaking up the uglifycss-lib.js file so the fs import is only in a file for the processFiles method?

sys module is renamed

When I use UglifyCSS, it always shows the following line:

The "sys" module is now called "util". It should have a similar interface.

And it seems that just replacing require('sys') with require('util') works well. Fix this please.

please tag release here in Git

Dear maintainer of UglifyCSS,

I would love to bring uglifycss to Debian and the packaging process gets tremendously eased by upstream, if releases get (regularly) tagged on the upstream Git site.

Do you think, you could tag at least the last release (0.0.15) or even make a new release (with a tag)?

Thanks,
Mike Gabriel (aka sunweaver at debian.org)

Spaces will removed in url

It still seems to be an issue, all of spaces in svg/xml are missing after minifying

img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%);
}

Does it handle imports and adjust urls?

Missing --help and --version command-line options

$ uglifycss --version
uglifycss: unable to process "--version"
Error: ENOENT: no such file or directory, open '--version'
$ uglifycss --help
uglifycss: unable to process "--help"
Error: ENOENT: no such file or directory, open '--help'

It would be useful to have those command line options.

Minifiying multiple files fails

I tried to minify multiple files in one CLI command and hit an error.

$ node_modules/.bin/uglifycss public/css/style.css public/css/normalize.css

/Volumes/fresh/website/node_modules/uglifycss/uglifycss:83
            if (typeof params.options[varia] === 'boolean') {
                                     ^
TypeError: Cannot read property 'public/css/style.css' of undefined
    at parseArguments (/Volumes/fresh/website/node_modules/uglifycss/uglifycss:83:29)
    at Object.<anonymous> (/Volumes/fresh/website/node_modules/uglifycss/uglifycss:104:10)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:906:3

I'm using node 0.10.28.

Depend on supported node engine for ES6

I updated uglifycss to 0.0.28 on an engine which does not support ES6, would be good to add that dependency to packages.json.

See https://docs.npmjs.com/files/package.json#engines

0% getting transformed to 0 incorrectly and breaking keyframe animation?

"gulp-uglifycss": "^1.0.6",

@keyframes magic {
    0%, 25% { 
        transform: scale(2.25);
    }

    100% {
        transform: scale(1);
    }
}

gets generated to:

@keyframes magic{0,25%{transform:scale(2.25)}100%{transform:scale(1)}}

Which browser no likey. If I manually edit the generated CSS to be 0% it works again. Temp fix is to change the line to:

    from, 25% {

Any advice, input would be appreciated, thanks so much for a great tool.

flex-basis: 100% becomes 10%

css.txt

body {
	flex-basis: 100%;
}

When run through uglifycss:

> uglifycss css.txt
body{flex-basis:10%}

Using UglifyCSS in windows?

I want to use UglifyCSS in windows, but I couldn't find any result in the web.
actually I did it successfully before for JS files by uglifyJs with the following guidance:

http://stackoverflow.com/questions/8229022/using-uglifyjs-with-nodejs-in-windows

Is it possible for you to guide me how can I use command line in windows to minify my css files the same as uglifyjs.

Thanks a lot

CSS3

I've got errors with new CSS3 minify issues.
See examples in attachments (From the template I've bought)
Almost all files give errors. (I haven't tested them all)

helpers.zip

assets/helpers/animate.css: line 1: .animated: command not found
assets/helpers/animate.css: line 2: -webkit-animation-duration:: command not found
assets/helpers/animate.css: line 3: animation-duration:: command not found
assets/helpers/animate.css: line 4: -webkit-animation-fill-mode:: command not found
assets/helpers/animate.css: line 5: animation-fill-mode:: command not found
assets/helpers/animate.css: line 6: syntax error near unexpected token }' assets/helpers/animate.css: line 6: }'

Milliseconds converted incorrectly to seconds

Units in ms are incorrectly converted to seconds:

/* test.css */
.animated {
  animation-duration: 600ms;
}

/* result of `uglifycss test.css` */
.animated{animation-duration:60s}

Expected output:

.animated{animation-duration:600ms}

HSL colors are lost

Percents are removed when compressing hsl(0, 0%, 0%) resulting in hsl(0,0,0) which is wrong.

UglifyCSS transform 100% to 10% for flex:1 100% or flex-basis: 100%

UglifyCSS transform 100% to 10% when using flex:1 100%;, output becomes flex:1 10%;.

It works if I use flex:1 0 100%;.

publish to npm?

that would be rad.

Remove all comments

Would be possible to remove all comments, even those comments starting with /*!?

Cannot find module 'uglifycss' error

If used via npm, then uglifycss seems to work (probably because it expects to be in node_modules), but if I try to execute it directly with a relative path on Windows, then node gets confused, e.g. node ..\code\uglifycss-0.0.5\uglifycss input.js > output.js.

Error: Cannot find module 'uglifycss'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:280:25)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at Object.<anonymous> (C:\code\uglifycss-0.0.5\uglifycss:29:14)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)

This is fixed it by changing line 29 in the "uglifycss" file from this:

uglifycss = require('uglifycss'),

to this:

uglifycss = require('./uglifycss-lib'),

...which is exactly what index.js is trying to do, so you are just eliminating the confusion.

Cannot convert URLs when input is from stdin

Searched the issues "convert urls stdin" did not find anything...

This works:

uglifycss --convert-urls y/z/output x/input/a.css > y/z/output/a.min.css

This does not:

sass x/input/a.scss | uglifycss --convert-urls y/z/output > y/z/output/a.min.css

You get a JS error:

TypeError: Cannot read property 'slice' of undefined
    at convertRelativeUrls (/usr/local/lib/node_modules/uglifycss/uglifycss-lib.js:121:44)
    at Object.processString (/usr/local/lib/node_modules/uglifycss/uglifycss-lib.js:448:15)
    at Socket.<anonymous> (/usr/local/lib/node_modules/uglifycss/uglifycss:143:35)
    at emitNone (events.js:110:20)
    at Socket.emit (events.js:207:7)
    at endReadableNT (_stream_readable.js:1059:12)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)

I suppose it has to do with needing to know the dirname of the source file? Possibly extending the option e.g. --convert-urls-out y/z/output --convert-urls-in x/input would help?

Anyway the workaround (creating a temp file) is not going to work for me since x/input is not writable by the process doing the uglification, and you can't put the temp files in /tmp (or anywhere other than x/input) since that results in incorrect URLs.

Error after upgrade to version 0.0.23

This is the message I'm getting:

Error Output:
/usr/local/lib/node_modules/uglifycss/uglifycss-lib.js:36
var pathResolve = PATH_SEP === "/" ? path.posix.resolve : path.win32.resolve;
                                               ^
TypeError: Cannot read property 'resolve' of undefined
      at Object.<anonymous> (/usr/local/lib/node_modules/uglifycss/uglifycss-lib.js:35:48)
      at Module._compile (module.js:456:26)
      at Object.Module._extensions..js (module.js:474:10)
      at Module.load (module.js:356:32)
      at Function.Module._load (module.js:312:12)
      at Module.require (module.js:364:17)
      at require (module.js:380:17)
      at Object.<anonymous> (/usr/local/lib/node_modules/uglifycss/index.js:27:18)
      at Module._compile (module.js:456:26)
      at Object.Module._extensions..js (module.js:474:10)

I've tried v0.0.22 and didn't work either. v0.0.21 is fine.

This seems to be related to 53b82d3

If any more data is needed please let me know.

Kind regards,

Help - Unexpected token ILLEGAL

Hello,

I tried using this way:

node uglifycss application.css

but I get this error:

uglifycss:2
basedir=`dirname "$0"`
        ^
SyntaxError: Unexpected token ILLEGAL
    at Module._compile (module.js:439:25)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:901:3

Use windows 8, what should I be doing wrong?

Thanks,

Paulo

When minifying, it changes the order!

I have a css file which has lots of @media queries. When setting minify: true it combines all the same @media query together which screws the order of my css rules!

Consider the following rules in a css file,

@media (min-width:46.25em) {
    .c-tooltip--hover:hover .c-tooltip__content, .is-active .c-tooltip__content {
        width: 20em
    }
}

@media (min-width:20em) {
    .c-class-name {
        height: 30em
    }
}

@media (min-width:46.25em) {
    .c-class-name {
        height: 40em
    }
}

when setting minify:true, the above code gets minified into the following,

@media (min-width:46.25em) {
    .c-tooltip--hover:hover .c-tooltip__content, .is-active .c-tooltip__content {
        width: 20em
    }
    .c-class-name {
        height: 40em
    }
}

@media (min-width:20em) {
    .c-class-name {
        height: 30em
    }
}

Now if you see the .c-class-name 's height: 40em has been grouped with the other rules for the same @media query rule. This has changed the order of css which breaks styling of my elements on the page.

Media Query / Null Byte hack for IE <9 gets modified

Testcase:

@media \0screen\,screen\9 {
    .test {
        color: red;
    }
}

Is converted to:
@media \0creen\,screen\9{.test{color:red}}
-> there's an s missing after \0

I'm not sure if it is a wanted behavior or not but maybe you want to take a look at it ;)

ENOENT error

Problem

I'm trying to run this package as an NPM script ("mincss": "uglifycss --ugly-comments") but whenever I do that it fails in finding the files I'm passing to it.
Oddly enough, using the absolute path (../node_modules/uglifycss/uglifycss) works.

System

ArchLinux 4.13 x64
NPM version: 5.6.0
Node version: 9.4.0
uglifycss: 0.0.27 (latest version as I write this).

Update relative URLs to point to correct location

Hello,

If I run something like

uglifycss /css/ie.css css/output.css css/styles.css adminbar/css/adminbar.css bootstrap/css/bootstrap.css themes/seravo.css

.. but in the resulting CSS many of the images will point to wrong locations, eg. '../img/xyz.png' when it should be 'adminbar/img/xyz.png'.

Is UglifyCSS supposed to update relative URLs so that the point to the correct location?

uglifycss uses CRLF

Hi,

Currently, uglifycss uses CRLF for lines ending ("\r\n"), hich does not seem to match the standards used by (every?) other node module.

This has an annoying drawback of failing to launch on some unix systemd because it tries to launch node\r instead of node if you call uglifycss directly and node node uglifycss

Saving white spaces on calc() property

Hi,

The calc() property breaks after using uglifycss because it removes the whitespace before and after the operator, the css becomes invalid:

before uglifycss:
.user_menu {
width: calc(4% + 66px);
width: -webkit-calc(4% + 66px);
width:-moz-calc(4% + 66px);
}
after uglifycss:
.user_menu{width:calc(4%+66px);width:-webkit-calc(4%+66px);width:-moz-calc(4%+66px)}.

Seems like the same issue as #7

Thanks for your awesome work I
I will try to fix this later today.

Some command line switches broken in 0.0.10

root@server:/# uglifycss --ugly-comments test.file 

/usr/local/lib/node_modules/uglifycss/uglifycss:83
if (typeof params.options[varia] === 'boolean') {
                        ^
TypeError: Cannot read property 'uglyComments' of undefined
    at parseArguments (/usr/local/lib/node_modules/uglifycss/uglifycss:83:29)
    at Object.<anonymous> (/usr/local/lib/node_modules/uglifycss/uglifycss:104:10)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Function.Module.runMain (module.js:497:10)
    at startup (node.js:119:16)
    at node.js:906:3

Url changed after mininfied

// before minify
.profile{
   background:url("../images/profile.png") no-repeat scroll 0 0 transparent;
}

// after minify
.profile{
   background:url(___PRESERVED_TOKEN_1___) no-repeat scroll 0 0 transparent;
}

What is this? Is this a bug?

FATAL ERROR: CALL_AND_RETRY_2 Allocation failed - process out of memory

I have an error when I execute UglifyCSS

$ uglifycss base.css  > base.min.css
FATAL ERROR: CALL_AND_RETRY_2 Allocation failed - process out of memory

base.css is: http://www.rainpress.me/css/compiled/base.css

I watch the process memory, then it raises until 900 Mb, then show me the error

Node versión is v0.10.33

box-shadow - incorrect minify

This valid CSS:

p {
 box-shadow: 0 0;
}

minifies incorrectly to this invalid CSS:

p {
 box-shadow: 0;
}

CSS sourcemap

Hey,

I will be great if UglifyCSS can generate CSS sourcemap.

Open Source License?

You code is a port from an Open Source project and gives credit to it -- thanks. But you code does not seem to have it's own license, so I'm not sure if you are allowing people to use your code. Could you add some indication in your project that this code is open source (e.g. under a license, say MIT or BSD)? or did I miss seeing it?

Thanks!

Typings file for TypeScript

Please create a typings file for uglifycss so we can use it in typescript without hacks and workarounds.

Checkout
https://github.com/typings/registry
or
https://github.com/DefinitelyTyped/DefinitelyTyped

Uglify file in place

I would like to do something like this:

uglifycss file.css > file.css

Unfortunately it results in an empty file.css. Is it supposed to work?

UglifyCSS removes the % when assigned value is 0%

I am experiencing an issue where UglifyCSS removes "%" when I set the CSS value to be "0%".

For example, I have the following CSS code
-webkit-flex: 1 1 0%; flex: 1 1 0%;

and UglifyCSS minifies to
-webkit-flex: 1 1 0; flex: 1 1 0;

Due to this, the flex-basis doesn't get applied in IE 10 and the width of the content breaks. If I manually add "%", it seems to fix the issue in IE 10. As a matter of fact, it happens with other units too like "rem", "px", "em" etc.,

Missing measurement units might break down keyframe animations

I've recently encountered a problem with some keyframe animations. Supposedly we would have this piece of code:

@-webkit-keyframes bounce {
    0%, 100% { 
        -webkit-transform: scale(0.0) 
    }
    50% { 
        -webkit-transform: scale(1.0) 
    }
}
@keyframes bounce {
    0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 
    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

Ok, after it went through UglifyCSS, the result would be (the beautification is done by me - it's not relevant):

@-webkit-keyframes bounce {
    0,100% {
        -webkit-transform: scale(0.0);
    }
    50% {
        -webkit-transform: scale(1.0);
    }
}

@keyframes bounce {
    0,100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    }  
    50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

Note this 0% becoming 0. The missing percent sign seems to break the animation - apparently 0% != 0 when it comes to keyframe animations, and this also applies to 0s.
Basically, in this scenario those 0%...100% are acting like selectors (I hope this is the proper term here), rather than values, and they should be kept intact.

Here is a related article with more info: http://www.sitepoint.com/avoid-css3-animation-minification-muddles/

Thank you!

STDIN and pipe support

I noticed the command has STDIN support built in but it's commented out. I tried uncommenting it and running uglifycss < test.css with great success. However when I tried running something like lessc test.less | uglifycss > test.css it "hangs" (it's actually waiting for input).

It would be great to have support for pipe commands.

I toyed around with the code and got it to work without changing much.
Some checking would be required to detect if there actually is input to be expected and throw usage() otherwise

/*
// . usage
} else {
    usage();
}

*/
// . stdin
} else {
    //stdin = process.openStdin();
    stdin = process.stdin;
    stdin.resume();
    stdin.setEncoding("utf8");
    content = '';
    stdin.on('data', function(part) {
        content += part;
        util.print(uglifycss.processString(part, params.options));
        process.exit();
    });
/*
    stdin.on('end', function() {
        util.print(uglifycss.processString(content, params.options));
    });
*/
}