enb-css-hash demo

.enb/make.js

@@ -62,6 +62,8 @@ module.exports = function(config) {
                 plugins: techs.postcssPlugins
             }],
 
+            [require('enb-css-hash'), { minimize: isProd }],
+
             // bemtree
             // [techs.bemtree, { sourceSuffixes: ['bemtree', 'bemtree.js'] }],
 
@@ -109,6 +111,6 @@ module.exports = function(config) {
             [techs.borschik, { source: '?.css', target: '?.min.css', minify: isProd }]
         ]);
 
-        nodeConfig.addTargets([/* '?.bemtree.js', */ '?.html', '?.min.css', '?.min.js']);
+        nodeConfig.addTargets([/* '?.bemtree.js', */ '?.html', '?.min.css', '?.min.js', 'css.json']);
     });
 };

common.blocks/inplace-css/inplace-css.bemhtml.js

@@ -0,0 +1,82 @@
+// Вставляем стили перед каждым первым появлением БЭМ-сущности в BEMJSON
+oninit(function(exports) {
+    var ptp = exports.BEMContext.prototype;
+
+    ptp._pushedCSS = {};
+
+    // TODO: рекваирить правильный путь или борщик
+    ptp._entitiesCSS = require('./css.json');
+
+    ptp._onNode = function(node) {
+        if (!node) return [];
+        if (typeof node === 'string') return [node];
+
+        node.mods || (node.mods = {});
+        node.elemMods || (node.elemMods = {});
+
+        // запоминаем текущую сущность без учета модификаторов
+        var entities = [node.elem ? node.block + '__' + node.elem : node.block],
+            modNames = Object.keys(node.mods),
+            elemModNames = Object.keys(node.elemMods);
+
+        // накапливаем модификаторы
+        modNames.concat(elemModNames).forEach(function(modName) {
+            // naming.stringify() для бедных
+            var buf = node.block;
+            node.elem && (buf += '__' + node.elem);
+            buf += '_' + modName;
+
+            var modVal = node.elemMods[modName] || node.mods[modName];
+
+            if (!modVal) return;
+
+            if (modVal !== true) {
+                buf += '_' + modVal;
+            }
+
+            entities.push(buf);
+        }, this);
+
+        return entities;
+    };
+});
+
+// TODO: replace()
+block('*').match(function() { return this.block; }).def()(function() {
+    var _this = this,
+        entities = [].concat(this.ctx.mix || [], apply('mix') || []).reduce(function(acc, item) {
+            return acc.concat(_this._onNode(item));
+        }, this._onNode(this));
+
+    var reqCss = this._pushedCSS,
+        styles = [];
+
+    entities.forEach(function(entityKey) {
+        var entityCss = this._entitiesCSS[entityKey];
+
+        if (!entityCss || (reqCss && reqCss[entityKey])) return;
+
+        reqCss[entityKey] = true;
+
+        // обрабатываем page отдельно, т.к. нельзя вставлять перед doctype
+        if (_this.block === 'page' && this.ctx.head) {
+            this.ctx.head.push({
+                elem: 'css',
+                content: entityCss
+            });
+
+            return;
+        }
+
+        entityCss.forEach(function(css) {
+            styles.push(css);
+        });
+    }, this);
+
+    return styles.length ? [
+        '<style>',
+        styles.join(''),
+        '</style>',
+        applyNext()
+    ].join('') : applyNext();
+});

common.blocks/page/page.deps.js

@@ -0,0 +1,3 @@
+({
+    shouldDeps: 'inplace-css'
+});

desktop.bundles/index/index.bemjson.js

@@ -4,8 +4,7 @@ module.exports = {
     favicon: '/favicon.ico',
     head: [
         { elem: 'meta', attrs: { name: 'description', content: '' } },
-        { elem: 'meta', attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' } },
-        { elem: 'css', url: 'index.min.css' }
+        { elem: 'meta', attrs: { name: 'viewport', content: 'width=device-width, initial-scale=1' } }
     ],
     scripts: [{ elem: 'js', url: 'index.min.js' }],
     mods: { theme: 'islands' },

package.json

@@ -25,6 +25,7 @@
     "enb-bem-techs": "^2.2.1",
     "enb-bemxjst": "^7.5.0",
     "enb-borschik": "^2.4.0",
+    "enb-css-hash": "0.0.1",
     "enb-js": "^1.1.0",
     "enb-postcss": "^1.3.0",
     "gulp": "gulpjs/gulp#4.0",