This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

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