PostCSS - HTML Loader

PostCSS Webpack loader for HTML templates (usually for Polymer 3.x). Works in combination with the text-loader.

Install

yarn add --dev postcss-html-loader

Setup configurations

Add the postcss configuration file:

postcss.config.js

NOTE: you need to add these (or other) plugins as project dependencies.

module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': {},
    'autoprefixer': {},
    'cssnano': {}
  }
}

Add the loader to your webpack config:

webpack.config.js

module.exports = {
  module: {

    ...

    rules: [

      ...

     {
        test: /\.html$/,
        use: ['text-loader', 'postcss-html-loader']
      }
    ]

    ...

  }
}

Setup project

As stated, this loader needs an text loader to load the HTML template, like the text-loader. More specifically you can load an HTML template from and external file and use it within a Polymer 3.x template.

Folder structure (example)

|– src
| |– awesome-component
| | |– index.js
| | |- template.html
| | |- style.postcss
| |
| |- global-style.postcss
| |- main-entry.js
|
|– postcss.config.js
|– webpack.config.js

awesome-component/template.html (example)

<postcss src="./../global-style.postcss"></postcss>
<postcss src="./style.postcss"></postcss>

<div>
  <div class="TestDivOne"></div>
  <div class="TestDivTwo"></div>
</div>

awesome-component/index.js (example)

import {Element as PolymerElement} from '@polymer/polymer/polymer-element';
import template from './template.html';

class AwesomeComponent extends PolymerElement {
  static get properties() {
    return {
        prop1: {
        type: String,
        value: 'This is awesome!'
      }
    }
  };

  static get template() {
    return template;
  };
};

window.customElements.define('awesome-component', AwesomeComponent);

main-entry.js (example)

import './src/awesome-component';

License

MIT © LasaleFamine