0.0.9 • Published 8 years ago
interpolate-html-css-modules-webpack-plugin v0.0.9
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'))
})
]
};