Interpolate-html-css-modules Webpack Plugin

Webpack plugin that interpolates Handlebars HTML markup with CSS modules.

Install

npm i --save-dev interpolate-html-css-modules-webpack-plugin

API

// webpack.config.js
// require plugin
var InterpolateHtmlCssPlugin = require('interpolate-html-css-modules-webpack-plugin');
 
// add to list of plugins
new InterpolateHtmlCssPlugin('output_template', 'entree_point', { options : {
        compact : true, // boolean :: trim whitespace and \n\r in the output_template
        delimiters : ["<%=", "%>"], // array :: pass your custom delimiters pattern to substitute default "{{ }}", for example <%= data %>)
        template: ejs.compile(fs.readFileSync(__dirname + '/src/template.ejs', 'utf-8')), // optional template to wrap output_data
        module_export : true // boolean :: will output template as npm module, i.e. wrapped into ' module.exports = " template_contents " ',
    }
})

Usage

app.scss

.app {
    padding: 10px 15px;
    background-color: maroon;
}
 
.app-container {
    composes: app;
}
 
.text-color {
    color : green;
}
 

component.css

.root {
    padding: 0 20px;
    max-width: 400px;
    background-color: green;
}
 
.text {
    composes: text-color from "./app.scss";
}

my_component.js

import appStyle from './style/app.scss';
import componentStyle from './style/component.css';
 
// import template in raw text format by using raw!
// you can also use a loader in webpack.config.js in that case '!raw' prefix would not be needed here
import template from 'raw!./template/template.html';
 
/*
 * Important :
 * Export class with 'render' method that returns
 * style references
 * 'render' will be used in plugin internally to pass styles data for interpolation
*/
export default class MyComponent {
 
    render() {
        return {
            styles : {
                app : appStyle,
                style : componentStyle
            },
            template : template
        };
    }
 
};
 

template

Template to compile

<div class="{{app.app-container}}">
    <div class="{{style.root}} more-class-names-here">
        <p class="{{style.text}}">MyComponent styled with app.scss and component.css</p>
    </div>
</div>

result output

    <div class="app__app-container___3S_7v app__app___3Eyjk">
        <div class="component__root___1KrKo more-class-names-here">
            <p class="component__text___2zuSy app__text-color___25fwo">MyComponent styled with app.scss and component.css</p>
        </div>
    </div>

result style.css

 
.app__app___3Eyjk {
  padding: 10px 15px;
  background-color: maroon;
}
 
.app__text-color___3IlW7 {
  color: green;
}
.app__app___EbzzM {
    padding: 10px 15px;
    background-color: maroon;
}
 
.app__text-color___25fwo {
    color : green;
}
.component__root___1KrKo {
  padding: 0 20px;
  max-width: 400px;
  background-color: green;
}
 
/*# sourceMappingURL=style.css.map*/

webpack config example

webpack.config.js

var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var InterpolateHtmlCssPlugin = require('interpolate-html-css-modules-webpack-plugin');
 
var path = require('path');
var ejs = require('ejs');
var fs = require('fs');
 
var sassParams = [
    'outputStyle=expanded',
    'sourceMap',
    'sourceMapContents=true'
];
 
var cssLoader = ExtractTextPlugin.extract('style-loader', [
    'css-loader?modules&importLoaders=1&sourceMap&localIdentName=[name]__[local]___[hash:base64:5]',
    'postcss-loader',
    'sass-loader?' + sassParams.join('&')
].join('!'));
 
module.exports = {
    //entry: './src/index.js',
    entry : {
         file_entree : "./src/components/my_component/my_component.js",
    },
 
    output: {
        filename: 'index.js',
        path: path.resolve('./dist'),
        libraryTarget: 'umd'
    },
 
    devtool: "source-map",
    // devtool: "inline-source-map",
 
    node: {
        fs: "empty" // avoids error messages
    },
 
    module: {
        loaders: [
            { test: /(\.css|\.scss)$/, loader: cssLoader },
            { test: /\.js$/, loader: 'babel-loader', exclude: [/node_modules/] },
        ]
    },
 
    postcss: [
        require('autoprefixer-core'),
        require('postcss-color-rebeccapurple')
    ],
 
    resolve: {
        modulesDirectories: ['node_modules', 'components']
    },
 
    plugins: [
        new ExtractTextPlugin('style.css', { allChunks: true }),
        new InterpolateHtmlCssPlugin('index.html', 'file_entree', {
            template: ejs.compile(fs.readFileSync(__dirname + '/src/template.ejs', 'utf-8'))
        })
    ]
};