Metamorphosis / Component

AbsurdJS process CSS and HTML. So, why not doing both at the same time.

var page = {
	css: {
		".page": {
			marginTop: "20px",
			h2: {
				fontSize: "40px"
			}
		}
	},
	html: {
		'section.page': {
			h2: "That's a page"
		}
	}
}
api
.morph("component")
.add(page)
.compile(function(err, css, html) {
	// ...
});
The result of the above compilation is:
---- CSS ----
.page {
  margin-top: 20px;
}
.page h2 {
  font-size: 40px;
}

---- HTML ----
<section class="page">
	<h2>
		That's a page
	</h2>
</section>

You can even nest components.

var title = {
    css: {
        ".title": { fontSize: "30px" }
    },
    html: {
        "h1.title": "Title here"
    }
}
var header = function() {
    return {
        css: {
            header: { marginTop: "20px" }
        },
        html: {
            header: {
                span: "Header text"
            }
        }
    }
}
var page = {
	css: {
		".page": {
			marginTop: "20px",
			h2: {
				fontSize: "40px"
			}
		}
	},
	html: {
        _include: [header, title],
		'section.page': {
			h2: "That's a page"
		}
	}
}
api.morph("component").add(page);
The result is:
---- CSS ----
.page, header {
  margin-top: 20px;
}
.page h2 {
  font-size: 40px;
}
.title {
  font-size: 30px;
}

---- HTML ----
<header>
	<span>
		Header text
	</span>
</header>
<h1 class="title">
	Title here
</h1>
<section class="page">
	<h2>
		That's a page
	</h2>
</section>