CSScomb 3.0: beautiful code with one team
This week, a new version of CSScomb has been released - a tool that makes CSS code beautiful. About how the "comb" is used in Yandex, recently wrote Beyondtheclouds . I will tell you what's new in the third version and what to do if the basic functionality is not enough. For example, how to write your own plugin or even postprocessor.
First about the new.
Indent lovers can now arrange sass files.
Stylus did not appear and is not expected in the near future. Difficulties arose not so much with writing the code, as with his support: there was no person who would be willing to follow the news in the language and update the parser. Details can be found in the corresponding task .
')
For the sort order, a new keyword has appeared:
An example of selective sorting:
Arguing about which order of properties is better can be infinite. We decided to make your job easier and added the
This property can also be combined with selective sorting.
In the third version, improved work with spaces. Some settings we deleted (
We also added a number of new options:
A complete list and examples of use can be found on the githaba .
CSScomb can be obtained in several ways:
In addition, there are plugins for Gulp , for Brunch and for Brackets , but they still do not support version 3.0.
If you are using CSScomb 2.0 and want to upgrade to the third version, it is very important to update the config. With the old, unfortunately, does not take off.
So that you do not have to spend time on reworking the file with your hands, we made a service for generating configs . All you need to do is click on those code options that you like. The output will be a ready-to-use configuration file.
CSScomb is a great tool, but sometimes you want to add something. Therefore, we tried to make the code as modular and easily extensible as possible. You can add a “comb” to the desired function without bothering with the fork. There are three ways to do this:
The easiest way to use someone's plugin. For example, here is an option that removes an empty line between groups of declarations if there are too few declarations in the group. Connecting a plugin is quite simple; there is a
Since the opportunity to write plugins has just appeared, there is no particular variety yet. Therefore, if you know exactly what you are missing, you can write your own option.
A plugin is a regular module with methods for handling AST. Documentation can be found on the githaba . Gonzales PE is used as a parser, on the githab is the documentation for the structure of the tree . Here is the simplest example of a plugin that takes the CSS code and replaces all comments with
Same code, only with comments.
Make your options and share links with the community. If you have questions, feel free to write in the comments or immediately start a task.
If a plugin is not enough and you need something much more, why not write your postprocessor? We have taken out the core CSScomb in a separate module so that anyone can apply it to their project. Therefore, if you like the principle of the "comb", a system of plug-ins and configuration files, pay attention to CSScomb Core . Inside this module there is everything you need:
A special template, Flip Comb , will help to quickly understand. This is a small postprocessor, nothing deprived. The code can be forked and changed to fit your needs.
The main direction of further improvements is the linter and CLI.
We have tried to write the options ourselves, without waiting for them to appear in the kernel. Therefore, the new settings in the near future to wait is not worth it. But if you wrote a plugin and think that it will also come in handy for others, this is very cool, send the PR.
If you are interested in participating in the project, pay attention to the tasks with the tag "help wanted" . Stylus, for example, is still waiting for its hero.
CSScomb: https://github.com/csscomb/csscomb.js
CSScomb Core: https://github.com/csscomb/core
CSScomb Core based postprocessor template: https://github.com/csscomb/core-template
Service for generating a config: http://csscomb.com/config
PS Hosting for csscomb.com is provided to us by Nodejitsu free of charge as part of the support program of open-source . There are not many resources there, so if the site suddenly becomes unavailable, please treat with understanding.
First about the new.
Sass support
Indent lovers can now arrange sass files.
// : .panda,.foo>span border-color:$blue +include button color: darken($blue, 9%) $blue : #3bbfce padding:$margin / 2 $margin: 16px margin: $margin / 2 // : .panda, .foo > span $blue: #3bbfce $margin: 16px +button padding: $margin / 2 margin: $margin / 2 border-color: $blue color: darken($blue, 9%) Stylus did not appear and is not expected in the near future. Difficulties arose not so much with writing the code, as with his support: there was no person who would be willing to follow the news in the language and update the parser. Details can be found in the corresponding task .
')
"Remains" in sorting
For the sort order, a new keyword has appeared:
"..." , which means "all other properties not listed in the list." It is convenient to use it in two cases:- for alphabetical sorting (see below)
- for selective sorting
An example of selective sorting:
// : .panda { color: $color; @include animal; top: 0; $color: white; } /** * : * { * sort-order: [["$variable"], ["..."], ["$include"]] * } */ .panda { $color: white; color: $color; top: 0; @include animal; } Sort by alphabet
Arguing about which order of properties is better can be infinite. We decided to make your job easier and added the
sort-order-fallback property. This option alphabetically sorts the properties indicated in the list with the keyword "..." . // : .panda { background: salmon; display: flex; align-items: center; color: white; } /** * : * { * "sort-order": ["..."], * "sort-order-fallback": "abc" * } */ .panda { align-items: center; background: salmon; color: white; display: flex; } This property can also be combined with selective sorting.
.panda { background: salmon; @include animal; display: flex; align-items: center; color: white; } /** * : * { * "sort-order": [[$include"], ["display"], ["..."]], * "sort-order-fallback": "abc" * } */ .panda { @include animal; display: flex; align-items: center; background: salmon; color: white; } New Settings
In the third version, improved work with spaces. Some settings we deleted (
rule-indent , stick-brace ). Some have broken and renamed. So, combinator-space turned into space-before-combinator and space-after-combinator , and colon-space combinator-space turned into space-before-combinator space-before-colon and space-after-colon .We also added a number of new options:
tab-sizespace-before-selector-delimiterspace-after-selector-delimiterspace-before-opening-bracespace-after-opening-bracespace-before-closing-bracespace-after-declaration
A complete list and examples of use can be found on the githaba .
How to upgrade
CSScomb can be obtained in several ways:
In addition, there are plugins for Gulp , for Brunch and for Brackets , but they still do not support version 3.0.
If you are using CSScomb 2.0 and want to upgrade to the third version, it is very important to update the config. With the old, unfortunately, does not take off.
So that you do not have to spend time on reworking the file with your hands, we made a service for generating configs . All you need to do is click on those code options that you like. The output will be a ready-to-use configuration file.
How to extend the functionality
CSScomb is a great tool, but sometimes you want to add something. Therefore, we tried to make the code as modular and easily extensible as possible. You can add a “comb” to the desired function without bothering with the fork. There are three ways to do this:
- connect third-party plugin
- write your plugin
- make CSScomb your postprocessor
3rd party plugins
The easiest way to use someone's plugin. For example, here is an option that removes an empty line between groups of declarations if there are too few declarations in the group. Connecting a plugin is quite simple; there is a
use() method for this: var CSScomb = require('csscomb'); var groupSize = require('csscomb-group-size'); // 4 , 4 , // -: var config = { 'group-size': 4 }; // «»: var csscomb = new CSScomb().use(groupSize).configure(config); // : csscomb.processPath('path/to/css'); Since the opportunity to write plugins has just appeared, there is no particular variety yet. Therefore, if you know exactly what you are missing, you can write your own option.
Write your plugin
A plugin is a regular module with methods for handling AST. Documentation can be found on the githaba . Gonzales PE is used as a parser, on the githab is the documentation for the structure of the tree . Here is the simplest example of a plugin that takes the CSS code and replaces all comments with
/* (╯°□°）╯︵ ┻━┻ */ : module.exports = { name: 'flip-comments', syntax: ['css'], accepts: { boolean: [true] }, process: function(nodeType, node) { if (nodeType !== 'commentML') return; node[0] = ' (╯°□°）╯︵ ┻━┻ '; } }; Same code, only with comments.
Make your options and share links with the community. If you have questions, feel free to write in the comments or immediately start a task.
Write your postprocessor
If a plugin is not enough and you need something much more, why not write your postprocessor? We have taken out the core CSScomb in a separate module so that anyone can apply it to their project. Therefore, if you like the principle of the "comb", a system of plug-ins and configuration files, pay attention to CSScomb Core . Inside this module there is everything you need:
- Parser with support for preprocessors
- API for working with configs
- API for creating and connecting plugins
- File / String / Directory API
A special template, Flip Comb , will help to quickly understand. This is a small postprocessor, nothing deprived. The code can be forked and changed to fit your needs.
Future plans
The main direction of further improvements is the linter and CLI.
We have tried to write the options ourselves, without waiting for them to appear in the kernel. Therefore, the new settings in the near future to wait is not worth it. But if you wrote a plugin and think that it will also come in handy for others, this is very cool, send the PR.
If you are interested in participating in the project, pay attention to the tasks with the tag "help wanted" . Stylus, for example, is still waiting for its hero.
All links in one place
CSScomb: https://github.com/csscomb/csscomb.js
CSScomb Core: https://github.com/csscomb/core
CSScomb Core based postprocessor template: https://github.com/csscomb/core-template
Service for generating a config: http://csscomb.com/config
PS Hosting for csscomb.com is provided to us by Nodejitsu free of charge as part of the support program of open-source . There are not many resources there, so if the site suddenly becomes unavailable, please treat with understanding.
Source: https://habr.com/ru/post/230589/
All Articles