posthtml-css-modules


PostHTML plugin that inlines CSS modules in HTML.

Usage

I suggest using postcss-modules to generate CSS modules.
Check the PostHTML documentation for integration examples with grunt, gulp, and other build systems.

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

$3

Let's say we have 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(
'

' +
'

'
)
.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

``