Update to latest version of clean-css
jonsquared opened this issue · 27 comments
Please upgrade to the latest version of clean-css (at this time it is up to version 4.0.0)
@jonsquared dang dude, it's been one day since 4.0.0 dropped. I'll get to it soon. It's a pretty big release and I might need to rework some stuff. I assure you - it'll be updated.
Hah, I didn't notice. I just ran into a defect that is fixed in the newer release.
I have dropped gulp-clean-css as I also ran into issues that are fixed in the latest version of clean-css, now v4.0.4. I cannot rely on a plugin that doesn't get updated for weeks and causes things to break.
For anyone else facing issues, there is another approach for using CleanCSS without this wrapper plugin in Gulp, see the link below.
clean-css/clean-css#342
@davidnknight gulp-clean-css hasn't been updated to 4.x yet. FWIW, I have been planning to update it some time this weekend. There were a lot of breaking changes regarding the rebasing that I have to investigate. I wouldn't necessarily generalize 11 days as "weeks." Also, unsure what breaking "things" you're referring to.
Upgraded to 4.x with gulp-clean-css 2.4.0 release. Can't guarantee it's working as expected with the new rebaseTo has thrown a wrench in what I finally thought to be fixed in prior issues #9 #8 #22
I'll try to get to it sometime soon, but it's been unusually busy on my end with the day-to-day. Any help is welcomed and well appreciated. On that note, @erwstout thank you very much for the positive feedback on this!
Please keep this thread updated with any findings
@scniro great work on this package and the update. Can I make a suggestion? When you update to a major version of clean-css you also update your package version to a major version number e.g. 3.0.0. If you have "gulp-clean-css": "^2.2.2" in the package.json it will update to the latest compatible with version and 2.4.0 was not.
Regarding the rebaseTo changes. Here are the changes I had to make to get everything working again. I'm not sure if it'll help you, but I thought I'd share just in case.
I went from something like:
return gulp.src(options.css_dir)
.pipe(plugins.cleanCss({
target: options.css_min_dir
}))
.pipe(gulp.dest(options.css_min_dir));
to:
return gulp.src(options.css_dir)
.pipe(plugins.cleanCss({
rebaseTo: path.relative(options.css_dir, options.css_min_dir)
}))
.pipe(gulp.dest(options.css_min_dir));
My directory structure is as follows:
web
- assets
- css
- min
I can't unterstand why clean-css removes @media, for example:
CSS:
@media(min-width:768px) {
#wrapper {
padding-left: 220px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 220px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
}
Using gulp-clean-css:
var cssMinify = require('gulp-clean-css');
gulp.task('css_processing', function () {
return gulp.src(cssFiles)
.pipe(cssMinify())
.pipe(gulp.dest(buildFolder + '/' + styleFolder));
});
I get this result:
#wrapper.toggled{padding-left:0}#sidebar-wrapper{width:220px}#wrapper.toggled #sidebar-wrapper{width:0}
When I using gulp-minify-css:
var cssMinify = require('gulp-minify-css');
gulp.task('css_processing', function () {
return gulp.src(cssFiles)
.pipe(cssMinify())
.pipe(gulp.dest(buildFolder + '/' + styleFolder));
});
I get this results as expected:
@media(min-width:768px){#wrapper{padding-left:220px}#wrapper.toggled{padding-left:0}#sidebar-wrapper{width:220px}#wrapper.toggled #sidebar-wrapper{width:0}}
Why gulp-clean-css removes @media?
@lindevs https://www.npmjs.com/package/gulp-minify-css has been deprecated long ago and last I checked used clean-css version 3.3.3 see here
Hi, can you update "clean-css": "^4.0.4" to "clean-css": "^4.0.5"?
@lindevs you still did not comment back on my initial reply. I am not understanding the issues you are having, so I can not help ATM without a better explanation and expected result. Spamming an update request on this issue thread with every clean-css minor version increment the moment it comes out will not likely help you either nor is really appropriate. I will be updating it very soon.
@EAnushan thank you for sharing your code. Your workaround may be helpful once I dig into this again.
@scniro 4.0.5 clean-css update fixed my issue. I tested with https://jakubpawlowicz.github.io/clean-css/
After updating to newer version, which I'm using @import in css. All @imports are showing errors.
Ignoring local @import of "base/reset.css" as resource is missing.
Ignoring local @import of "base/css-properties.css" as resource is missing.
Ignoring local @import of "fonts/font-styles.css" as resource is missing.
And so on..
Any solution for this stuff?
I already added the inline local thing (which is the default but I insisted it doing it anyways for the sake of this problem), but it doesn't work.
.pipe(cleanCSS({ keepSpecialComments: 0, inline: 'local' }, function(details) {
console.log(details.name + ': ' + details.stats.originalSize);
console.log(details.name + ': ' + details.stats.minifiedSize);
}))
@wlachenal @scniro Imports seem to fail because CleanCSS doesn't know the source folder of the css file, only the source file content is passed to the CleanCSS().minify() function. So it looks like the imports are being imported from the CWD. When I run CleanCSS directly, imports are working fine...
@scniro any comments on my proposed solution? The newest published version doesn't work for me and probably a lot of other people.
@corneyl I apologize for the delay. I can in the least, commit to looking into this extensively this weekend when I have the time. Until then, when you mention breaking tests on your PR, could you explain just a bit more? The CI log is sating all checks have passes but perhaps I am not seeing all that your are?
I just ran npm test and saw some errors, but that was probably due to my local environment, can't remember exactly.
@corneyl I may need to investigate this more. The changes in your PR break basic functionality with minifying simple styles. At this time I'd recommend looking into the proposed workaround on #37 supplementing the gulp-url-rebase plugin, or reverting to older plugins which leverage clean-css 3.x.
One of the trade-offs with the 4.x clean-css life-cycle was the movement to favor a simpler rebasing strategy over robust configuration on the previous three parameters (no consolidated to rebaseTo
root, relativeTo, and target options are replaced by a single rebaseTo option - this means that rebasing URLs and import inlining is much simpler but may not be (YMMV) as powerful as in 3.x;
You suggested that this may affect a lot of people which I don't feel is the case or I'd have a lot more buzz on this topic and can hopefully get the help I need on this to solve it.
If you can provide a small, isolated real world fork-able project which shows this exact problem with defined expectations, I'll happily take a look to find the solution. Otherwise I'm kind of shooting in the dark here. I'm sorry I can't be more helpful at this time.
Sorry for the delay, but I've created a simple example as requested: https://github.com/corneyl/gulp-clean-css-example
The use-filename branch uses the proposed fix, and master uses the latest version (3.0.4).
@corneyl I too am sorry for the delay. I will clone your sample repo here and work this out this weekend now that I have an isolated example. I've drawn a lot of attention to the issue at hand so It'll get resolved one way or another. Will keep you posted and thanks again for the sample
I have revisited this and hope the newest changes will resolve this. Please pull down 3.1.0 and let me know if this meets your expectations. Thanks!
Did some more work on this as seen at clean-css/clean-css#937 and all should be fixed with the 3.2.0 release. I am going to close this for now, but please reply here or open up a new issue should you still encounter issues. Thank you!