PostCSS - Polymer Loader

PostCSS Webpack loader for Polymer elements. Works in combination with the awesome wc-loader.

Install

yarn add --dev postcss-polymer-loader

Setup configurations

Add the postcss configuration file:

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:

module . exports = { module : { ... rules : [ ... { test : / \. js $ / , use : [ ' babel-loader ' ] } , { test : / \. html $ / , use : [ ' wc-loader ' , ' postcss-polymer-loader ' ] } ] ... } }

Setup project

As stated, this loader needs an HTML loader and precisely the wc-loader to load Web Components. More specifically we are talking about Polymer elements.

NOTE: since the wc-loader works well with the Polymer 2.x version, the example will be written in Polymer 2 sintax, but the loader should work also with Polymer 1.x.

Folder structure (example)

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

< link rel = " import " src = " ./path/to/polymer.html " > < dom-module id = " awesome-component " > < postcss src = " ./../global-style.postcss " > < / postcss > < postcss src = " ./style.postcss " > < / postcss > < template > < div class = " TestDivOne " > < / div > < div class = " TestDivTwo " > < / div > </ template > </ dom-module >

' use strict ' ; import ' ./template.html ' ; class AwesomeComponent extends Polymer . Element { static get is ( ) { return ' awesome-component ' } ; static get properties ( ) { return { prop1 : { type : String , value : ' This is awesome! ' } } } ; } ; window . customElements . define ( AwesomeComponent . is , AwesomeComponent ) ;

' use strict ' ; import ' ./src/awesome-component ' ;

Contribute

This is currently a POC, so if you have some ideas or better solutions just open an issue and let's talk! 👍

License

MIT © LasaleFamine