Привет!

Если в css используются обращения к svg фильтрам, то файл игнорируется, например:

div {
    filter: url("filters.svg#blur");
}

Воспроизвести можно так:
клонировать репозиторий https://github.com/megatolya/bb
вызвать в нем sh reproduce.sh

в папке expectation см. файл app.css.

На борщик 1.0.х воспроизвести не смог, так как не понял, как в нем вызывать фриз путей.

Добрый день!

Не подскажите, как делать минификацию файлов, подключаемых через borschik:include?

Hi, guys!

Could you tell me, how to minificate borschik:include include files?

https://github.com/bem/borschik/blob/master/test/api.js

Also for #72

Хотел сделать так, чтобы специально поименованные картинки инлайнились в css, т.е. имея такой css:

.block{
  background: url('pic.svg?inline');
}
.inlinesvg_no .block{
  background: url('pic.png');
}

хочу получить такое:

.block{
  background: url('data:image/svg+xml;....');
}
.inlinesvg_no .block{
  background: url('/freeze/SoMeFREEzeNaME.png');
}

Написал такой конфиг:

"freeze_paths" : {
        "./**?inline": ":encodeURIComponent:",
        "./**": "./freeze/"
    }

Однако т.к. freeze_path матчится с помощью minimatch, первое правило никогда не будет работать.
Т.е. единственная возможность сейчас инлайнить картинки борщиком - это переложить нужные в отдельную директорию, но это не удобно и вообще не по БЭМ.

Как вообще это отслеживать. Вот к примеру коммит (f3c462d) исправлений, но в npm по прежнему версия без этих правок.

Хелп, просвятите!

