posthtml-css-modules

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

Global file

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>

Directory with several files

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>

Object

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(
        '<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>

Changelog

[0.1.3] - 2017-09-03

Added

• Pass CSS modules as an object