Budled css. Alertify css fix

Author: JLiscom

.gitignore

@@ -1,5 +1,6 @@
 /bower_components
 /node_modules
 /dist
-openNote.bundle.js
+openNote.bundle.*
 openNote.appcache
+webpack_files

Gruntfile.js

@@ -108,13 +108,9 @@ module.exports = function(grunt) {
                     master: ["index.html"]
                 },
                 src: [
-                    "openNote.bundle.js",
-                    "node_modules/bootstrap/dist/**/*.*",
-                    "node_modules/codemirror/**/*.css",
-                    "node_modules/alertify/**/*.css",
-                    "openNote/**/*.*",
-                    "!**/*.js", // JS Files handled webpack
-                    "!**/*.less"
+                    "openNote.bundle.*",
+                    "webpack_files/**/*.*",
+                    "openNote/**/*.html",
                 ],
                 dest: "openNote.appcache"
             }

build/webpack.common.config.js

@@ -1,7 +1,8 @@
 const glob = require("glob");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
 
 module.exports = {
-    entry: glob.sync("./openNote/**/*.js"),//Emulate loading all them sequentually via script tags as one did in 2015
+    entry: glob.sync("./openNote/**/*.js"), //Emulate loading all them sequentually via script tags as one did in 2015
     output: {
         filename: "./openNote.bundle.js"
     },
@@ -12,11 +13,24 @@ module.exports = {
     },
     devtool: "#eval-source-map",
     module: {
-        rules: [
+        rules: [{
+                test: /\.css$/,
+                use: ExtractTextPlugin.extract({
+                    fallback: "style-loader",//css-loader and style-loader used
+                    use: "css-loader"
+                })
+            },
             {
-                test: /\.exec\.js$/,//So we dont have to use concat too
+                test: /\.exec\.js$/, //So we dont have to use concat too
                 use: ["script-loader"]
+            },
+            {
+                test: /\.(png|woff|woff2|eot|ttf|svg)$/,//Need url-loader and file-loader for this
+                loader: "url-loader?limit=100000&name=./webpack_files/[hash].[ext]"
             }
         ]
     },
+    plugins: [
+        new ExtractTextPlugin("openNote.bundle.css"),
+    ]
 };

build/webpack.prod.config.js

@@ -3,7 +3,7 @@ const Uglify = require("uglifyjs-webpack-plugin");
 let baseConfig = require("./webpack.common.config.js");
 
 baseConfig.devtool = "#source-map";//Helps with size
-baseConfig.plugins = (module.exports.plugins || []).concat([
+baseConfig.plugins = (baseConfig.plugins || []).concat([
     new webpack.DefinePlugin({
         "process.env": {
             NODE_ENV: "\"production\""

index.html

@@ -12,16 +12,7 @@
 		<title>OpenNote</title>
 
 		<!-- Style -->
-			<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
-			<link rel="stylesheet" href="node_modules/alertify/themes/alertify.core.css">
-			<link rel="stylesheet" href="node_modules/codemirror/lib/codemirror.css">
-			<link rel="stylesheet" href="node_modules/codemirror/theme/material.css">
-
-			<!-- Theme -->
-				<link rel="stylesheet" type="text/css" href="openNote/style/invert/light/alertify.css">
-				<link rel="stylesheet" type="text/css" href="openNote/style/invert/light/style.css">
-
-			<link rel="stylesheet" type="text/css" href="openNote/style/animations.css">
+			<link rel="stylesheet" type="text/css" href="openNote.bundle.css">
 
 		<!-- Scripts -->
 			<script src="openNote.bundle.js"></script>

openNote/openNote.js

@@ -9,8 +9,15 @@ import "script-loader!../node_modules/angular-route/angular-route.min.js";
 import "script-loader!../node_modules/angular-sanitize/angular-sanitize.min.js";
 import "script-loader!../node_modules/alertify/lib/alertify.min.js";
 
-
 //Style
+import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
+import "../node_modules/alertify/themes/alertify.core.css";
+import "../node_modules/codemirror/lib/codemirror.css";
+import "../node_modules/codemirror/theme/material.css";
+import "../openNote/style/invert/light/alertify.css";
+import "../openNote/style/invert/light/style.css";
+import "../openNote/style/animations.css";
+
 
 /**
  * @author - Jake Liscom

openNote/style/invert/alertify.less

@@ -2,10 +2,10 @@
  * Twitter Bootstrap Look and Feel
  * Based on http://twitter.github.com/bootstrap/
  */
- 
+
  /** offset all the other colors */
 	@offset: #000000;
- 
+
 .alertify,
 .alertify-log {
 	font-family: inherit;
@@ -33,7 +33,7 @@
 		}
 			.alertify-text {
 				color: negation(#CCC, @offset);
-				
+
 				padding: 8px;
 				border: 1px solid negation(#CCC, @offset);
 			}
@@ -61,27 +61,26 @@
 			.alertify-button:active {
 				position: relative;
 			}
-				.alertify-button-cancel,
-				.alertify-button-cancel:hover,
-				.alertify-button-cancel:focus,
-				.alertify-button-cancel:active {
-					color: negation(#CCC, @offset);
-				}
-				.alertify-button-cancel:hover,
-				.alertify-button-cancel:focus,
-				.alertify-button-cancel:active {
-					color: negation(#000, @offset);
-					background: negation(#fff, @offset);
-				}
+
 				.alertify-button-ok,
 				.alertify-button-ok:hover,
 				.alertify-button-ok:focus,
-				.alertify-button-ok:active {
+				.alertify-button-ok:active,
+                .alertify-button-cancel,
+				.alertify-button-cancel:hover,
+				.alertify-button-cancel:focus,
+				.alertify-button-cancel:active {
+                    border: none;
 					color: negation(#CCC, @offset);
+                    background: negation(#000, @offset);
 				}
 				.alertify-button-ok:hover,
 				.alertify-button-ok:focus,
-				.alertify-button-ok:active {
+				.alertify-button-ok:active,
+                .alertify-button-cancel:hover,
+				.alertify-button-cancel:focus,
+				.alertify-button-cancel:active {
+                    border: none;
 					color: negation(#000, @offset);
 					background: negation(#fff, @offset);
 				}
@@ -99,7 +98,7 @@
 	.alertify-log-success {
 		color: negation(#CCC, @offset);
 	}
-	
+
 .alertify-cover {
 	transition: opacity 1s ease-out, width 0s;
 	background-color: negation(#555, @offset);
@@ -111,7 +110,7 @@
 	right:0;
 }
 
-.alertify-cover.alertify-cover-hidden{/*For animation*/	
+.alertify-cover.alertify-cover-hidden{/*For animation*/
 	display: block;
 	opacity: 0;
 	width:0;

package.json

@@ -20,6 +20,9 @@
   },
   "devDependencies": {
     "angular-mocks": "^1.6.6",
+    "css-loader": "^0.28.7",
+    "extract-text-webpack-plugin": "^3.0.2",
+    "file-loader": "^1.1.5",
     "grunt": "^0.4.5",
     "grunt-cli": "^0.1.13",
     "grunt-contrib-compress": "^1.1.1",
@@ -30,6 +33,8 @@
     "grunt-manifest": "^0.4.0",
     "grunt-shell": "^0.7.0",
     "script-loader": "^0.7.2",
+    "style-loader": "^0.19.0",
+    "url-loader": "^0.6.2",
     "webpack": "^3.8.1",
     "webpack-dev-server": "^2.9.5"
   },