Polymer Skeleton: Polymer 3

A mininum boilerplate to deliver a Polymer 3.x with Webpack and PostCSS. Made for personal use, glad if someone can get a good starting point from here. Bye bye Bower.

Features

• Webpack
• webpack-dev-server with hot reloading active.
• PostCSS with cssnext (include autoprefixer) plugin.

Loaders

• text-loader - Load HTML templates as string.
• postcss-html-loader - Load PostCSS into the <style> scoped tag of Polymer elements.

Usage

Clone this repository:

$ git clone https://github.com/PolymerX/polymer-skeleton [your-app-name]

Remove the .git folder and change details within:

• package.json
• src/manifest.json

Then start building your application!

$ yarn

Developing

Start the webpack-dev-server on localhost http://localhost:3000 with hot-reload and watch on .postcss files.

$ yarn dev

Test

CURRENTLY only XO for code style

$ yarn test

Build (Webpack and copy statics) to dist folder

$ yarn build

Styling components with PostCSS and CSSNext

During development .postcss files will be watched, compiled and injected to the relative style-module.html file within the component directory. The CSS is scoped to the component so don't worry about CSS specificity, you can also use :host, :host-context and :root selectors. Read more about styling web components and custom CSS properties.

Cssnext also include Autoprefixer plugin, if you don't know how it work (...and you should), it allow you to write CSS without worry about vendor prefixes. Just write your css properties prefix-free and let autoprefixer do the work for you when compiling.

How about commons styles? You can make a shared style-module and import it when you need commons styles inside your component. More info about this technique here

How Polymer 3 is imported

We are currently used a modified version of the @polymer/polymer official NPM version. The flat property within the package.json is causing some problem with the load dependency system of webpack.

`@webcomponents/webcomponentsjs

We are getting the webpcomponents-loader.js polyfill from GitHub using NPM/Yarn and copy it into a vendor folder with a Node script.

Todo

• Setup unit (wct) and integration (Nightwatch/Testcafe/Puppeteer) tests
• Add PolymerRedux
• Add fetch polyfill ?
• Setup service-workers