js: support shared styles via webpack inline

Gruntfile.js

@@ -17,5 +17,5 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-webpack');
-  grunt.registerTask('default', ['less:production', 'less:components',  'concat:polymercss', 'copy', 'webpack', 'concat:dist']);
+  grunt.registerTask('default', ['less:production', 'less:components', 'copy', 'webpack', 'concat:dist']);
 };

grunt_config.json

@@ -1,8 +1,8 @@
 {
   "dirs": {
     "css": {
-      "src":"rhodecode/public/css",
-      "dest":"rhodecode/public/css"
+      "src": "rhodecode/public/css",
+      "dest": "rhodecode/public/css"
     },
     "js": {
       "src": "rhodecode/public/js/src",
@@ -13,22 +13,21 @@
   },
   "copy": {
     "main": {
-      "expand": true,
-      "cwd": "node_modules/@webcomponents",
-      "src": "webcomponentsjs/*.*",
-      "dest": "<%= dirs.js.dest %>/vendors"
+      "files": [
+        {
+          "expand": true,
+          "cwd": "node_modules/@webcomponents",
+          "src": "webcomponentsjs/*.*",
+          "dest": "<%= dirs.js.dest %>/vendors"
+        },
+        {
+          "src": "<%= dirs.css.src %>/style-polymer.css",
+          "dest": "<%= dirs.js.dest %>/src/components/style-polymer.css"
+        }
+      ]
     }
   },
   "concat": {
-    "polymercss": {
-      "src": [
-        "<%= dirs.js.src %>/components/root-styles-prefix.html",
-        "<%= dirs.css.src %>/style-polymer.css",
-        "<%= dirs.js.src %>/components/root-styles-suffix.html"
-      ],
-      "dest": "<%= dirs.js.dest %>/src/components/root-styles.gen.html",
-      "nonull": true
-    },
     "dist": {
       "src": [
         "<%= dirs.js.node_modules %>/jquery/dist/jquery.min.js",

rhodecode/public/js/src/components/index.js

@@ -1,5 +1,5 @@
 import '@polymer/iron-ajax/iron-ajax.js';
-import './root-styles.gen.html';
+import './shared-styles.js';
 import './channelstream-connection/channelstream-connection.js';
 import './rhodecode-toast/rhodecode-toast.js';
 import './rhodecode-toggle/rhodecode-toggle.js';

rhodecode/public/js/src/components/root-styles-prefix.html

@@ -1,3 +0,0 @@
-<dom-module id="shared-styles">
-    <template>
-        <style>

rhodecode/public/js/src/components/root-styles-suffix.html

@@ -1,3 +0,0 @@
-        </style>
-    </template>
-</dom-module>

rhodecode/public/js/src/components/shared-styles.js

@@ -0,0 +1,11 @@
+const styleElement = document.createElement('dom-module');
+import sharedCSS from 'raw-loader!./style-polymer.css';
+
+styleElement.innerHTML =
+    `<template>
+   <style>
+   ${sharedCSS}
+</style>
+ </template>`;
+
+styleElement.register('shared-styles');