Use CSS modules in HTML
npm install posthtml-css-modulesPostHTML plugin that inlines CSS modules in HTML.
If you're more into webpack then you don't need all these modules at all.
With css, style, and html loaders you can achieve the same result:
css-modules-webpack-example
cssClasses.json with all CSS modules inside:json
{
"title": "_title_116zl_1 _heading_9dkf",
"profile": {
"user": "_profile_user_f93j"
}
}
`Now we can inline these CSS modules in our HTML:
`js
var posthtml = require('posthtml');posthtml([require('posthtml-css-modules')('./cssClasses.json')])
.process(
'
My profile
' +
// You can also use nested modules
'John'
)
.then(function (result) {
console.log(result.html);
});//
My profile
// John
`$3
CSS modules could be also separated into several files.
For example, profile.js and article.js inside directory cssModules/:
`js
// profile.js
module.exports = {
user: '_profile_user_f93j'
}
``js
// 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().`js
var posthtml = require('posthtml');posthtml([require('posthtml-css-modules')('./cssModules/')])
.process(
'
John' +
''
)
.then(function (result) {
console.log(result.html);
});//
John
//
`
$3
You can also pass CSS modules as an object to the plugin:
`
var posthtml = require('posthtml'),
cssModules = {
title: "_title_116zl_1 _heading_9dkf",
profile: {
user: "_profile_user_f93j"
}
};posthtml([require('posthtml-css-modules')(cssModules)])
.process(
'
My profile
' +
// You can also use nested modules
'John'
)
.then(function (result) {
console.log(result.html);
});//
My profile
// John
``