feat(theme): Intent to ship css theme

- Implement 'theme': build tasks & add new theme 'insight'
- Merged separated scss files to one file
- Rename getCaches() to getCache()

Fix #241
Close #507

config/webpack.config.packaged.js

@@ -17,7 +17,7 @@ const config = {
 				test: /(core\.js)$/,
 				loader: StringReplacePlugin.replace({
 					replacements: [{
-						pattern: /import \"\.\/scss\/main.scss\";/ig,
+						pattern: /import \"\.\/scss\/\w+\.scss\";/ig,
 						replacement: () => ""
 					}]
 				})

config/webpack.config.production.js

@@ -11,12 +11,12 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const config = {
 	entry: {
 		"billboard": "./src/core.js",
-		"billboard.min": "./src/core.js",
+		"billboard.min": "./src/core.js"
 	},
 	module: {
 		rules: [
 			{
-				test: /(\.js)$/,
+				test: /\.js$/,
 				loader: "eslint-loader",
 				include: path.resolve(process.cwd(), "src"),
 				exclude: /(node_modules)/,

config/webpack.config.theme.js

@@ -0,0 +1,80 @@
+const merge = require("webpack-merge");
+const webpack = require("webpack");
+const fs = require("fs");
+const path = require("path");
+const CleanWebpackPlugin = require("clean-webpack-plugin");
+const WebpackCleanPlugin = require("webpack-clean");
+const banner = require("./banner");
+const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const srcPath = "./src/scss/theme/";
+const distPath = path.resolve(__dirname, "../dist/theme/");
+const tmpExt = "tmp";
+const rx = /\.scss$/;
+
+// construct entry point
+const entry = {};
+
+fs.readdirSync(path.resolve(__dirname, `.${srcPath}`)).forEach(file => {
+	if (rx.test(file)) {
+		const key = file.replace(rx, "");
+		const dist = srcPath + file;
+
+		entry[key] = dist;
+		entry[`${key}.min`] = dist;
+	}
+});
+
+const config = {
+	entry: entry,
+	output: {
+		path: distPath,
+		filename: `[name].${tmpExt}`
+	},
+	module: {
+		rules: [
+			{
+				test: rx,
+				use: [
+					MiniCssExtractPlugin.loader,
+					"css-loader",
+					"sass-loader"
+				]
+			}
+		],
+	},
+	devtool: false,
+	plugins: [
+		new CleanWebpackPlugin([distPath], {
+			root: path.resolve(__dirname, "../"),
+			verbose: true,
+			dry: false,
+			beforeEmit: true
+		}),
+		new WebpackCleanPlugin(Object.keys(entry).map(v => `${v}.${tmpExt}`), {
+			basePath: distPath
+		}),
+		new MiniCssExtractPlugin({
+			filename: "[name].css"
+		}),
+		new OptimizeCssAssetsPlugin({
+			assetNameRegExp: /\.min\.css$/,
+			cssProcessorOptions: {
+				discardComments: {
+					removeAll: true
+				}
+			},
+		}),
+		new webpack.BannerPlugin({
+			banner: banner.production,
+			entryOnly: true
+		})
+	]
+};
+
+module.exports = common => merge.smartStrategy({
+	entry: "replace",
+	output: "replace",
+	module: "replace"
+})(common, config);

demo/index.html

@@ -33,17 +33,42 @@
         !function() {
 	        var localPath = "../dist/";
 	        var remotePath = "../../gh-pages/release/latest/dist/";
+	        var cssFileName = localStorage.cssThemeName;
+
+	        if (cssFileName) {
+		        cssFileName = "theme/" + cssFileName;
+            } else {
+		        cssFileName = "billboard";
+	        }
 
 	        fallback.load({
 		        billboard_js: [
 			        localPath + "billboard.js",
 			        remotePath + "billboard.js"
 		        ],
 		        billboard_css: [
-			        localPath + "billboard.css",
-			        remotePath + "billboard.css"
+			        localPath + cssFileName + ".css",
+			        remotePath + cssFileName + ".css"
 		        ]
 	        });
+
+	        $(function() {
+		        var $select = $("#theme select");
+
+		        $select.on("change", function() {
+			        var value = this[this.options.selectedIndex].value;
+
+			        if (value !== localStorage.cssThemeName) {
+				        localStorage.cssThemeName = value;
+				        location.reload();
+			        }
+		        });
+
+		        $select.children().toArray()
+			        .forEach(function(v) {
+				        v.selected = cssFileName.indexOf(v.value) > -1;
+			        });
+	        });
         }();
     </script>
 
@@ -64,6 +89,12 @@ <h2 class="sidebar-brand">billboard.js</h2>
             <a href="https://naver.github.io/billboard.js/release/latest/doc/" target="_new">API Docs</a> |
             <a href="https://github.com/naver/billboard.js" class="github" target="_new">GitHub</a>
         </p>
+        <form id="theme">
+            Theme: <select class="classic">
+                <option value="">default</option>
+                <option value="insight">insight</option>
+            </select>
+        </form>
         <ul class="sidebar-nav"></ul>
     </div>
     <!-- /#sidebar-wrapper -->

demo/simple-sidebar.css

@@ -70,7 +70,7 @@ body {
     position: absolute;
     top: 0;
     width: 230px;
-    margin: 80px 0 30px 0;
+    margin: 110px 0 30px 0;
     padding: 0;
     list-style: none;
     font-family:Raleway,sans-serif;
@@ -192,6 +192,16 @@ div.row {
     }
 }
 
+#theme {
+    text-align: center;
+    color: #fff;
+}
+
+#theme select {
+    padding: 0 3px;
+    color: #000;
+}
+
 /* Style For Region */
 #StyleForRegion .bb-region-0 {fill:red;}
 #StyleForRegion .bb-region.foo {fill:green;}