diff --git a/client/cloudcmd.js b/client/cloudcmd.js
index db23f2ad..71728e21 100644
--- a/client/cloudcmd.js
+++ b/client/cloudcmd.js
@@ -1,5 +1,8 @@
'use strict';
+require('../css/main.css');
+require('../css/nojs.css');
+
// prevent additional loading of exec by spero, remedy, ishtar, salam, omnes
window.exec = require('execon');
diff --git a/client/modules/config.js b/client/modules/config.js
index e9742090..d4232312 100644
--- a/client/modules/config.js
+++ b/client/modules/config.js
@@ -2,6 +2,8 @@
/* global CloudCmd, DOM, io */
+require('../../css/config.css');
+
const rendy = require('rendy');
const exec = require('execon');
const currify = require('currify/legacy');
@@ -123,7 +125,7 @@ function show() {
const funcs = [
exec.with(Files.get, 'config-tmpl'),
exec.with(DOM.load.parallel, [
- prefix + '/css/config.css'
+ prefix + '/dist/config.css'
])
];
diff --git a/client/modules/view.js b/client/modules/view.js
index 1ab1b2e2..98054019 100644
--- a/client/modules/view.js
+++ b/client/modules/view.js
@@ -2,6 +2,8 @@
/* global CloudCmd, DOM, $ */
+require('../../css/view.css');
+
const itype = require('itype/legacy');
const rendy = require('rendy');
const exec = require('execon');
@@ -324,7 +326,7 @@ function loadAll(callback) {
DOM.loadRemote('fancybox', () => {
const {PREFIX} = CloudCmd;
- load.css(PREFIX + '/css/view.css', callback);
+ load.css(PREFIX + '/dist/view.css', callback);
load.style({
id : 'view-inlince-css',
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 00000000..952c7505
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,8 @@
+@import "./urls.css";
+@import "./reset.css";
+@import "./style.css";
+@import "./icons.css";
+@import "./help.css";
+@import "./query.css";
+@import "./supports.css";
+
diff --git a/html/index.html b/html/index.html
index b080e389..6385d2d7 100644
--- a/html/index.html
+++ b/html/index.html
@@ -9,10 +9,9 @@
{{ title }}
-
-
+
diff --git a/json/css.json b/json/css.json
deleted file mode 100644
index 1ff17fdf..00000000
--- a/json/css.json
+++ /dev/null
@@ -1,8 +0,0 @@
-[
- "reset",
- "style",
- "icons",
- "help",
- "query",
- "supports"
-]
diff --git a/package.json b/package.json
index 4d7cf0ba..e4507ed0 100644
--- a/package.json
+++ b/package.json
@@ -165,11 +165,15 @@
"babel-loader": "^7.0.0",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-preset-es2015": "^6.18.0",
+ "clean-css-loader": "^0.1.2",
"coveralls": "^2.11.6",
+ "css-loader": "^0.28.4",
"emitify": "^3.0.2",
"es6-promise": "^4.0.5",
"es6-promisify": "^5.0.0",
"eslint": "^4.0.0",
+ "extract-text-webpack-plugin": "^2.1.2",
+ "file-loader": "^0.11.2",
"gunzip-maybe": "^1.3.1",
"html-looks-like": "^1.0.2",
"jscs": "^3.0.1",
@@ -189,10 +193,12 @@
"sinon": "^2.1.0",
"sinon-called-with-diff": "^1.0.0",
"socket.io-client": "^2.0.1",
+ "style-loader": "^0.18.2",
"stylelint": "^7.0.2",
"stylelint-config-standard": "^16.0.0",
"tape": "^4.4.0",
"tar-stream": "^1.5.2",
+ "url-loader": "^0.5.9",
"webpack": "^3.0.0",
"wraptile": "^1.0.0",
"yaspeller": "^3.0.0"
diff --git a/server/cloudcmd.js b/server/cloudcmd.js
index 8faca557..2c9d6a74 100644
--- a/server/cloudcmd.js
+++ b/server/cloudcmd.js
@@ -14,6 +14,7 @@ const prefixer = require(DIR + 'prefixer');
const pluginer = require(DIR + 'plugins');
const terminal = require(DIR + 'terminal');
+const currify = require('currify');
const apart = require('apart');
const join = require('join-io');
const ponse = require('ponse');
@@ -31,6 +32,8 @@ const salam = require('salam/legacy');
const omnes = require('omnes/legacy');
const criton = require('criton');
+const setUrl = currify(_setUrl);
+
const root = () => config('root');
const notEmpty = (a) => a;
@@ -299,24 +302,22 @@ function logout(req, res, next) {
res.sendStatus(401);
}
-function setUrl(pref) {
- return (req, res, next) => {
- const prefix = getPrefix(pref);
- const is = !req.url.indexOf(prefix);
-
- if (!is)
- return next();
-
- req.url = req.url.replace(prefix, '') || '/';
-
- if (/^\/cloudcmd\.js(\.map)?$/.test(req.url))
- req.url = `/dist${req.url}`;
-
- if (isDev)
- req.url = req.url.replace(/^\/dist\//, '/dist-dev/');
-
- next();
- };
+function _setUrl(pref, req, res, next) {
+ const prefix = getPrefix(pref);
+ const is = !req.url.indexOf(prefix);
+
+ if (!is)
+ return next();
+
+ req.url = req.url.replace(prefix, '') || '/';
+
+ if (/^\/cloudcmd\.js(\.map)?$/.test(req.url))
+ req.url = `/dist${req.url}`;
+
+ if (isDev)
+ req.url = req.url.replace(/^\/dist\//, '/dist-dev/');
+
+ next();
}
function checkPlugins(plugins) {
diff --git a/server/route.js b/server/route.js
index ff244e28..40b7ba9c 100644
--- a/server/route.js
+++ b/server/route.js
@@ -38,11 +38,6 @@ const TMPL_PATH = [
const Template = {};
const FS = CloudFunc.FS;
-const CSS_URL = require(DIR_JSON + 'css.json')
- .map((name) => {
- return 'css/' + name + '.css';
- }).join(':');
-
module.exports = (req, res, next) => {
check(req, res, next);
@@ -114,7 +109,6 @@ function indexProcessing(options) {
fm: left + right,
prefix: prefix(),
config: JSON.stringify(config('*')),
- css: CSS_URL
});
return data;
@@ -220,7 +214,7 @@ function buildIndex(json, callback) {
fs.readFile(name || PATH_INDEX, 'utf8', (error, template) => {
if (error)
return;
-
+
const panel = CloudFunc.buildFromJSON({
data : json,
prefix : prefix(),
diff --git a/webpack.config.js b/webpack.config.js
index cbba8323..1cfb9f2f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,6 +17,13 @@ const distDev = path.resolve(__dirname, 'dist-dev');
const devtool = isDev ? 'eval' : 'source-map';
const notEmpty = (a) => a;
const clean = (array) => array.filter(notEmpty);
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+const extractMain = new ExtractTextPlugin('[name].css');
+const extractNojs = new ExtractTextPlugin('nojs.css');
+
+const extractView = new ExtractTextPlugin('view.css');
+const extractConfig = new ExtractTextPlugin('config.css');
const plugins = clean([
!isDev && new UglifyJsPlugin({
@@ -27,6 +34,10 @@ const plugins = clean([
name: 'cloudcmd',
filename: 'cloudcmd.js',
}),
+ extractMain,
+ extractNojs,
+ extractView,
+ extractConfig,
]);
const rules = clean([
@@ -34,7 +45,20 @@ const rules = clean([
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
- }
+ }, {
+ test: /\.css$/,
+ exclude: /css\/(nojs|view|config)\.css/,
+ use: extractMain.extract([
+ 'css-loader?minimize',
+ ]),
+ },
+ extract('nojs', extractNojs),
+ extract('view', extractView),
+ extract('config', extractConfig),
+ {
+ test: /\.(png|gif|svg|woff|woff2|eot|ttf)$/,
+ loader: 'url-loader?limit=50000',
+ },
]);
module.exports = {
@@ -93,3 +117,15 @@ function devtoolModuleFilenameTemplate(info) {
return `file://cloudcmd/${resource}`;
}
+function extract(name, extractCss) {
+ return {
+ test: RegExp(`css\/${name}\.css`),
+ use: extractCss.extract([
+ isDev ?
+ 'css-loader'
+ :
+ 'css-loader?minimize'
+ ])
+ };
+}
+