clean-css
A fast, efficient, and well tested CSS minifier for node.js.
I ran into an issue with clean-css in IE10. I'm needing to turn off the spaces after closing braces optimization.
I'm using the grunt-contrib-cssmin plugin to automate all these optimizations, but I don't see a way to access the compatibility flags from within this plugin.
Has anyone been able to target the compatibility settings of clean-css from the grunt-contrib-cssmin plugin?
Source: (StackOverflow)
I just deleted and recloned my Rails app. Been using ruby-clean-css for CSS minification for a while and it's all been great, but now all of a sudden I'm getting this:
% bundle exec rake assets:precompile RAILS_ENV=production
rake aborted!
NoMethodError: undefined method `new' for #<RubyCleanCSS::Compressor:0x00000 812414de8 @js_options={}>
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ legacy_tilt_processor.rb:25:in `call'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ processor_utils.rb:75:in `call_processor'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ processor_utils.rb:57:in `block in call_processors'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ processor_utils.rb:56:in `reverse_each'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ processor_utils.rb:56:in `call_processors'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ loader.rb:86:in `load_asset_by_uri'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ loader.rb:45:in `block in load'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ loader.rb:155:in `fetch_asset_from_dependency_cache'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ loader.rb:38:in `load'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ cached_environment.rb:20:in `block in initialize'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ cached_environment.rb:47:in `yield'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ cached_environment.rb:47:in `load'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ base.rb:63:in `find_asset'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ base.rb:70:in `find_all_linked_assets'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ manifest.rb:130:in `block in find'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ manifest.rb:129:in `each'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ manifest.rb:129:in `find'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/sprockets/ manifest.rb:162:in `compile'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-rails-2.3.1/lib/spro ckets/rails/task.rb:70:in `block (3 levels) in define'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-3.2.0/lib/rake/sproc ketstask.rb:147:in `with_logger'
/home/example/vendor/bundle/ruby/2.2.0/gems/sprockets-rails-2.3.1/lib/spro ckets/rails/task.rb:69:in `block (2 levels) in define'
Tasks: TOP => assets:precompile
(See full trace by running task with --trace)
Source: (StackOverflow)
About " CSS Quality code"
Are using a lot of {relative , absolute} especially on layout structure it is ugly & not professional & using {inline-block , floats} is professional ?
Source: (StackOverflow)
How does one mangle class names and IDs all throughout ones ERB, JS and CSS in Rails? Every time I open Facebook or Google in Chrome dev tools I see tons of random class names like .201g, .1ayx, c3ag etc. How do they do that?
I'm already using Uglifier for basic JS mangling and ruby-clean-css for CSS minification.
Source: (StackOverflow)
I am trying to package up the CleanCSS and UglifyJS repositories into one JS file each so that they can be accessed through my node app with the following commands:
var CleanCSS = require('cleancss.js').CleanCSS;
var UglifyJS = require('uglifyjs.js').UglifyJS;
Well it turns out that UglifyJS actually has a function to concatenate itself into one file using the --self option:
uglifyjs --self -c -m -o /tmp/uglifyjs.js
And that allows me to use UglifyJS in my node app with only one file and the following command:
var UglifyJS = require('uglifyjs.js').UglifyJS;
Now for CleanCSS:
I have installed clean-css through npm install clean-css and everything is where it should be.
However, when I try to concatenate the Clean CSS module into one nice JS file I only get the input file I specify outputted with a little extra code and none of the require() dependencies included.
I was using the following command:
uglifyjs node_modules/clean-css/index.js --wrap=CleanCSS --export-all -b -o /tmp/cleancss.js
And inside the outputted cleancss.js file is the following:
(function(exports, global) {
global["CleanCSS"] = exports;
module.exports = require("./lib/clean");
})({}, function() {
return this;
}());
How do I get all the clean-css dependencies included in one nice .js file?
I might be able to specify multiple input files for the uglifyjs command, but that isn't feasible as there are too many js files in the CleanCSS repository for me to manually specify all of them.
Any ideas? I might be doing this all wrong and maybe UglifyJS is not the tool I'm looking for. Any suggestions are much appreciated!
Source: (StackOverflow)
I'm looking for a plugin chain to use with Gulp that provides:
- source map support
- less
- minification
- concatenation
- URL replacement (rebase) to address relocation/concat
I currently have the first four, but I can't find a combination of existing plugins that will give me the last (URL rebasing) also. I've not found any URL rebasing plugins that emit sourcemaps.
Just to be clear, my issue is that when I compile multiple small CSS files from my project development folders, and output them into a common folder, the move resulting from concatenation breaks relative URLs, such as those for background images.
EDITS:
It sounds like the tool chain I currently use is already intended to solve this problem. So, that's ostensibly the answer. However, that raises another question, how the required syntax is supposed to work.
That question theoretically has lots of duplicates out there:
Unfortunately no answers actually explain the syntax, they just demonstrate voodoo; so I don't know why the following isn't working. If I can get it resolved I'll come back here and flag this accepted to indicate this tool chain does actually do what I need.
The source files:
/assets
/site
styleInput1.less "url(../site/logo.png)"
logo.png
background.png
/application
styleInput2.less "url(../site/background.png)"
The gulp task:
gulp.task(filename, function () {
return gulp.src(files)
.pipe(sourcemaps.init())
.pipe(less())
.pipe(minifyCss({ relativeTo: './compiled' }))
.pipe(concat(filename))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./compiled'));
});
The output, with broken URLs. Note the multiple defects. Although the CSS is raised a directory level relative to the required assets, an additional parent directory has been added (!). Also, one of the URLs has had a hard asset folder name changed (!). Very strange:
/compiled
styleOutput1.css "url(../../compiled/logo.png)"
styleOutput2.css "url(../../site/background.png)"
My apologies for continuing the voodoo, but here is my working gulp pipe:
.pipe(minifyCss({ relativeTo: './compiled', target: './compiled' }))
And the correct output:
/compiled
styleOutput1.css "url(../assets/site/logo.png)"
styleOutput2.css "url(../assets/site/background.png)"
Source: (StackOverflow)
Seems this is not solved besides being a recurrent question.
This is my folder structure:
project/
|
|--src/
| |--images/
| +--styles/
| +--style.css
|
+--build/
|--images/
+--style.min.css
Note how src/styles/style.css will reference url(../images/image.png) while the minified version build/style.min.css should reference url(images/image.png)
What combination of options for cssmin or clean-css can achieve this?
My current configuration:
cssmin: {
target: {
files: {
'build/style.min.css': 'src/styles/style.css'
}
}
}
Source: (StackOverflow)
We're using este.js dev stack in our application which uses webpack to bundle JS & CSS assets. Webpack is configured to use webpack.optimize.UglifyJsPlugin when building for production env and stylus-loader, well the exact loader configuration for production env. is as follows:
ExtractTextPlugin.extract(
'style-loader',
'css-loader!stylus-loader'
);
I then have 3 styl files:
// app/animations.styl
@keyframes arrowBounce
0%
transform translateY(-20px)
50%
transform translateY(-10px)
100%
transform translateY(-20px)
@keyframes fadeIn
0%
opacity 0
50%
opacity 0
100%
opacity 1
// components/component1.styl
@require '../app/animations'
.component1
&.-animated
animation arrowBounce 2.5s infinite
// components/component2.styl
@require '../app/animations'
.component2
&.-visible
animation fadeIn 2s
After the production build, both keyframe animations are renamed to a (probably some CSS minification by css-clean) and as you can deduce fadeIn overrides arrowBounce because of the same name and higher priority after minification.
Files components/component1.styl and components/component2.styl are being included in their React component file [name].react.js using statements:
import 'components/component1.styl';
import 'components/component2.styl';
I'm going nuts. Tried many different solutions but none really worked.
Source: (StackOverflow)