fmarcia / uglifycss Goto Github PK
View Code? Open in Web Editor NEWPort of YUI CSS Compressor from Java to NodeJS
License: MIT License
Port of YUI CSS Compressor from Java to NodeJS
License: MIT License
"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.
This valid CSS:
p {
box-shadow: 0 0;
}
minifies incorrectly to this invalid CSS:
p {
box-shadow: 0;
}
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%);
}
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
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.,
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.
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
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));
});
*/
}
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.
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)
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:
}'
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
$ 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.
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?
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 transform 100% to 10% when using flex:1 100%;,
output becomes flex:1 10%;
.
It works if I use flex:1 0 100%;
.
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 ;)
Would be possible to remove all comments, even those comments starting with /*!
?
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
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.
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
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
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,
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,
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.
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.
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 " "
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!
css.txt
body {
flex-basis: 100%;
}
When run through uglifycss:
> uglifycss css.txt
body{flex-basis:10%}
Hey,
I will be great if UglifyCSS can generate CSS sourcemap.
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?
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?
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
Can you please tag a stable release, so that we can refer to a known version in npm (or other tools).
Thanks!
that would be rad.
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}
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
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.
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]
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!
Percents are removed when compressing hsl(0, 0%, 0%) resulting in hsl(0,0,0) which is wrong.
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
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)
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
.
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.
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.
// 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?
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.
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.
ArchLinux 4.13 x64
NPM version: 5.6.0
Node version: 9.4.0
uglifycss: 0.0.27 (latest version as I write this).
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.