Remove CDNJS.CLOUDFLARE for bulma.css

packages/auth/package.json

@@ -16,14 +16,19 @@
     "rollup-plugin-commonjs": "^10.0.2",
     "rollup-plugin-consts": "^1.0.1",
     "rollup-plugin-copy": "^3.1.0",
+    "rollup-plugin-delete": "^1.1.0",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-multi-entry": "^2.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-postcss": "^2.0.3",
+    "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-serve": "^1.0.1",
     "rollup-plugin-terser": "^5.1.1",
+    "rollup-plugin-url": "^2.2.2",
     "vpu-common": "file:./vendor/common"
   },
   "dependencies": {
+    "bulma": "^0.7.5",
     "lit-element": "^2.1.0"
   },
   "scripts": {

packages/auth/rollup.config.js

@@ -6,7 +6,9 @@ import {terser} from "rollup-plugin-terser";
 import json from 'rollup-plugin-json';
 import serve from 'rollup-plugin-serve';
 import multiEntry from 'rollup-plugin-multi-entry';
+import url from "rollup-plugin-url";
 import consts from 'rollup-plugin-consts';
+import del from 'rollup-plugin-delete';
 
 const build = (typeof process.env.BUILD !== 'undefined') ? process.env.BUILD : 'local';
 console.log("build: " + build);
@@ -18,6 +20,9 @@ export default {
         format: 'esm'
     },
     plugins: [
+        del({
+            targets: 'dist/*'
+        }),
         multiEntry(),
         consts({
             environment: build,
@@ -32,6 +37,15 @@ export default {
             include: 'node_modules/**'
         }),
         json(),
+        url({
+            limit: 0,
+            include: [
+                "node_modules/bulma/**/*.css",
+                "node_modules/bulma/**/*.sass",
+            ],
+            emitFiles: true,
+            fileName: 'shared/[name].[hash][extname]'
+        }),
         (build !== 'local' && build !== 'test') ? terser() : false,
         copy({
             targets: [

packages/auth/src/utils.js

+export const getAssetURL = (path) => {
+    const elm = document.getElementById('vpu-library-app-src');
+    if (!elm)
+        return path;
+    const url = elm.src;
+    // newer browsers only
+    //var url = import.meta.url;
+    return new URL(path, url).href;
+};

packages/auth/src/vpu-auth-demo.js

@@ -2,6 +2,8 @@ import {i18n} from './i18n.js';
 import {html, LitElement} from 'lit-element';
 import './vpu-auth';
 import * as commonUtils from 'vpu-common/utils';
+import bulmaCSSPath from "bulma/css/bulma.min.css";
+import * as utils from "./utils";
 
 class AuthDemo extends LitElement {
     constructor() {
@@ -26,10 +28,9 @@ class AuthDemo extends LitElement {
     }
 
     render() {
+        const bulmaCSS = utils.getAssetURL(bulmaCSSPath);
         return html`
-            <style>
-            </style>
-            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
+            <link rel="stylesheet" href="${bulmaCSS}">
 
             <section class="section">
                 <div class="container">

packages/auth/src/vpu-auth.js

@@ -3,6 +3,8 @@ import {html, css, LitElement} from 'lit-element';
 import JSONLD from 'vpu-common/jsonld'
 import * as commonUtils from 'vpu-common/utils';
 import 'vpu-common/vpu-icon.js';
+import bulmaCSSPath from "bulma/css/bulma.min.css";
+import * as utils from "./utils";
 
 /**
  * Keycloak auth web component
@@ -282,8 +284,9 @@ class VPUAuth extends LitElement {
     }
 
     render() {
+        const bulmaCSS = utils.getAssetURL(bulmaCSSPath);
         return html`
-            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
+            <link rel="stylesheet" href="${bulmaCSS}">
 
             <div>
             ${this.loggedIn ? this.renderLoggedIn() : this.renderLoggedOut()}