Webpack for create emails

main.js

// require('./email.scss')
const css = require('!!raw-loader!inline-style!sass!./email.scss')
// const template = require('ejs-compiled!./emails/contact.ejs')
// const template = require('ejs-compiled!./emails/a-customer.ejs')
const template = require('ejs-compiled!./emails/l-customer.ejs')

function getStyles (...selectors) {
  return selectors.reduce((styles, selector) => {
    if (!css[selector]) {
      console.warn(`The '${selector}' selector doesn't exist.`)
    }

    return `${styles};${css[selector]}`
  }, '')
}

let templateCompiled = template({getStyles})

document.write(templateCompiled)

package.json

{
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --config webpack.config.js",
    "build": "webpack --inline"
  },
  "devDependencies": {
    "autoprefixer-loader": "^3.2.0",
    "handlebars": "^4.0.5",
    "handlebars-loader": "^1.4.0",
    "html-webpack-plugin": "^2.22.0",
    "inline-style-loader": "0.0.5",
    "node-sass": "^3.9.3",
    "raw-loader": "^0.5.1",
    "sass-loader": "^4.0.2"
  },
  "dependencies": {
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.1"
  }
}

style.css

.title {
  color: blue;
  font-size: 70px;
}

.subtitle {
  color: white;
  padding: 20px;
  background: black;
}

user.ejs

<article style="<%= getStyles('.email') %>" class="email">
  <img style="<%= getStyles('.email__logo') %>" class="email__logo"  src="http://" alt="French company">
  <span style="<%= getStyles('.email__title') %>" class="email__title">¡Hola {{ 'nombre del cliente' }}!</span>
  <p style="<%= getStyles('.mb4') %>" class="mb4">Esta es la lista de productos que elegiste</p>
  <table style="<%= getStyles('.table') %>" class="table">
    <thead style="<%= getStyles('.table__t') %>" class="table__t">
      <tr>
        <th style="<%= getStyles('.py3') %>" class="py3">Producto</th>
        <th style="<%= getStyles('.py3') %>" class="py3">Precio unit.</th>
        <th style="<%= getStyles('.py3') %>" class="py3">Cantidad</th>
        <th style="<%= getStyles('.py3') %>" class="py3">Subtotal</th>
      </tr>
    </thead>
    <tbody style="<%= getStyles('.table__t') %>" class="table__t">
      <tr>
        <td style="<%= getStyles('.pt3') %>" class="pt3">Calzado</td>
        <td style="<%= getStyles('.pt3') %>" class="pt3">S/.24.00</td>
        <td style="<%= getStyles('.pt3') %>" class="pt3">3</td>
        <td style="<%= getStyles('.pt3') %>" class="pt3">S/.24.00</td>
      </tr>
      <tr>
        <td>Calzado</td>
        <td>S/.24.00</td>
        <td>3</td>
        <td>S/.24.00</td>
      </tr>
      <tr>
        <td style="<%= getStyles('.pb3') %>" class="pb3">Calzado</td>
        <td style="<%= getStyles('.pb3') %>" class="pb3">S/.24.00</td>
        <td style="<%= getStyles('.pb3') %>" class="pb3">3</td>
        <td style="<%= getStyles('.pb3') %>" class="pb3">S/.24.00</td>
      </tr>
    </tbody>
  </table>
  <p style="<%= getStyles('.mb0') %>" class="mb0">TOTAL</p>
  <p style="<%= getStyles('.email__title', '.primary', '.mt0', '.mb3') %>" class="email__title primary mt0 mb3"><strong>s./{{ 'total' }}</strong></p>
  <hr/>
  <p style="<%= getStyles('.email__detail') %>" class="email__detail">
    <span>Fecha: {{ 'fecha' }}</span>
    <span>Hora: {{ 'hora' }}</span>
  </p>
  <hr/>
  <p style="<%= getStyles('.email__sub-title', '.m0') %>" class="email__sub-title m0">Gracias por realizar tu pedido</p>
  <p style="<%= getStyles('.email__sub-sub-title', '.m0') %>" class="email__sub-sub-title m0">- Pronto nos comunicaremos contigo -</p>
  <hr/>
  <footer style="<%= getStyles('.footer', '.pt3', '.pb3') %>" class="footer pt3 pb3">
    <span style="<%= getStyles('.email__sub-title') %>" class="email__sub-title">French Company S.R.L.</span>
    <p style="<%= getStyles('.m0') %>" class="m0">RUC: 20456959120</p>
    <p style="<%= getStyles('.m0') %>" class="m0">Whatsapp: +51 990 660 453</p>
    <p style="<%= getStyles('.m0') %>" class="m0">Teléfono: +51 990 660 453 | 0054 9 1144440878</p>
    <p style="<%= getStyles('.m0') %>" class="m0">Correo: info@frenchcompany.com.ar</p>
    <p style="<%= getStyles('.m0') %>" class="m0">Direccion Oficina Av. C. Vargas 1301 Pocollay, Tacna</p>
  </footer>
  <hr/>
  <p style="<%= getStyles('.email__sub-title', '.mb3') %>" class="email__sub-title mb3">- Deposite a nuestras cuentas -</p>
  <ul style="<%= getStyles('.m0', '.p0') %>" class="m0 p0">
    <li style="<%= getStyles('.check-item') %>" class="check-item">
      <p style="<%= getStyles('.m0') %>">{{ 'titulo' }}</p>
      <div>
        <img style="<%= getStyles('.check-item__image') %>" src="https://www.ucm.es/data/cont/docs/860-2015-06-22-logo.jpg">
        <span style="<%= getStyles('.check-item__number') %>">{{ 'numero de cuenta' }}</span>
      </div>
    </li>
  </ul>
  <hr/>
</article>

webpack.config.js

var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PUBLIC_HOST = '/' // host url, domain
var autoprefixerOptions = '{ browsers: ["last 2 version"] }'

module.exports = {
  devtool: 'eval',
  debug: true,
  noInfo: true,
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/dev-server',
    './index.js'
  ],
  output: {
    publicPath: PUBLIC_HOST,
    path: path.resolve(__dirname, './dist'),
    filename: 'index.js'
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        exclude: /node_modules/,
        loader: 'raw!inline-style!autoprefixer?' + autoprefixerOptions + '!sass'
      }, {
        test: /\.hbs/,
        loader: 'handlebars-loader'
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.ProvidePlugin({
      // styles: require('./style.css')
    }),
    new HtmlWebpackPlugin({
      // styles: require('./style.css'),
      template: './templates/user.ejs',
      inject: true,
      xhtml: true,
      supplies:	['mop', 'broom', 'duster']
    })
  ],
  devServer: {
    hot: true
  }
}

email builder