Как написать postcss-плагин

Катерина Павленко, Devexperts

Как написать
postcss-плагин

Катерина Павленко, Devexperts
spb-frontend plugin hackathon, 29.11.15

Что может делать плагин?

Cинтаксическое дерево

Cинтаксическое дерево

			
				html, body.home {
					margin: 10px 20px;
				}
			
		
			
				type: 'root',
				nodes: [
					{
						type: 'rule',
						selectors: 'html, body.home',
						nodes: [{
							type: 'decl',
							prop: 'margin',
							value: '10px 20px'
						}]
					}
				]
			
		

postcss plugin boilerplate


			
				var postcss = require('postcss');

				module.exports = postcss.plugin('PLUGIN_NAME', function (opts) {
					opts = opts || {};
					// Work with options here
					return function (css, result) {
						// Transform CSS AST here
					};
				});
			
		

node

container (node with children)

container

result

Самый бесполезный плагин в мире

			
				module.exports = postcss.plugin('postcss-carl', function (opts) {
					return function (css, result) {
						css.walkRules(function(rule) {
							rule.selector = rule.selector + ', CARL';
						});
					};
				});

			
		
                    
                        .zombie {
                             color: red;
                        }
                    
                
                    
                        .zombie, CARL {
                            color: red;
                        }
                    
                

Второй по бесполезности плагин в мире

			
				css.walkDecls(function(decl) {
					if (decl.prop === 'width') {
						var comment = postcss.comment({text: 'Upside down!'});
						decl.prop = 'height';
						decl.parent.insertBefore(decl, comment);
					}
				});

			
		
¯\_(ツ)_/¯

Как рассказать о важном?

console.log() //bad 
result.warn(); //good!

Тестирование

Гайдлайны

Ссылки

Презентация: http://cakeinpanic.github.io/hackathon/

Fork me on Github