Now isurl(@process) in less results with isurl("../../common.blocks/some-block/@process) which isn't expected.

See bem-archive/bem-tools#571 for details.

Also remove commented code from #97

The DevTools support editing both styles and scripts live, without the need for a full page refresh. https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#live-editing

For compiled/combined/minified resources DevTools can parse the Source Map and make it appear as though you're running unminified and uncombined files.

https://developers.google.com/chrome-developer-tools/docs/javascript-debugging?#source-maps

Add support for source maps to borschik, please.

Need for right work YModules and CommonJS

Наткнулся на запись вида:

  MyClass('ClassName', {/*borschik:include:file.js*/});

в версии 0.3 - это не работает. Работает в версии 0.4.
Сейчас в ветке rc-0.4 это поведение описано, но
мне кажется это излишне и вводит в замешательство(очень не очевидно в силу своей странности).

{/*borschik:include:file.js*/} и [/*borschik:include:file.js*/] просто заменить на запись вида:

  MyClass('ClassName', "borschik:include:file.js");
  MyClass('ClassName', ["borschik:include:file.js"]);

b-promo-gallery__slide.ie.css
Before:

.b-promo-gallery__image
{
    filter: expression('progid:DXImageTransform.Microsoft.AlphaImageLoader(' +
            'src=' + style.backgroundImage.replace('url(', '').replace(')', '') +
            ', sizingMethod="scale")');
}

After:
Fatal Errors in IE and

.b-promo-gallery__image
{
    filter: expression('progid:DXImageTransform.Microsoft.AlphaImageLoader(' +    
             'src='/blocks-desktop/b-promo-gallery/__slide/ +
                     style.backgroundImage.replace('url(', '').replace(')', '') +
             ', sizingMethod="scale")');
}

Solution:

.b-promo-gallery__image
{
    filter: expression('progid:DXImageTransform.Microsoft.AlphaImageLoader(' +
            's' + 'rc=' + style.backgroundImage.replace('ur' + 'l(', '').replace(')', '') +
            ', sizingMethod="scale")');
}

Как воспроизвести:

bash:

mkdir -p project/build
echo '{"freeze_paths": {"./**": "_/"}}' > project/build/.borschik
cp project/build/.borschik project/
cd project/
npm i borschik
node

Терминал ноды внутри директории project:

var b = require('borschik');
var actualFreezeDir = b.freeze.freezeDir(path.resolve('build/test.js'));
var expectedFreezeDir = path.resolve('build/_');
assert.strictEqual(actualFreezeDir, expectedFreezeDir); // error

Итого:

project/
    .borschik
    build/
        .borschik

Файлы .borschik одинаковые. Если зафризить файл внутри project/build то он как будто смотрит на родительский конфиг и фризит не туда.

csso - 1.3.8
inherit - 2.1.0
uglify-js - 2.4.0

Кажется, что борщик сильно перегружен функционалом. Это

1. заметно усложняет написание плагинов/технологий;

Как минимум, кажется, что технологиям Борщика не нужно ничего знать о минификации результата, а только заниматься раскрытием инклудов.

2. усложняет использование из сторонних инструментов;

Например, нужно написать технологию раскрытия инклудов для CSS-препроцессора (путь будет roole). Результирующий файл, нужно пропустить через autoprefixer. Зафризить и потом сжать.

Запихивать весь этот функционал в технологии не всегда целесообразно и сложно (тем более если хочется реиспользовать код в других технологиях).

3. усложняет поддержку.

В идеале флоу должен быть такой*:

› borschik -i file.roo -t roole \
   | autoprefixer \
   | borschik-freeze -t css \
   | csso > _file.css

• предполагается, что все инструменты умеют работать с потоками stdin/stdout; функции фриза вынесены в отдельный npm-модуль.

<!DOCTYPE HTML>
<html>
<head>
    <link rel="shortcut icon" href="/favicon.ico"/>
</head>
<body>
123
</body>
</html>

замораживаем командой
borschik -t html -i index.html -o project/index.html
получаем

<!DOCTYPE HTML>
<html>
<head>
    <link rel="shortcut icon" href="../../../../favicon.ico"/>
</head>
<body>
123
</body>
</html>

пусть к favicon.ico сильно изменился, хотя, по идеи, вообще не должен был меняться.

https://travis-ci.org/bem/borschik/builds/73344659

https://github.com/bem/borschik/blob/master/lib/techs/css.js#L10

Должно быть

importRe = '(?:\\@import\\s+(' + urlRe + '|' + stringRe + ');?)',

Вот такой link файла

url: '/*borschik:link:../../data/fonts.css*/',

Дает в итоговом коде

url: '../../bla-bla/data/fonts.css*/',

То есть "закрываюшая" часть комментария остается. Начинает нормально работать, только если ее убрать использовать link вот так

url: '/*borschik:link:../../data/fonts.css',

Выглядит как-то странно :-)

may be like this

require('borschik')
    .api({
        'inputString': '......',
        'outputPath': 'builded_files/' // to deal with relative urls
    }).
    .then(function( resultString ){
    })

Thats it.

