How To Merge And Clean 2 Css Files With Overlapping Selectors/properties?

Here I am, trying to do a decent job at maintaining a site and adding new elements to it. But before that, I'd like to clean its css files. That site is using 2 stylesheets, a v1 a

Solution 1:

There is This and This list of other helpful tools

Solution 2:

With this combination i solved and optimize the css to the maximum.

After configuring Grunt, install the following plugins:

• grunt-postcss
• grunt-contrib-cssmin
• grunt-cssnano
• clean-css
• postcss-flexbugs-fixes
• autoprefixer

Gruntfile.js

Create the task to minify, merge selectors & properties, remove duplicates, etc.

cssmin: {
    options: {
        advanced:true, 
        mergeAdjacent:true,
        removeDuplicates:true,
        shorthandCompacting:false 
    },
    files: {    
        src:'your/path/style.css',
        dest:'your/path/style.min.css' 
    }  
},

After create a task to parse CSS, add prefixes and optimize more.

postcss: {
    options: {
        processors: [
            require('postcss-flexbugs-fixes'),
            require('autoprefixer')({
                browsers: [  
                    'last 2 versions',  
                    'Edge >= 12',
                    'Explorer >= 9']
            }),
            require('cssnano')
        ],
        map: false,
    }, 
    files: {    
        src: 'your/path/style.min.css',
        dest: 'your/path/style.min.css' 
    }
}

Register a shortcut to the tasks

grunt.registerTask('css', ['cssmin', 'postcss']);

And Voilà!!

grunt css 

Solution 3:

Thanks Tiago Fontella on debian/Linux

merge css using

cat a.css b.css d.css > merged.css

apt-getupdate
apt-get upgrade
apt-get install curl   
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
apt-get install build-essential nodejs
mkdir node-project
cd node-project
npm init
npm install -g grunt (or npm install grunt?) 
npm install grunt-postcss --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install --save-dev grunt-cssnano
npm install --save-dev clean-css
npm i postcss-flexbugs-fixes
npm i autoprefixer

script must be in node-project: Gruntfile.js use nano Gruntfile.js to create it

module.exports = function(grunt) {
       grunt.initConfig({
           cssmin: {
              options: {
                  advanced: true,
                  mergeAdjacent: true,
                  removeDuplicates: true,
                  shorthandCompacting: false
              },
              files: {
                  src: 'your/path/style.css',
                  dest: 'your/path/style.min.css'
              }
           },
           postcss: {
              options: {
                  processors: [
                      require('postcss-flexbugs-fixes'),
                      require('autoprefixer')({
                          browsers: [
                              'last 2 versions',
                              'Edge >= 12',
                              'Explorer >= 9']
                      }),
                      require('cssnano')
                  ],
                  map: false,
              },
              files: {
                  src: 'your/path/style.min.css',
                  dest: 'your/path/style.min.css'
              }
           }
       });
       grunt.loadNpmTasks('grunt-contrib-cssmin');
       grunt.loadNpmTasks('grunt-postcss');
       grunt.registerTask('css', ['cssmin', 'postcss']);
   };

Solution 4:

You could use concat during build time to merge the two files

First you need to download it from npm.com/package/concat

then merge and require the new file

In node or package.json for automation, the merge would look something like this;

concat ./v1.js ./v2.js -o /vOutput.js