Pobem Playground

const postcss = require("postcss"); postcss([ require('postcss-nested'), require('pobem'), require('postcss-prettify') ]).process(` /**************************************************** Pobem style *****************************************************/ block(block).mod(mod val) { mod(mod2 val2) { /* 1 */ color: #444223; } elem(elem) { /* 2 */ width: 100px; mod(mod val) { /* 3 */ width: 40px; } } > h2 { /* 4 */ opacity: .3; block(global-block).mod(js inited) & { /* 5 */ opacity: 1; } } } /**************************************************** Quotes and delimiters between mod val /****************************************************/ block('block').mod('mod', 'val') { /* 1 */ } block('block').mod('mod' -> 'val') { /* 2 */ } block("block").mod("mod", "val") { /* 3 */ } /**************************************************** Mixed block /****************************************************/ block(block) { elem(my-elem) { &block(my-mixed-block) { /* 1 */ } } /* or */ elem(my-elem).block(my-mixed-block) { /* 2 */} } /**************************************************** Rebem style *****************************************************/ :block(content):mod(handler events) { padding-top: 40px; :elem(event-card) { lost-column: 1/2; } } `).css