Neural Processing Mechanisms

    posthtml-css-modules

    0.1.3 • Public • Published

    posthtml-css-modules

    npm version Build Status

    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>
    

    Install

    npm i posthtml-css-modules

    DownloadsWeekly Downloads

    99

    Version

    0.1.3

    License

    MIT

    Last publish

    Collaborators

    • scrum
    • maltsev