Сортировка CSS свойств

Инструмент для пересортировки CSS свойств в заданном порядке.

• Что сейчас
• Планы
• Порядок сортировки по умолчанию
• Примеры успешно пройденных тест кейсов
• Обнаруженные баги

Что сейчас:

• CSS свойства в рамках селекторов сортируются в соответствии с настройками. По умолчанию используется порядок из Zen coding'а.
• Сохраняется исходное форматирование таблицы стилей
• Комментарии внутри фигурных скобок у селекторов удаляются, а комментарии вне фигурных скобок у селекторов бережно сохраняются
• Переносятся вниз незнакомые свойства в том порядке, в котором они встречаются в рамках селектора. Например: he\ight: 100% и подобные будут рассмотрены как незнакомые
• Успешно парсится @media ... {...}
• Успешно парсятся expressions и далее переносятся в конец свойств в порядке, в котором оно встретились в рамках свойств одного селектора.

Планы

1. Доработки связанные с тест кейсами, которые не парсятся или плохо парсятся
2. Переезд на csscomb.ru
3. Разработка плагинов для популярных редакторов кода

Порядок сортировки по умолчанию

Порядок свойств взят из документации к Zen coding.

Примеры успешно пройденных тест кейсов

1. div {
   	margin-top: 1px;
   	top: 1px;
   	background-position: 0 0;
   	padding: 10px;
   	position: relative;
   }

2. /* Стили
   для
   fieldset */
   
   fieldset
   {
   	padding: 0;
   	border: 0;
   	margin: 0 0 16px;
   	}

3. div {
   	right: 10px !important;
   	border-right-width: 1px;
   	width: 100px;
   }

4. div {
   	width: 10px;
   	height: 10px;
   }
   
   	div a {
   		background: url(/i/ico.gif);
   	}

5. div{
   	color: red;
   	*color: green;
   	_color: yellow;
   	co\lor: black;
   }

6. div {
   	height: 100px;
   	opacity:/* Этот комментарий будет удален */1;
   	/* И этот комментарий будет удален */ text-indent:-9999px;
   	font-family:'Monotype Corsiva','Comic Sans MS',cursive; /* Этот будет тоже удален */
   }

7. a{
   	background: red;
   	background: green;
   	/* position: absolute; */
   	}

8. #footer .copyright {
   	/*
   	width: 177px;
   	float: right;
   	margin-top: 5px;
   	line-height: 12px;
   	font-size: 93%;
   	background: red;
   	*/
   }

9. div {display: inline-block; *display: inline;}

10. .test-class {margin:0}

11. div {
    	background: red;
    	filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    	opacity: 1;
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/i/pic1.png',sizingMethod='crop');
    }

12. /* .b-news (begin) */
    .b-news
    {
       top: 0;
       position: relative;
    }
    /* .b-news (end) */

13. .b-pager{font-size:130%;margin:1em 0 2em;}
    .b-pager__title{font-weight:bold;padding-right:.65em;}

14. /* .b-pager (begin) */
    .b-pager{font-size:130%;margin:1em 0 2em;}
    .b-pager__title{font-weight:bold;padding-right:.65em;}
    /* .b-pager (end) */
    

15. #header {
    	zoom:1;
    	zoom:expression(
    		runtimeStyle.zoom = 1,
    		i = createElement('div'),
    		i.className = 'after',
    		appendChild(i)
    		);
    	padding-bottom:10px;
    	height:100px;
    	height:expression(
    		runtimeStyle.height = 1,
    		this.parentNode.style.offsetHeight;
    		);
    	}

16. /* test */
    @media screen { /* Стиль для отображения в браузере */
    	BODY {
    		font-family: Arial, Verdana, sans-serif; /* Рубленый шрифт */
    		font-size: 90%; /* Размер шрифта */
    		color: #000080; /* Цвет текста */
    	}
    
    	H1 {
    		background: #faf0e6; /* Цвет фона под текстом */
    		border: 2px dashed #800000; /* Рамка вокруг заголовка */
    		color: #a0522d; /* Цвет текста */
    		padding: 7px; /* Поля вокруг текста */
    	}
    
    	H2 {
    		color: #556b2f; /* Цвет текста */
    		margin: 0; /* Убираем отступы */
    	}
    
    	P {
    		margin-top: 0.5em; /* Отступ сверху */
    	}
    
    }
    
    /* test */
    @media print { /* Стиль для печати */
    
    	BODY {
    		font-family: Times, 'Times New Roman', serif; /* Шрифт с засечками */
    	}
    
    	H1, H2, P {
    		color: #000; /* Черный цвет текста */
    	}
    
    }
    /* test */

17. aside {
    	background: url(a.png) top left no-repeat,
    				url(b.png) center / 100% 100% no-repeat,
    				url(c.png) white;
    
    }

18. @font-face {
    	font-family: MyHelvetica;
    	src: local("Helvetica Neue Bold"),
    		 local("HelveticaNeue-Bold"),
    		 url(MgOpenModernaBold.ttf);
    	font-weight: bold;
    }
    /* http://www.w3.org/TR/css3-fonts/#font-resources */

19. div
    {
    	display:-moz-inline-box;
    	display:inline-block;
    }
    
    a
    {
    	cursor:pointer;
    	cursor:hand;
    }

20. /* @media print { */
    *
    {
        background: #fff !important;
        color: #000;
    }
    
    body
    {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.4;
        word-spacing: 1.1pt;
        letter-spacing: 0.2pt;
        font-family: Georgia, Garamond, "Times New Roman", Times, serif !important;
        color: #000 !important;
        background: #fff;
        font-size: 12pt;
    }
    
    /*Headings */
    h1, h2, h3, h4, h5, h6
    {
        font-family: Helvetica, Arial, sans-serif;
        color: #000000 !important;
    }
    
    
    blockquote
    {
        margin: 1.3em;
        padding: 1em;
        font-size: 10pt;
        font-style: italic;
    }
    
    /* Images */
    a img
    {
        border: none;
    }
    
    /* code */
    code, pre
    {
        color: #000
    }
    
    /* Links */
    a:link, a:visited
    {
        background: transparent;
        text-decoration: underline;
        color: #000 !important;
    }
    
    a[href^="http://"]
    {
        color: #000;
    }
    
    
    /*}*/
    

21. .b-chooser__body__bg
    {
        padding: 1em 0 3em 0; /* comment */
    }

22. .b-chooser__body__bg
    {
        padding: 1em 0 3em 0;
        background: url(b-chooser__tank.png) 94% 100% no-repeat;
    }
    /* привет */ /* */

23. div{
    top:0;margin:0;}

24. /* Article List */
    .article-list {
        }
            .article-list .archive-item {
                }

25. .test{
    	text-shadow:
    		0 -1px 1px rgba(0,0,0,0.4),
    		0 0 5px rgba(255,255,255,0.7);
    }

Обнаруженные баги

Известных багов не обнаружено. Если вы нашли баг, пожалуйста, напишите мне.