Included a static patternfly palette instead of requiring weird webpack loader's tricks to read id from patternfly. Fixes some import issues of the esm build.

Author: mtorromeo

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Change Log
 All notable changes to this project will be documented in this file.
 
+### [0.1.7] - 2020-07-15
+- Included a static patternfly palette instead of requiring weird webpack loader's tricks to read id from patternfly. Fixes some import issues of the esm build.
+- Updated dependencies.
+
 ### [0.1.6] - 2020-06-11
 ### Added
 - `pf-card`s can now override the content of the header and footer using the new slots named `header` and `footer`.

package.json

@@ -42,7 +42,7 @@
     "c3": "^0.6.8",
     "es6-promise": "^4.2.5",
     "patternfly": "^3.59.1",
-    "uiv": "^0.35.1",
+    "uiv": "^0.36.0",
     "vue": "^2.6.6"
   },
   "devDependencies": {
@@ -56,7 +56,7 @@
     "@babel/preset-env": "^7.1.0",
     "@babel/runtime": "^7.1.2",
     "@rollup/plugin-babel": "^5.0.3",
-    "@rollup/plugin-commonjs": "^13.0.0",
+    "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-json": "^4.0.0",
     "@rollup/plugin-node-resolve": "^8.0.1",
     "autoprefixer": "^9.3.1",
@@ -69,9 +69,7 @@
     "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-vue": "^6.0.1",
-    "exports-loader": "^1.0.0",
     "html-loader": "^1.1.0",
-    "imports-loader": "^0.8.0",
     "lodash-es": "^4.17.11",
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.11.0",
@@ -83,7 +81,7 @@
     "rollup": "^2.15.0",
     "rollup-plugin-css-only": "^2.1.0",
     "rollup-plugin-vue": "^5.0.0",
-    "sass-loader": "^8.0.0",
+    "sass-loader": "^9.0.2",
     "style-loader": "^1.0.0",
     "vue-functional-data-merge": "^3.1.0",
     "vue-loader": "^15.6.2",

src/components/C3Chart.vue

@@ -11,36 +11,121 @@
 
 <script>
 import c3 from 'c3';
-import pfPaletteColors from 'patternfly/dist/js/patternfly-settings-colors.js';
+
+// FROM node_modules/patternfly/dist/js/patternfly-settings-colors.js
+const patternfly = {
+  pfPaletteColors: {
+    black: '#030303',
+    black100: '#fafafa',
+    black200: '#ededed',
+    black300: '#d1d1d1',
+    black400: '#bbbbbb',
+    black500: '#8b8d8f',
+    black600: '#72767b',
+    black700: '#4d5258',
+    black800: '#393f44',
+    black900: '#292e34',
+    blue: '#0088ce',
+    blue100: '#bee1f4',
+    blue200: '#7dc3e8',
+    blue300: '#39a5dc',
+    blue400: '#0088ce',
+    blue500: '#00659c',
+    blue600: '#004368',
+    blue700: '#002235',
+    gold: '#f0ab00',
+    gold100: '#fbeabc',
+    gold200: '#f9d67a',
+    gold300: '#f5c12e',
+    gold400: '#f0ab00',
+    gold500: '#b58100',
+    gold600: '#795600',
+    gold700: '#3d2c00',
+    orange: '#ec7a08',
+    orange100: '#fbdebf',
+    orange200: '#f7bd7f',
+    orange300: '#f39d3c',
+    orange400: '#ec7a08',
+    orange500: '#b35c00',
+    orange600: '#773d00',
+    orange700: '#3b1f00',
+    lightBlue: '#00b9e4',
+    lightBlue100: '#beedf9',
+    lightBlue200: '#7cdbf3',
+    lightBlue300: '#35caed',
+    lightBlue400: '#00b9e4',
+    lightBlue500: '#008bad',
+    lightBlue600: '#005c73',
+    lightBlue700: '#002d39',
+    green: '#3f9c35',
+    green100: '#cfe7cd',
+    green200: '#9ecf99',
+    green300: '#6ec664',
+    green400: '#3f9c35',
+    green500: '#2d7623',
+    green600: '#1e4f18',
+    green700: '#0f280d',
+    lightGreen: '#92d400',
+    lightGreen100: '#e4f5bc',
+    lightGreen200: '#c8eb79',
+    lightGreen300: '#ace12e',
+    lightGreen400: '#92d400',
+    lightGreen500: '#6ca100',
+    lightGreen600: '#486b00',
+    lightGreen700: '#253600',
+    cyan: '#007a87',
+    cyan100: '#bedee1',
+    cyan200: '#7dbdc3',
+    cyan300: '#3a9ca6',
+    cyan400: '#007a87',
+    cyan500: '#005c66',
+    cyan600: '#003d44',
+    cyan700: '#001f22',
+    purple: '#703fec',
+    purple100: '#c7bfff',
+    purple200: '#a18fff',
+    purple300: '#8461f7',
+    purple400: '#703fec',
+    purple500: '#582fc0',
+    purple600: '#40199a',
+    purple700: '#1f0066',
+    red: '#cc0000',
+    red100: '#cc0000',
+    red200: '#a30000',
+    red300: '#8b0000',
+    red400: '#470000',
+    red500: '#2c0000',
+  },
+};
 
 const palette = [
-  pfPaletteColors.red,
-  pfPaletteColors.blue,
-  pfPaletteColors.green,
-  pfPaletteColors.gold,
-  pfPaletteColors.cyan,
-  pfPaletteColors.orange,
-  pfPaletteColors.lightGreen,
-  pfPaletteColors.purple,
-  pfPaletteColors.lightBlue,
-  pfPaletteColors.red700,
-  pfPaletteColors.blue700,
-  pfPaletteColors.green700,
-  pfPaletteColors.gold700,
-  pfPaletteColors.cyan700,
-  pfPaletteColors.orange700,
-  pfPaletteColors.lightGree7500,
-  pfPaletteColors.purple700,
-  pfPaletteColors.lightBlue700,
-  pfPaletteColors.red400,
-  pfPaletteColors.blue400,
-  pfPaletteColors.green400,
-  pfPaletteColors.gold400,
-  pfPaletteColors.cyan400,
-  pfPaletteColors.orange400,
-  pfPaletteColors.lightGree4500,
-  pfPaletteColors.purple400,
-  pfPaletteColors.lightBlue400,
+  patternfly.pfPaletteColors.red,
+  patternfly.pfPaletteColors.blue,
+  patternfly.pfPaletteColors.green,
+  patternfly.pfPaletteColors.gold,
+  patternfly.pfPaletteColors.cyan,
+  patternfly.pfPaletteColors.orange,
+  patternfly.pfPaletteColors.lightGreen,
+  patternfly.pfPaletteColors.purple,
+  patternfly.pfPaletteColors.lightBlue,
+  patternfly.pfPaletteColors.red700,
+  patternfly.pfPaletteColors.blue700,
+  patternfly.pfPaletteColors.green700,
+  patternfly.pfPaletteColors.gold700,
+  patternfly.pfPaletteColors.cyan700,
+  patternfly.pfPaletteColors.orange700,
+  patternfly.pfPaletteColors.lightGree7500,
+  patternfly.pfPaletteColors.purple700,
+  patternfly.pfPaletteColors.lightBlue700,
+  patternfly.pfPaletteColors.red400,
+  patternfly.pfPaletteColors.blue400,
+  patternfly.pfPaletteColors.green400,
+  patternfly.pfPaletteColors.gold400,
+  patternfly.pfPaletteColors.cyan400,
+  patternfly.pfPaletteColors.orange400,
+  patternfly.pfPaletteColors.lightGree4500,
+  patternfly.pfPaletteColors.purple400,
+  patternfly.pfPaletteColors.lightBlue400,
 ];
 
 export default {

webpack.config.js

@@ -36,12 +36,6 @@ module.exports = env => {
         options: {
           formatter: require('eslint-friendly-formatter'),
         },
-      }, {
-        test: /\/patternfly-settings-colors\.js/,
-        use: [
-          'imports-loader?patternfly=>{},window=>{patternfly}',
-          'exports-loader?exports=default patternfly.pfPaletteColors',
-        ],
       }, {
         test: /\.jsx?$/,
         loader: 'babel-loader',