PostHTML plugin that inlines CSS modules in HTML.
I suggest using postcss-modules to generate CSS modules. Check the PostHTML documentation for integration examples with gulp, webpack, and other build systems.
Let's say we have cssClasses.json with all CSS modules inside:
{
"title": "_title_116zl_1 _heading_9dkf",
"profile": {
"user": "_profile_user_f93j"
}
}Now we can inline these CSS modules in our HTML:
var posthtml = require('posthtml');
posthtml([require('posthtml-css-modules')('./cssClasses.json')])
.process(
'<h1 css-module="title">My profile</h1>' +
// You can also use nested modules
'<div css-module="profile.user">John</div>'
)
.then(function (result) {
console.log(result.html);
});
// <h1 class="_title_116zl_1 _heading_9dkf">My profile</h1>
// <div class="_profile_user_f93j">John</div>CSS modules could be also separated into several files.
For example, profile.js and article.js inside directory cssModules/:
// profile.js
module.exports = {
user: '_profile_user_f93j'
}// article.js
module.exports = {
title: '_article__tile _heading'
}You can use both JS and JSON for a declaration, as long as the file could be required via require().
var posthtml = require('posthtml');
posthtml([require('posthtml-css-modules')('./cssModules/')])
.process(
'<div class="baseWrapper" css-module="profile.user">John</div>' +
'<h2 css-module="article.title"></h2>'
)
.then(function (result) {
console.log(result.html);
});
// <div class="baseWrapper _profile_user_f93j">John</div>
// <h2 class="_article__tile _heading"></h2>