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>