I have 20 files in a folder. Most are about 500 lines others are about 1000-2400 and one is 5000. It will not comb the 5000 line file at all. It says it worked and no errors, but it isn't changing the files at all.

Any files after the large file do not run either unless I exclude the large file.

Hi,
when I execute sudo npm install grunt-csscomb --save-dev,
I get this error: npm ERR! peerinvalid Peer [email protected] wants grunt@^0.4.5

Maybe >= is better than ^ in file package.json.

Today to comb a whole directory(1-1) we need something like this

files: [{
  expand: true,
  cwd: '/assets/css',
  src: ['**/*.css'],
  dest: '/assets/css',
  filter: 'isFile'
}]

Maybe we can add a support to diretories, since comb.js have processDirectory to do most of the work for us

files: [
  '/assets/css'
]

When trying to run csscomb on a folder of scss files, I've noticed that I get an error whenever I @extend from a class with a number in it. For example:

.footer-nav {
    > li {
        @extend .col-md-4;
    }
}

Everywhere else I use @extend works fine, and and so does this when I remove the number at the end of .col-md-4. Did I perhaps overlook something in my settings, or is this an issue with the plugin?

I get the Error:

Warning: Parsing error: Please check the validity of the CSS block starting from the line 16 Use --force to continue.

The line 16 has this property:

@include border-radius($defaultBorderRadius/2);

The problem seems to be the math part. If I remove th /2, there is no problem.
So this would work:

@include border-radius($defaultBorderRadius);

Config Gruntfile:

    // Sorting CSS properties in specific order.
    csscomb: {
      options: {
        config: '.csscomb.json'
      },
      dynamic: {
        expand: true,
        cwd: 'src/less/',
        src: ['**/*.less'],
        dest: 'src/less/',
        ext: '.less'
      }
    },

