Home Download Buy Blog Forum Support

Auto Sort Css Rules

Re: Auto Sort Css Rules

Postby ajpalkovic on Sun Jun 19, 2011 9:32 pm

Thanks, it doesn't scroll anymore.

I also just pushed an update that enables it work for scss as well. Because of limitations with nested selectors, it is a little limited, but it works in most cases and I'm happy with it. Basically I make the assumption that you will put all the scss rules at the top of a selector and then any nested selectors below it. If you follow that pattern, it will work fine.
ajpalkovic
 
Posts: 142
Joined: Fri Jun 10, 2011 10:21 pm

Re: Auto Sort Css Rules

Postby firefusion on Tue Jul 05, 2011 7:31 am

Is this working with the latest sublime update for anyone else?
firefusion
 
Posts: 218
Joined: Fri Oct 16, 2009 7:37 am

Re: Auto Sort Css Rules

Postby ajpalkovic on Tue Jul 05, 2011 8:04 am

Works for me. You can test it explicitly by binding a key to the sort_css command like this: { "keys": ["ctrl+alt+q"], "command": "sort_css" }. If it doesn't work on one file, upload it and I'll fix it.
ajpalkovic
 
Posts: 142
Joined: Fri Jun 10, 2011 10:21 pm

Re: Auto Sort Css Rules

Postby firefusion on Tue Jul 05, 2011 5:28 pm

Ah yes that works. How might I get this to work on .less files?
firefusion
 
Posts: 218
Joined: Fri Oct 16, 2009 7:37 am

Re: Auto Sort Css Rules

Postby firefusion on Tue Jul 05, 2011 5:35 pm

It will auto sort .css files on save and .scss now for some reason but not my own hack for .less files. I just copied the .scss rules and added them under.
firefusion
 
Posts: 218
Joined: Fri Oct 16, 2009 7:37 am

Re: Auto Sort Css Rules

Postby ajpalkovic on Tue Jul 05, 2011 6:33 pm

Yea, you probably can't copy them exactly for less as the scopes will be different. I have never used less, only css and scss. If you know a good bit about less, then you can try and figure out what the various scopes are and add them, but copying the scss ones probably won't work.
ajpalkovic
 
Posts: 142
Joined: Fri Jun 10, 2011 10:21 pm

Re: Auto Sort Css Rules

Postby firefusion on Wed Jul 06, 2011 4:54 am

Cool thanks.

Just a quick question (if you have time, don't worry if not) am I looking to add all the dict > string names in here ending in .css or .less?

I assume 'list' is for property lists and and 'rules' if for everything else ('comment' is obvious).

https://raw.github.com/appden/less.tmbu ... tmLanguage

e.g. (not complete yet)

Code: Select all
  'source.css.less': {
    'list': [
      'meta.property-list.css',   
      'support.type.property-name.css',   
      'support.function.less'
    ],
    'rules': [
      ['meta.property-name.css', 'meta.property-value.css'],
      ['support.function.less', 'variable.other.less', 'keyword.operator.less']
    ],
    'ignore': [
      'comment.block.css',
      'comment.line.double-slash.less'
    ]
firefusion
 
Posts: 218
Joined: Fri Oct 16, 2009 7:37 am

Re: Auto Sort Css Rules

Postby ajpalkovic on Wed Jul 06, 2011 7:27 pm

Yea the basic idea is that 'lists' define the regions to sort, so like #id { rule1; rule2; }, the scopes in list should match the entire thing (between the curly braces). Inside of that region, it needs to identify individual rules. So, each array in rules is a sequence of scopes to match. In your example, it will essentially attempt to match it like this:
[whitespace or any scopes in the 'ignore' section]{0 or more times}[meta.property-name.css]{1 or more times}[whitespace or any scopes in the 'ignore' section]{0 or more times}[meta.property-value.css]{1 or more times}

With nested regions, it gets much more complicated because the scopes don't understand nesting, which is fine, but problematic. The plugin works for nesting, but only if all of the rules are listed before any nesting is done.

#id { rule1; rule2; #id2 { nestedRule1; nestedRule2; } rule3;} would only sort rule1 &rule2, and nestedRule1 & 2. rule3 can't be easily sorted without bracket matching.
ajpalkovic
 
Posts: 142
Joined: Fri Jun 10, 2011 10:21 pm

Re: Auto Sort Css Rules

Postby joshery420 on Tue Jul 12, 2011 4:40 pm

Would it be possible for this to be updated so that it supports inline block comments?
Right now all the CSS I work with is using inline block comments, so the sorting algorithm always ends up moving them elsewhere.
For example, the code below

Code: Select all
div.class {
    height:         189px;
    position:       relative;
    z-index:        20; /*above main and content */
    margin-bottom:  -6px;
}


becomes this after being sorted.

Code: Select all
div.class {
    height:         189px; /*above main and content */
    margin-bottom:  -6px;
    position:       relative;
    z-index:        20;
}


The comment jumped from z-index to height because it was "above" margin-bottom so it was assumed to be a comment related to it.
A condition checking if the comment is the only text on the line would fix this I think.
So if the line above is only a comment, move it with the line below. If it isn't, keep it with the current line.
I don't know Python so I'm not sure if that would be hard to do or not, but hopefully it wouldn't be too hard.

Other than that, this plugin is great! I always get annoyed with my co-workers lack of organization with things like CSS files and this saves me loads of time. :D Thanks for all your hard work!
joshery420
 
Posts: 12
Joined: Tue Jul 12, 2011 4:29 pm

Re: Auto Sort Css Rules

Postby firefusion on Mon Aug 15, 2011 7:54 am

Is the plugin still working in the latest ST for anyone? It's stopped working for me.
firefusion
 
Posts: 218
Joined: Fri Oct 16, 2009 7:37 am

PreviousNext

Return to Plugin Announcements

Who is online

Users browsing this forum: No registered users and 4 guests