Template for PolymerX CLI

Using LitElement instead of PolymerElement + lit-apollo

Install using the CLI

$ polymerx create lit-apollo dest-folder

A mininum boilerplate to deliver a Polymer 3.x with Webpack, PostCSS and Service Workers ready.

Features

• Webpack 4
• webpack-dev-server with hot reloading active.
• PostCSS with many plugins.
• Service Workers generated by Workbox through the workbox-webpack-plugin (just for build)
• Copy statics file on dist folder (like vendor/webcomponents-loader.js and others)
• standard-version is bundled for managing versioning and changelogs.

Loaders

• babel-loader with the babel-preset-env enabled for the last 2 versions and babel-plugin-transform-object-rest-spread installed.
• text-loader - Load HTML templates as string.
• postcss-loader - Load PostCSS into the <style> scoped tag of Polymer elements as string.

Developing

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

yarn dev

Test

XO for code style, Stylelint for PostCSS linting, and WCT for components tests:

yarn test

Run Lighthouse for testing the PWA capabilities:

yarn test:lighthouse

Build

(Almost) production-ready (webpack --optimize-minimze and copy statics) to dist folder. Also generating Service Workers.

yarn build

Styling components with PostCSS

During development .pcss files will be watched, compiled and injected to the relative <style> tag within the component template. 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.

We also include Autoprefixer plugin, if you don't know how it works (...and you should), it allows you to write CSS without worrying 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 simply import any other .pcss file within your main component .js file and print it inside the template().

@webcomponents/webcomponentsjs

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