polymer-css-loader v0.0.1

polymer-css-loader

A loader for webpack that lets you "just import" the CSS into your JavaScript and automatically create the Styling JavaScript for you. This is intended for Polymer 3.

Install:

npm install save-dev polymer-css-loader extract-loader

Or

yarn add polymer-css-loader extract-loader -D

Requirements

• Polymer 3+ only!
• Webpack 4 (Tested, could work with earlier versions)

How this works:

1. Include it in your Webpack Config. Include it "last" or after all the loaders. You will need to use extract-loader if you're using sass-loader, less-loader and/or css-loader.

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
     {
        test: /\.css|\.s(c|a)ss$/,
        use: [{
          loader: 'polymer-css-loader',
          options: {
            minify: true, // defaults to false
          },
        }, 'extract-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
};

2. Include your .css or .scss or .less file in your JavaScript:

import { html, PolymerElement } from '@polymer/polymer/polymer-element';

import './style-1.scss';
// The ?name will specify the name to be used in the include.
import './style-2.css?name=maria';
class PolymerTestComponent extends PolymerElement {
  static get template() {
    return html`
      <style include="style-1 maria">    
      </style>
      <p>This is the test component</p>
      <p>This is the propertie's value: {{prop1}} </p>
      <div>This font size should be bigger</div>
    `;
  }

  static get properties() {
    return {
      prop1: {
        type: String,
        value: 'polymer3-app',
      },
    };
  }
}

window.customElements.define('polymer-test-component', PolymerTestComponent);

3. Use the base name of the file as the name for <style include="">. Example, if you imported a filename called my-polymer-3.scss, you'd do it like this:

static get template() {
  <style include="my-polymer-3">
  </style>
}

Options

Files Parameters

These are appended at the end of the CSS imports in your JavaScript file (Where the component is declared); E.g:

import './style-2.css?name=maria';
import './style-1.css?skip';

Need an example?

Navigate to test-app, and execute: npm start. It will launch an express server @ localhost:3000. Then, run webpack. (Remember to have installed webpack-cli)

Why this loader

Writing CSS inside a JavaScript template is cumbersome and we lose autocomplete, and static analysis from our Text Editors and IDEs. Why not have an automatic way that creates these JavaScript templates for us?

With this, you just include your .css in your Polymer component, add the name of the file to the style's include and you're set! The loader takes care for creating the file for you!

Ideas? Feedback?

Open a Github issue now! 😊