When a file change:

    // Waiting
    watch: {
      options: {
        nospawn: true
      },
      styles: {
        files: ['src/less/**/*.less'],
        tasks: ['less:development', 'csscomb', 'notify:less_true']
      },

Strange behavior:

What am I doing wrong? Please, tell me. Thank you.

I've got a Compass compiled CSS with the "compressed" option set as layout.

If I run CSSComb on it, it sorts everything nicely, but adds all the line-breaks and indentation back on the file.

Is there a way to add a .csscombrc or some sort of file name that I wouldn't need to link the configurations on my Gruntfile.js? If there's not, what options should I use in order to stop this expanding process and how would I link the config file on the Grunt plugin?

Thanks.

Csscomb seems to ignore my indentations. I am using sass so indentations are very important :

Before :

After :

I am using 4 tab indentations.

Thank you!

If you want to do every file in a directory with file extension ".css" or ".scss" - there is no way (assuming you'd keep the same file name or provide on option to prepend/append/regex the filename).

You have to define a subtask - running CSSComb task with just "files" defined doesn't work.

Works:

csscomb: {
    maintask: {
        files: {
            '../assets/scss/file.scss': ['../assets/scss/file.scss']
        }
    }
}

Doesn't work:

csscomb: {
    files: {
        '../assets/scss/file.scss': ['../assets/scss/file.scss']
    }
}

There is a way to specify all CSSComb options? Via a .csscombrc file maybe?

The sortOrder is not the only option i want to customize, since CSSComb.js have a bunch of nice configurable features.

Downgrading to 1.1.0 is the only work around for now. In 1.2.0 I am seeing Maximum call stack size exceeded. OS X 10.8.5, Node 0.10.24, NPM 1.3.22.

/var/www/test $ grunt csscomb --verbose
Initializing
Command-line options: --verbose

Reading "Gruntfile.js" Gruntfile...OK

Registering Gruntfile tasks.
Initializing config...OK

Registering "grunt-csscomb" local Npm module tasks.
Reading /private/var/www/test/node_modules/grunt-csscomb/package.json...OK
Parsing /private/var/www/test/node_modules/grunt-csscomb/package.json...OK
Loading "csscomb.js" tasks...OK
+ csscomb
Loading "Gruntfile.js" tasks...OK
>> No tasks were registered or unregistered.

Running tasks: csscomb

Running "csscomb" task

Running "csscomb:foo" (csscomb) task
Verifying property csscomb.foo exists in config...OK
Files: foo.css -> bar.css
Options: (none)
Warning: Maximum call stack size exceeded Use --force to continue.

Gruntfile.js

module.exports = function(grunt) {

    grunt.initConfig({
        csscomb: {
            foo: {
                files: {
                    'bar.css': ['foo.css'],
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-csscomb');

};

packages.json

{
  "name": "test",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt-csscomb": "~1.2.0"
  }
}

У меня не получается заставить работать этот плагин.

Мой Gruntfile.js выглядит так:

module.exports = function(grunt) {

  grunt.initConfig({
    csscomb: {
      main: {
        options: {
          sortOrder: '.csscomb.json'
        },
        files: {
          'main.css': ['result.css']
        },
      },
    },
  });

  grunt.loadNpmTasks('grunt-csscomb');

  grunt.registerTask('default', ['csscomb']);
};

После запуска Grunt в консоли я получаю следующий результат:

e:\test\dev>grunt
Running "csscomb:main" (csscomb) task
>> Using custom config file ".csscomb.json"...

Done, without errors.

При этом с файлом main.css (он лежит в одной директории с Gruntfile.js) ничего не происходит.
Что именно я делаю не так?

We recently updated to 1.2.1 (from 1.1.0) and were seeing an incorrect compilation order:

➜ ~/Sites/bootstrap (master) git diff
diff --git a/dist/css/bootstrap-theme.css b/dist/css/bootstrap-theme.css
index b092f82..398c856 100644
--- a/dist/css/bootstrap-theme.css
+++ b/dist/css/bootstrap-theme.css
@@ -38,11 +38,12 @@
   text-shadow: 0 1px 0 #fff;
   background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
   background-image:         linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
   border-color: #dbdbdb;
   border-color: #ccc;
+
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }
 .btn-default:hover,
 .btn-default:focus {
@@ -57,10 +58,11 @@
 .btn-primary {
   background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
   background-image:         linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
   background-repeat: repeat-x;
   border-color: #2b669a;
+
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
 }

The PR that did the update was twbs/bootstrap#11959, for reference.

The filter properties should be where they initially were. This happens with 1.2.0 and 1.2.1. Nuking my node_modules and rerunning npm install resolves the issue.

Any idea what happened? Nothing in our CSS order has changed.

Hi t32k, many thanks for your work on adaptation of csscomb for grunt.

I want to let you know that there is no way to use lint option for csscomb,
because it's implemented only as cli attributes.
it would be good if this option could be moved to options object,
or even to .csscomb.json config file (not sure that this issue should be placed in this thread)

Latest version on npm is 3.1.1. Would you mind to push another one?

https://www.npmjs.com/package/grunt-csscomb

I propose that current master branch gets version 2.0.0 because it is not backwards compatible with version 1.1.0.

If the plugin's API changes dramatically (for example, when sortOrder option is renamed to config), there should be a major version update.
See http://semver.org.

We have a lot of users and for many of them csscomb is a serious development tool.
Thus we are responsible to make our releases as stable and predictable as possible.
Since semantic versioning is a common and expected thing, I propose using it.

Hi guys,

I am trying to format my SASS files but I have this warning:
Cannot read property '0' of undefined

I found this ticket so I assume fixing is in progress. Some news?

Thanks in advance!

Hey there, we're looking at moving Bootstrap from Recess to CSScomb, but hitting a snag. For some reason I cannot load any custom options. Pointing the sort-order option to the included json example doesn't seem to have any effect.

...
    csscomb: {
      options: {
        sortOrder: '.csscomb.json',
      },
      files: {
        'dist/css/<%= pkg.name %>.css': ['dist/css/<%= pkg.name %>.css'],
      }
    },
...

I know there is no effect because I'm pointing that option to .csscomb.json and "vendor-prefix-align": true has no effect.

Guess I'm just missing something?

Using raw grunt-contrib-less, I get this diff on Bootstrap:

 sub,
 sup {
-  position: relative;
   font-size: 75%;
   line-height: 0;
+  position: relative;
   vertical-align: baseline;
 }

With grunt-csscomb, I get some rogue spaces:

 sub,
 sup {
-  position: relative;
   font-size: 75%;
   line-height: 0;
+
+  position: relative;
+
   vertical-align: baseline;
 }

Things get even worse with media queries (there are no changes in the default LESS compilation task):

 @media print {
-  * {
+    * {
     color: #000 !important;
-    text-shadow: none !important;
     background: transparent !important;
     box-shadow: none !important;
-  }
-  a,
+    text-shadow: none !important;
+    }
+    a,
   a:visited {
     text-decoration: underline;
-  }
-  a[href]:after {
+    }
+    a[href]:after {
     content: " (" attr(href) ")";
-  }
-  abbr[title]:after {
+    }
+    abbr[title]:after {
     content: " (" attr(title) ")";
-  }
-  a[href^="javascript:"]:after,
+    }
+    a[href^="javascript:"]:after,
   a[href^="#"]:after {
     content: "";
-  }

Is this a problem with grunt-csscomb, or the source CSScomb?

If for some reason there is an unacceptable value in user's config, CSScomb prints a warning to console:

try {
    addHandler(options[optionName], config[optionName]);
 } catch (e) {
    // Show warnings about illegal config values only in verbose mode:
    if (verbose) {
        console.warn('\nFailed to configure "%s" option:\n%s', optionName, e.message);
    }
}

Errors are thrown within setValue function: https://github.com/csscomb/core/blob/master/lib/core.js#L101

@corvannoorloos says that instead of just printing a warning Grunt plugin also "discontinues the task (the files aren't being modified after this notice)".

I have such CSScomb.json in the root of the project. Also I have css-file with path like this static/desktop.bundles/wizard/blocks/wizard-steps/wizard-steps.css. Also task is configured this way:

csscomb: {
    options: {
        config: 'CSScomb.json'
    },
    all: {
        expand: true,
        cwd: 'static/',
        src: [ '**/*.css' ],
        dest: 'static/'
    }
}

When I run CSScomb with $ grunt csscomb:all task logs sorting wizard-steps.css:

>> Sorting file "static/desktop.bundles/wizard/blocks/wizard-steps/wizard-steps.css"...

But original state of this file is:

 .wizard-steps
{
    margin: 50px 0 0;
    display: block;
}

and it's not changed via grunt-csscomb, but when I sort this file with Sublime CSScomb it changed to normal and expected state:

.wizard-steps
{
    display: block;

    margin: 50px 0 0;
}

What I'm doing wrong?

We have a node version of csscomb ready.
It will be nice if this grunt task is updated by the time of public release.

If someone starts working on this issue, please leave a comment.
Keep in mind that current (php) version should stay available for download.
The easiest way is to make a release before making any changes.
Thank you.

 .content {
   background-color: #efeff4;
-}
+  }

Going back to the old version outputs proper code so this is something introduced in csscomb.js 3.0.0.

@t32k, hi!
I've released [email protected] a few days ago so others can start testing it.
Some of our wonderful users have asked to publish grunt task, too.
Could you please take a look at branch tg/csscomb-3 and if you are ok with those changes, publish it to npm as a pre-release?
There is no need to merge the branch to master since it can't be called stable yet.

I want to use grunt-csscomb in Travis CI,
but current version depends on PHP.
it's more better that grunt-csscomb is available without PHP, i think.

Hello,

Is there a way to overwrite the file that was found with the watch task :

So if I save a _scss file that is in : assets/styles/src/objects/_btn.scss, it will ignore the destination file because it will just overwrite the file that was saved.

csscomb: {
    foo: {
        files: {
            'assets/styles/src/**/*.scss': ['assets/styles/src/**/*.scss']
        }
    }
},
watch: {
css: {
    files: ['assets/styles/src/**/*.scss'],
    tasks: ['sass', 'csscomb'],
    options: {
        spawn: false,
    }
},
 }

Thank you !

When i to run task on my scss files i recieve such errors:

Running "csscomb:dynamic_mappings" (csscomb) task
>> Using default config file...
>> Source file "main.scss" not found.
>> Source file "modules/_mixins.scss" not found.
>> Source file "modules/_typography.scss" not found.
>> Source file "modules/_variables.scss" not found.
....

i am using such options

    csscomb:
      dynamic_mappings:
        cwd: '<%= yeoman.dist %>/styles/'
        src: ['*.scss']
        dest: '<%= yeoman.dist %>/styles/compressed'
        ext: '.resorted.scss'

with css files with such options csscomb works fine.

Or csscomb currently not supporting preprocessors?

If we mention list of souces for one file we expect concatination of results but we get only last souce file cleaned up with csscomb in dst.css

csscomb: {
    main: {
        files: {
            'dst.css': ['src1.css', 'src2.css'],
        }
    },

Regular Expression Denial of Service (DoS)SEVERITY: HIGH
Discovered in a nested dependency:
[email protected] -> [email protected] -> [email protected] -> [email protected]

Details: https://snyk.io/vuln/npm:minimatch:20160620?utm_source=bithound

minimatch > 3.0.2 should be used, updating to the latest csscomb is recommended

In that case border-color will not aplly.

So you need write color in such ways:
border-bottom: {width} {style} {color};
or
border-bottom-color: ...;
border-bottom-width: ...;
border-bottom-style: ...;