@import url(//fonts.googleapis.com/css?family=Roboto:400,300,500,700&subset=latin,cyrillic);

in your code and borschik can't eat it. Have not found any workaround in docs.

Error: ENOENT, no such file or directory '/fonts.googleapis.com/cssfamily=Roboto:400,300,500,700&subset=latin,cyrillic'
    at Object.fs.openSync (fs.js:439:18)
    at Object.fs.readFileSync (fs.js:290:15)
    at exports.Tech.INHERIT.File.exports.File.INHERIT.read (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/tech.js:115:46)
    at exports.Tech.INHERIT.createFile (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/tech.js:26:41)
    at exports.Tech.INHERIT.File.exports.File.INHERIT.child (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/tech.js:152:68)
    at exports.Tech.base.Tech.inherit.File.exports.File.base.File.inherit.processInclude (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/techs/css.js:91:30)
    at exports.Tech.INHERIT.File.exports.File.INHERIT.process (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/tech.js:138:26)
    at exports.Tech.INHERIT.process (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/tech.js:34:56)
    at Cmd.<anonymous> (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/coa.js:137:38)
    at /Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/lib/cmd.js:483:22

There is no error handling for css technology. This leads to idiotic error

15:09:11.528 - [failed] [desktop.bundles/product-articles/_product-articles.css] borschik
15:09:11.528 - build failed
undefined

Видимо нужно обновить библиотеку Q.

valueOf is deprecated, use inspect instead. Error
at Promise.valueOf (/folder/node_modules/borschik/node_modules/coa/node_modules/q/q.js:452:39)
at Object.vow.valueOf (/folder/node_modules/vow/lib/vow.js:773:58)
at /folder/node_modules/vow/lib/vow.js:937:44
at _fulfilled (/folder/node_modules/borschik/node_modules/coa/node_modules/q/q.js:798:54)
at self.promiseDispatch.done (/folder/node_modules/borschik/node_modules/coa/node_modules/q/q.js:827:30)
at Promise.promise.promiseDispatch (/folder/node_modules/borschik/node_modules/coa/node_modules/q/q.js:760:13)
at /folder/node_modules/borschik/node_modules/coa/node_modules/q/q.js:574:44
at flush (/folder/node_modules/borschik/node_modules/coa/node_modules/q/q.js:108:17)
at process._tickCallback (node.js:415:13)

Ветки fixpack, options и minimize давно в мастере, но до сих пор захламляют список веток.

For example

.borschik config. There is no path-mapping, so we need to declare path and maybe wildcard for inlined files (max size?)

{
  "inline_base64": {
    "static/icon": "*.svg"
  }
}

Input CSS

.a {
  background: url('static/icon/ico.svg')
}

Ouput CSS

.a {
  background: url(data:image/svg+xml;base64,...)
}

Код

@import url('a/a1.css');
@import 'a/a2.css';
@import url(a/a2.css);
@import url(a/a3.css);

будет раскрыт так

/* a/a2.css begin */
    background: url("a/a2.png");
/* a/a2.css end */
/* a/a2.css begin */
    background: url("a/a2.png");
/* a/a2.css end */

А должно быть так

/* a/a2.css begin */
    background: url("a/a2.png");
/* a/a2.css end */

Вместо

.def(false)
.val(function(v) {
    return U.stringToBoolean(v, false);
})

Можно просто писать .flag()

Хотелось бы использовать .borschik не как файлик, а json в виде параметра для api. Дело в том, что для разработки используется один конфиг, а для сборки другой. Делать симлинки как сейчас мне кажется не правильным решением. Что скажете?

Переложить borschik-tech-coffee из alexeyten/borschik-tech-coffee в bem/borschik-tech-coffee

Файловая стуктура

.borschik
hubs/
  css/ ---(symlink)--> ../static/css/
static/
  blocks/
    include.css
  css/
    test.css

test.css

@import "../blocks/include.css"

.borschik

{
  "follow_symlinks": {
    ".": true
 }
}

запускам из корня

borschik -i hubs/css/test.css

и получаем ошибку ENOENT, no such file or directory hubs/blocks/include.css

Но, согласно конфигу, borschik должен преобразовать hubs/css/test.css в настоящий файл static/css/test.css и работать с ним

I want to use include and safe js validity in this example

var data = /* borschik:include:data.json */;

My proposal

var data = "borschik:import:data.json";

Это бы очень помогло для bem-archive/bem-tools#352

I can use relative paths for directories to generate freeze maps

$ node_modules/.bin/borschik freeze path/to/directory

and it works, but when I try do it for specified file borschik falls

$ node_modules/.bin/borschik freeze --input=path/to/file.js
Error
    at exports.freeze (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/freeze.js:96:52)
    at freezeAllProcessFile (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/freeze.js:232:15)
    at Object.exports.freezeAll (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/freeze.js:213:9)
    at Cmd.module.exports.require.Cmd.name.title.helpful.opt.name.title.short.long.flag.only.act.end.opt.name.title.short.long.end.opt.name.title.short.long.def.val.end.opt.name.title.short.long.act.end.opt.name.title.act.end.opt.name.title.end.opt.name.title.short.long.output.req.end.opt.name.title.short.long.def.val.end.opt.name.title.short.long.def.val.end.opt.name.title.short.long.def.val.end.opt.name.title.long.def.val.end.cmd.name.title.helpful.opt.name.title.short.long.def.end.opt.name.title.short.long.output.end.opt.name.title.short.long.def.val.end.act.end.act.tech (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/coa.js:121:46)
    at /Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/lib/cmd.js:483:22
    at _fulfilled (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/node_modules/q/q.js:798:54)
    at self.promiseDispatch.done (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/node_modules/q/q.js:827:30)
    at Promise.promise.promiseDispatch (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/node_modules/q/q.js:760:13)
    at /Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/node_modules/q/q.js:574:44
    at flush (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/node_modules/q/q.js:108:17)

Note, that it just say Error without any description. If I change relative path to absolute, everything becames ok.

csso - 1.3.8
inherit - 2.1.0
uglify-js - 2.4.0

при переходе с 0.3.4 на 0.3.5 перестал работать freez
Error: EPERM, operation not permitted C:\

Привет!

Было бы круто добавить поддержку указания лимита размера файлов, для которых применять resource inlining.

Например, нужно инлайнить с base64-кодированием картинки размером до 4kB, а больше — фризить в папку:

"freeze_paths" : {
    "i/png_images/**": ":base64:4096",
    "i/png_images/**": "i/_/"
}

или

"freeze_paths" : {
    "i/png_images/**": { "path": ":base64:", "limit": 4096 },
    "i/png_images/**": "i/_/"
}

During freezing

.icon-service-attraction-inactive{background:url(../img/sprites/services.png)}.icon-service-attraction-white-md{background:url(../img/sprites/services.png)}

borschik fails

Error: No such file or directory: /Volumes/Workspace/projects/datravel-website/application/public/freezing/public/img/sprites/services.png)}.icon-service-attraction-white-md{background:url(../img/sprites/services.png
  -> /Volumes/Workspace/projects/datravel-website/application/public/freezing/public/css/common_bottom.min.css
    at exports.Tech.base.Tech.inherit.File.exports.File.base.File.inherit.processLink [as __base] (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/techs/css-base.js:54:27)
    at exports.Tech.base.Tech.inherit.File.exports.File.base.File.inherit.processLink (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/techs/css.js:104:68)
    at null.processLink (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/inherit/lib/inherit.js:81:36)
    at exports.Tech.INHERIT.File.exports.File.INHERIT.process (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/tech.js:138:54)
    at exports.Tech.base.Tech.inherit.File.exports.File.base.File.inherit.processInclude (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/techs/css.js:97:61)
    at exports.Tech.INHERIT.File.exports.File.INHERIT.process (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/tech.js:138:26)
    at exports.Tech.INHERIT.process (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/tech.js:34:56)
    at Cmd.<anonymous> (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/lib/coa.js:137:38)
    at /Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/lib/cmd.js:483:22
    at _fulfilled (/Volumes/Workspace/projects/datravel-website/application/node_modules/borschik/node_modules/coa/node_modules/q/q.js:798:54)

Note the file name:

services.png)}.icon-service-attraction-white-md{background:url(../img/sprites/services.png

All works well if I freeze the file with line breaks:

.icon-service-attraction-inactive {
    background: url(../img/sprites/services.png)
}
.icon-service-attraction-white-md {
    background: url(../img/sprites/services.png)
}

На windows не работает path mapping из-за неверного RegExp в resolveUrl2

MIT

Example from #9

{
  "freeze_paths": {
    "static/icon/**/*.png": ":base64:",
    "static/icon/**/*.svg": ":encodeURIComponent:"
  }
}