simplify component with one css and one js

dist/lesspass-vendors.js

@@ -1,2 +0,0 @@
-!function(t){function r(n){if(e[n])return e[n].exports;var o=e[n]={exports:{},id:n,loaded:!1};return t[n].call(o.exports,o,o.exports,r),o.loaded=!0,o.exports}var e={};return r.m=t,r.c=e,r.p="/dist/",r(0)}({0:function(t,r,e){"use strict";e(17)},17:function(t,r){}});
-//# sourceMappingURL=lesspass-vendors.js.map?dc118acc136d2b85341d

dist/lesspass-vendors.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///lesspass-vendors.js","webpack:///webpack/bootstrap dc118acc136d2b85341d?bda3","webpack:///./src/vendors.js"],"names":["modules","__webpack_require__","moduleId","installedModules","exports","module","id","loaded","call","m","c","p","0","17"],"mappings":"CAAS,SAAUA,GCInB,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAE,OAGA,IAAAC,GAAAF,EAAAD,IACAE,WACAE,GAAAJ,EACAK,QAAA,EAUA,OANAP,GAAAE,GAAAM,KAAAH,EAAAD,QAAAC,IAAAD,QAAAH,GAGAI,EAAAE,QAAA,EAGAF,EAAAD,QAvBA,GAAAD,KAqCA,OATAF,GAAAQ,EAAAT,EAGAC,EAAAS,EAAAP,EAGAF,EAAAU,EAAA,SAGAV,EAAA,KDMMW,EACA,SAASP,EAAQD,EAASH,GAE/B,YE/CDA,GAAA,KFqDMY,GACA,SAASR,EAAQD","file":"lesspass-vendors.js?dc118acc136d2b85341d","sourcesContent":["/******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId])\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\texports: {},\n/******/ \t\t\tid: moduleId,\n/******/ \t\t\tloaded: false\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.loaded = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"/dist/\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(0);\n/******/ })\n/************************************************************************/\n/******/ ({\n\n/***/ 0:\n/***/ function(module, exports, __webpack_require__) {\n\n\t\"use strict\";\n\t\n\t__webpack_require__(17);\n\n/***/ },\n\n/***/ 17:\n/***/ function(module, exports) {\n\n\t// removed by extract-text-webpack-plugin\n\n/***/ }\n\n/******/ });\n\n\n/** WEBPACK FOOTER **\n ** lesspass-vendors.js?dc118acc136d2b85341d\n **/"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId])\n \t\t\treturn installedModules[moduleId].exports;\n\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\texports: {},\n \t\t\tid: moduleId,\n \t\t\tloaded: false\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.loaded = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/dist/\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(0);\n\n\n\n/** WEBPACK FOOTER **\n ** webpack/bootstrap dc118acc136d2b85341d\n **/","import \"./vendors.scss\";\n\n\n/** WEBPACK FOOTER **\n ** ./src/vendors.js\n **/"],"sourceRoot":""}

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <title>lesspass</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="dist/lesspass.css">
+    <link rel="stylesheet" href="dist/lesspass.uncss.css">
     <style>
         body {
             background-color: #008ed6;
@@ -18,7 +18,7 @@
             <div id="passwordGenerator">
                 <div class="card">
                     <div class="card-header">
-                        <img src="src/logo.png" id="logo" alt="logo">
+                        <img src="dist/logo.png" id="logo" alt="logo">
                     </div>
                     <div id="password-block" class="card-block">
                         <form id="generatedPasswordForm">
@@ -181,8 +181,6 @@
         </div>
     </div>
 </div>
-
-<script src="dist/lesspass-vendors.js"></script>
-<script src="dist/lesspass-pure.js"></script>
+<script src="dist/lesspass.js"></script>
 </body>
 </html>

package.json

@@ -7,8 +7,8 @@
   "scripts": {
     "start": "NODE_ENV=production node server.js",
     "dev": "webpack-dev-server",
-    "uncss": "uncss --stylesheets dist/lesspass-pure.css,dist/lesspass-vendors.css index.html > dist/lesspass.css",
-    "build": "rm -rf dist && NODE_ENV=production webpack && npm run uncss && rm dist/*-*.css*",
+    "uncss": "uncss --stylesheets dist/lesspass.css index.html > dist/lesspass.uncss.css",
+    "build": "rm -rf dist && NODE_ENV=production webpack && npm run uncss && rm dist/lesspass.css*",
     "prepublish": "npm run build"
   },
   "repository": {

src/app.js → src/lesspass.js

@@ -1,4 +1,4 @@
-import './app.scss'
+import './lesspass.scss'
 import lesspass from 'lesspass';
 import Clipboard from 'clipboard';
 

src/app.scss → src/lesspass.scss

@@ -1,3 +1,6 @@
+@import "~bootstrap/dist/css/bootstrap.css";
+@import "~hint.css/hint.css";
+
 * {
   border-radius: 0 !important;
 }

src/vendors.js

@@ -1 +0,0 @@
-import "./vendors.scss";

src/vendors.scss

@@ -1,2 +0,0 @@
-@import "~bootstrap/dist/css/bootstrap.css";
-@import "~hint.css/hint.css";

webpack.config.js

@@ -4,13 +4,12 @@ var ExtractTextPlugin = require("extract-text-webpack-plugin");
 
 module.exports = {
   entry: {
-    pure: "./src/app",
-    vendors: "./src/vendors"
+    lesspass: "./src/lesspass"
   },
   output: {
     path: 'dist',
     publicPath: '/dist/',
-    filename: 'lesspass-[name].js?[hash]'
+    filename: '[name].js'
   },
   module: {
     loaders: [
@@ -29,7 +28,7 @@ module.exports = {
     ]
   },
   plugins: [
-    new ExtractTextPlugin("lesspass-[name].css")
+    new ExtractTextPlugin("[name].css")
   ],
   devtool: '#eval-source-map'
 };