Войти с помощью github

Приветствую всех!

Как могу смотрю, что происходит и появляется пару вопросов. Все идут в реакт или просто спрос рождает предложение? и когда сл. бемап?

Всем привет! Не получается обратиться к блоку text внутри блока categories. По аналогии с докой делаю:

modules.define('categories', ['i-bem-dom', 'text'], function(provide, bemDom, Text) { provide(bemDom.declBlock(this.name, {...})); });

На что получаю в консоли Error: Module "categories": can't resolve dependence "text". Если в исходном коде заменю 'text' на 'button', то ошибки нет. Помогите понять где не прав

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

web-jade@webjade-Aspire-TC-120:~/Documents/bemes$ yo bem-stub ? Enter your project name: bem-test ? Enter a name of the project owner: Nikita ? Enter an email of the project owner: web-kostrov@yandex.ru ? Choose a toolkit to build the project: ENB ? Specify additional libraries if needed: ? Choose redefinition levels to use: desktop ? Choose CSS preprocessor: Only pure CSS ? Do you want to use 'Autoprefixer'? No ? Choose technologies to be used in the project: BEMJSON, BEMTREE, browser.js ? Choose a template engine: BEMHTML ? Do you want to build static HTML? Yes ? Do you want to build 'tidy' HTML? No ? Choose types of files to be minimized: css, js create bem-test/.bowerrc create bem-test/.enb/make.js create bem-test/bower.json create bem-test/desktop.bundles/index/index.bemjson.js create bem-test/.gitignore create bem-test/package.json create bem-test/README.md

I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.

npm WARN deprecated enb-diverse-js@0.1.0: Use enb-js instead. npm WARN deprecated bem-xjst@1.2.1: v1.x is deprecated. Use v4.x or newer. See https://github.com/bem/bem-xjst/wiki/Migration-guides npm WARN deprecated coa@1.0.3: Please upgrade to 1.0.4 for node 0.10, 0.12, or to 2.0+ for node 4+ npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated node-uuid@1.4.0: Use uuid module instead npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

bem-test@0.0.0 postinstall /home/web-jade/Documents/bemes/bem-test npm run deps

bem-test@0.0.0 deps /home/web-jade/Documents/bemes/bem-test bower install

bower bem-core#v2.8.0 cached https://github.com/bem/bem-core.git#2.8.0 bower bem-core#v2.8.0 validate 2.8.0 against https://github.com/bem/bem-core.git#v2.8.0 bower bem-core#v2.8.0 install bem-core#2.8.0

bem-core#2.8.0 libs/bem-core npm notice created a lockfile as package-lock.json. You should commit this file. npm WARN borschik-tech-cleancss@2.1.0 requires a peer of borschik@>=1.0.5 but none is installed. You must install peer dependencies yourself. npm WARN enb-modules@0.2.0 requires a peer of ym@~0.1.0 but none is installed. You must install peer dependencies yourself. npm WARN vow-node@0.3.0 requires a peer of vow@0.4.x but none is installed. You must install peer dependencies yourself.

added 295 packages from 273 contributors and audited 1111 packages in 19.615s found 41 vulnerabilities (25 low, 11 moderate, 4 high, 1 critical) run npm audit fix to fix them, or npm audit for details ✔ Done!

Привет.

Подскажите как правильно написать шаблон для элемента, который зависит от модификатора блока? Имеем:

{
    block: 'modal',
    mods: {
        theme: ['first', 'second']
    }
}

У этого блока есть елемент head, который должен иметь различную верстку в зависимости от темы модального окна. Единственный вариант, который пришел мне в голову это шаблон вида:

block('modal').mod('theme', 'first').elem('head')(
    ....
);

Но не работает. Зависимости указаны, стили приезжают, верстка не выводится.

Вопрос 2: Получается оба шаблона (для каждой темы) я должен написать в одном файле modal__head.bemtree.js? Или как-то можно разнести по разным файлам?

Есть ещё вариант писать шаблон в файле modal__head_theme_first.bemtree.js, но это неудобно, т.к. придется повторять модификатор темы для элемента head. Хм..

Добрый день. Немного разобравшись в структуре project-stub, передо мной встал простой вопрос. Нужно сделать запрос на какой-нибудь бэкенд и получить json с однотипными данными (элементами). Затем map-ом вставить кусок bemjson на основе полученных данных в bemjson.js бандла. Короче говоря динамически отрендерить какие-то однотипные элементы. Сам вопрос - где будет правильнее писать запрос и получение данных? Нормальным ли вариантом будет делать это непосредственно в коде страницы some-bundle.bemjson.js? Или есть лучший на ваш взгляд вариант. Спасибо)

Добрый день.

Блок header будет использоваться на всех страницах сайта. В бандлах, в файлах bemjson каждой страницы, кажется логично указывать только сам блок, и возможно модификаторы специфичные для этой страницы. Использую project stub.

например about.bemjson.js:

/...
content: [{
    block: 'header'
}]
/...

А в папке с блоком описать его структуру блока вместе с его элементами.

header.bemjson.js:

module.exports = [
    {
        block: 'link',
        mix: { block: 'header', elem: 'logo' },
        mods: {
            theme: 'islands',
            size: 'm'
        },
        url: 'https://bem.info/',
        content: 'bem.info'
    },
    {
        elem: 'nav'
    },
    {
        elem: 'sign-up-in-out'
    }
]

Но это не заработало. Посмотрел блоки из репозитария статьи создаём динамический БЭМ-проект там в некоторых папках с блоками, есть файл bemtree.js, вроде как решающий мою задачу.

в файле make.js раскомментировал строки с bemtree

bemtree.js:

block('header').content()(function() {
    return [
        {
            block: 'logo'
        },
        {
            elem: 'search-form'
        }
    ];
});

Сделал так же у себя, заменив содержимое на свое - тоже не заработало.

block('header').content()(function() {
    return [
      {
          block: 'link',
          mix: { block: 'header', elem: 'logo' },
          mods: {
              theme: 'islands',
              size: 'm'
          },
          url: 'https://bem.info/',
          content: 'bem.info'
      },
      {
          elem: 'nav'
      },
      {
          elem: 'sign-up-in-out'
      }
    ];
});

где я ошибся и что почитать, что бы больше так не делать?

Я использую методологию БЭМ и SCSS и у меня возник вопрос.

3 месяца назад я наткнулся на эту статью - https://css-tricks.com/using-sass-control-scope-bem-naming/. В ней средствами SCSS немного меняется иерархия стилей - стили элемента, которые зависят от модификатора блока, прокидываются к основным стилям элемента.

В целом мне этот подход нравится, он выглядит более модульным. Но хотелось бы знать, насколько это правильно с точки зрения БЭМа. Я пытался найти информацию на форуме, но ничего особо и не нашёл.

P.S. Я натыкался на вопрос с приблизительно похожей тематикой - о вложенных меда-запросах (https://github.com/bem-site/bem-forum-content-en/issues/57), в которой написано, что БЭМу это не противоречит. Поскольку ситуация в принципе похожая, может и с модификаторами так же можно?

Научите собирать из bemtree шаблонов html автоматически, т.к. у меня не используется bemjson-файла и использовать bemjson-to-html не могу. А как ещё собрать готовый html понять не могу. Пример конфигурации enb можно посмотреть в этом проекте, по сути там всё стандартно, ничего не менялось с образца BemExpress. Но html должен собираться для каждой папки pages/*, так как каждый бандл у меня это общий шаблон-обвязка (например общий шаблон публичной части сайта и общий шаблон панели администратора), а вот каждая папка в pages это шаблон именно уникальной страницы (например шаблон страницы статьи, который вставлен в шаблон публичной части сайта). Соответственно на выходе сборки было бы неплохо иметь что-то вроде bundles/desktop.bundles/название-страницы.html. Вот.

Добрый день. После прочтения документации на https://ru.bem.info. Возникли некоторые вопросы, которые я попытался максимально подробно описать с примерами, надеюсь на вашу помощь. Я использую классическую схему именования (block-nameelem-name_mod-name_mod-val). 1. Можно ли вкладывать элементы принадлежащие к одному блоку в другой: ```html

<header class="postheader">

Т.е. в этом примере имеется универсальный список (ul с классом "list") который я использую много где на странице, и в его элементы list__item вложены элементы post__time и post__author блока post. Можно ли так делать?
**2**. Служебный(приватный блок). Если я правильно понял, если в ходе именования возникает ситуация когда элемент имеет слишком сложную структуру, то его делают блоком(для удобства),
хотя он и не будет использоваться без своего родительского блока.
Например:
```html
<div class="events">
  <ul class="events-list">
    <li class="events-list__item">
      <a href="#" class="events-list__link">
        <div class="events__calendar">
          <span class="events__day"></span><br>
          <span class="events__month"></span>
        </div>
        <p class="events__details"></p>
      </a>
    </li>
  </ul>
  <a class="btn" href="#">Посмотреть все</a>
</div>

В данном случае внутри блока events я создал служебный блок events-list, чтобы не делать что-то вроде eventslist > eventslist-item events__list-link, т.к. это сбивает с толку. И опять таки служебный блок events-list содержит элементы блока events. Все ли я правильно понял и верна ли моя разметка? 3. Как я понял блок не может иметь внешнего позиционирования - margin. Но внутри блока margin, padding допускается использовать напрямую с элементами и даже с самим блоком? Или только через модификаторы? Пример:

<div class="block">
    <div class="block__elem1"></div>
    <div class="block__elem2"></div>
</div>
.block {
positon: relative;
padding: 10px;
}
.block__elem1 {
margin-top: 20px;
}
.block__elem2 {
position: absolute;
bot: 0;
}

4. Позиционирование. Имеется лента с блог-постами, мне нужно каждому посту задать внешние отступы, пример:

<div class="feed">
    <div class="post feed__post"></div>
    <div class="post feed__post"></div>
    <div class="post feed__post"></div>
</div>
.feed {
padding: 10px 0;
}
.feed__post {
margin-bottom: 15px;
}

Мне нужно это сделать через родителя, как в примере? Или нужно использовать модификаторы типа:

<div class="post post_mb_10"></div>
.post_mb_10 {
margin-bottom: 10px;
}

Или мне нужно воспользоваться оберткой и задать отступ через нее, например добавить после feed элемент feed__item с margin. Все ли эти способы верны в БЭМ и какой из них предпочтительнее? 5. БЭМ осуждает каскад, но бывают случаи когда он необходим, например выпадающее меню:

.list__item:hover .list_sub {
 display: block;
}

или

.list__item_active .list_sub {
 display: block;
}

или создание темы для списка например:

.list_type_navbar .list__item {
 padding: 10px 20px;
}

Такие исключения допускаются или есть какой-то обходной путь? Хотелось бы получить ответы на эти вопросы и исправить ошибки в разметке если таковые имеются. Спасибо!

Привет! В этом выпуске мы собрали для вас последние новости из мира БЭМ с начала 2018 года.

Из главных новостей:

  • Вектор развития БЭМ сместился в сторону React.js. Поэтому в этом выпуске вы ничего не найдете про обновления bem-core или bem-components. Но это не означает, что мы закапываем их в пользу новой библиотеки bem-react-core. Это значит лишь то, что БЭМ-методология еще раз доказала, что она применима к любому проекту: общие принципы сохраняются и помогают сделать любой проект легче и быстрее.
  • Мы продолжаем развивать БЭМ-инструменты и технологии.
  • Дизайнеры Яндекс.Денег начали большое дело про то, как БЭМ помогает создавать масштабируемую дизайн-систему. Пока официальное название проекта в разработке, но основные принципы уже определены.

БЭМ и React

bem-react-core

Не успел окончательно выйти bem-react-core@1.0.0, как мы приблизились к выходу bem-react-core@2.0.0.

Состав изменений предстоящего мажора:

  • полная поддержка TypeScript;
  • переезд самой библиотеки на TypeScript;
  • отказ от inherit;
  • честное наследование средствами языка;
  • инструментирование кода в базовых блока и модификаторах, честная работа с super;
  • классовая нотация записи блоков, элементов и модификаторов;
  • валидация объединенных пропсов базового класса и модификаторов;
  • отсутствие проблем со статическими свойствами класса;
  • отказ от изменения названий базовых методов React. Мы вернули component!
  • снижение веса библиотеки до 2.7KB вместо текущих 4KB;
  • раздельный релиз для Preact и React версий: bem-preact-core и bem-react-core.

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

БЭМ и DESIGN

С конца прошлого года дизайнеры Яндекса активно заговорили и начали публиковать свои наработки в дизайн системе. Пока все материалы собраны в репозитории bemdesign. Но грядут изменения, так что следите за новостями!

В каждом своем выступлении или статье ребята доказывают необходимость системного подхода, который предлагает БЭМ-методология: «Храните систему и система защитит вас от дальнейшего хаоса и направит в нужную сторону» (с.).

Что сделали за начало этого года и конец прошлого:

Технологии

bem-express

Выпустили следующие обновления:

project-stub

Обновили project-stub для работы с последней версией bem-xjst. В gulp-bem исправили сборку клиентского BEMHTML.

bem-xjst

Выпустили версии v8.8.5-v8.9.3.

Из важного:

  • v8.9.3 — исправили деградации, появившиеся в v8.6.8.
  • v8.9.2
    • добавили опцию singleQuotesInJsAttrs, которая делает HTML-результат шаблонизации data-атрибутов меньше — не экранируются двойные кавычки в JSON. Бонус — человекочитаемость HTML. Подробности в документации.
    • Runtime linter: починили вывод стектрейса в случае циклических ссылок в BEMJSON.
  • v8.9.0 — упростили синтаксис для легких шаблонов. Теперь можно использовать object-like запись:
    block('link')({
        tag: 'a',
        addMix: 'outer-link'
    })
    
    Примеры можно смотреть тут.
  • v8.8.6 — устранили создание HTML-класса i-bem при cls() и bem:false.

Все изменения, вошедшие в релизы, описаны в CHANGELOG.

Инструменты

bem-sdk

  • Исправили баги в config (#295, #297, #298, #299), import-notation (#264, #289), в тайпингах entity-name (#305), и дропнули ES6 код в naming.entity.stringify — теперь можно безопасно использовать в браузерах

gulp-bem

  • Объединили gulp-bem пакеты в монорепозиторий. Теперь проще обновлять пакеты, документацию, чинить общие баги, и допиливать хотелки.
  • Выпустили тестовую версию gulp-bem-src с жестким кешированием интроспекции и графа. Тестирование показало прирост скорости по сравнению с enb на большом количестве деклараций и с распараллеленным gulp-bem-bundle-builder.

bem-tools

Выпустили bem-tools 2.3.0, где обновили bem-config в bem-tools-create.

Документация

Сайт bem.info

Изменили дизайн bem.info:

bem info 2018-02-05 12-32-36

Мероприятия

  • Провели серию митапов по БЭМ, посвященных bem-react-core.
  • Опробовали новый формат встреч и провели два интенсива на целый день, на которых Владимир Гриненко рассказал про БЭМ от азов до React.js.
  • Владимир Гриненко побывал в гостях у Frontend Weekend №38 и рассказал про БЭМ и работу в Симферополе.
  • Провели хакатон по инструментам БЭМ. Большинство результатов уже включены в этот выпуск дайджеста. Следите за новостями, если хотите принять участие в следующем хакатоне!

Видео со всех встреч мы всегда публикуем в канале bem.info на YouTube.

Stay BEMed!

При размещении интерактивных элементов из bem-components (@6.0.1, desktop) на картах openlayers (@4.6.5, .ol-viewport > ol-overlaycontainer-stopevent > ol-overlay-container ol-selectable > наш компонент) "проглатываются" клики.

Использую костыль в виде модификаторов altClick, перекрывающих оригинальные обработчики pointerclick и заменяющий своими на click (перепиливать оригинальные не решился -- как-то там уж оч. много всего, -- страшно).

На сей момент понадобилось переделать для button, input:has-clear:clear; возможно, понадобится для select (пока не использую, не проверял).

UP: Добавлен jsfiddle "на пощупать": http://jsfiddle.net/lilliputten/49bja8bc/

UP-UP: Если использовать stopEvent:false при создании ol.Overlay (см. закоменченый код в примере), то клики работают, но в таком случае события проваливаются сквозь overlay на карту (видно при click-drag поверх кнопки).

Здравствуйте. Использую БЭМ, как способ именования классов. Встретился с такой проблемой. У меня есть несколько разных классов для стилизации ссылок. Например, разноцветная, особым образом подчеркнутая и тд. Вопрос - как лучше поступить?

  1. Делать для таких классов отдельные блоки с модификаторами: styled-link styled-link_underscore, styled-link styled-link_colorful. Но тут минус в том, что сами по себе styled-link не нужны. Это просто пустой класс (без стилей). Как-то не очень правильно добавлять пустой класс.
  2. Делать для таких классов просто блоки - styled-link-underscore, styled-link-colorful. Тут минус в том, что, по сути, это ссылки. И класс нужен только для придания разных стилей ссылки. И для каждой ссылки делать разный класс - как будто это совершенно разные блоки - кажется не очень правильным решением.
  3. Первый вариант, только не писать styled-link, а сразу писать модификатор - styled-link_colorful. Но это неправильно с точки зрения БЭМ, да? Модификатор модифицирует блок или элемент, то есть, должен идти в контексте с ним. А у меня просто так написан. 4.Какой-то другой вариант?

Мы продолжаем серию интенсивов для новичков на целый день!

В прошлый раз участники жаловались, что сложно выбраться в рабочий день. Мы вас услышали и теперь проводим мероприятие в воскресение, 8 апреля.

Очень просим вас максимально оперативно зарегистрироваться.

Как и на прошлом митапе начнем с самых азов и познакомим начинающих верстальщиков с идеями, которые стоят за БЭМ, а затем перейдем к практике на БЭМ-платформе (bem-express) и React с использованием bem-react-core.

Вас ждет детальный рассказ про основы БЭМ на реальных примерах, включая CSS и хорошие практики в написании HTML-разметки. Кроме того, мы обсудим, как организовать станок верстальщика, рассмотрим такую мощную концепцию, как уровни переопределения, а также сборку.

Дальше мы обсудим разработку проекта на React.js и научимся описывать React-компоненты в декларативном стиле. Для вас подготовлено плавное погружение в bem-react-core. Мы на практических примерах рассмотрим, какие преимущества получит ваш React-проект с использованием этой библиотеки.

В этот раз у нас будет гораздо больше времени, так вы сможете сделать передышку, задать вопросы и перекусить в перерыве.

План мероприятия:
12:00 — 12:30 — Знакомство и ваши вопросы
12:30 — 14:00 — Основы БЭМ
14:00 — 15:00 — Перерыв
15:00 — 18:00 — Знакомство с React.js и плавное погружение в bem-react-core
18:00 — 19:00 — Заключительная секция вопросов и ответов

Ноутбук приносить не обязательно. После встречи мы опубликуем все материалы, ссылки и видео.

Митапы по БЭМ, как всегда, бесплатны, но нужно зарегистрироваться заранее: количество мест ограничено.

По всем вопросам пишите по адресу: info@bem.info

Stay BEMed!

Кому интересен вебинара по bem-express? Какие темы нужно затронуть?

Хотелось узнать в чем реальные бенефиты от использования модификаторов для таких состояний, как hover, active, focus, вместо использования css-псевдоклассов. В той же либе бэм-компонентов, например, у компонента Button используются модификаторы.

Имеются ли наработки (идеи развития) в сторону ограничений областей видимости для либ?

Например: В проекте используется либа libA с блоками A, B, C. На проекте есть блоки D, E, F

Но появляется интереcная либа libH.... С более проработанная реализация блоков E и F... Но в этой либе используются свои реализации блоков A и C.

Что в свою очередь порождает конфликт.

Хорошо было бы использовать что-то вроде namespace для блоков из либ. @vithar @veged @tadatuta @zxqfox

Всем привет. Допустимо чтобы одна сущность имела несколько модификаторов с одним названием но разными значениями? Если да, то можете привести корректные примеры таких модификаторов?

Такое допустимо:

<div class="block block_theme_sun block_theme_green-islands"></div>
<div class="block block_size_m block_size_l"></div>

или у сущности название модификатора должно встречаться только один раз, например если есть модификатор block_size_m тогда сущность больше не может иметь модификаторов у которых название size то есть block_size_l нельзя использовать.

Мы продолжаем серию БЭМапов!

Сергей Бережной проведёт секцию живого программирования и познакомит вас с библиотекой bem-react-core. Вы узнаете, как и зачем в одном проекте совмещать React и bem-react-core, как создавать блоки и элементы, работать с модификаторами и использовать уровни переопределения.

Мы приглашаем всех, кто уже знаком с React и хочет привлечь БЭМ к своему проекту! Регистрация открыта!

Stay BEMed!

При запуске тестов для модулей, использующих bem-import в окружении Windows возникают ошибки типа:

> node node_modules/jest/bin/jest.js
 FAIL  src/blocks/App/App.test.js
  ● Test suite failed to run
    Cannot find module './HeaderApp-Header.js' from 'App.js'

(Вроде бы что-то похожее было и при попытке подключения bem-react-components.)

Приличного способа решения не нашёл (возможно, помогло бы использование path.posix; мне не удалось). Для меня пока работает вот такой патч (для babel-plugin-bem-import@1.4.2):

--- node_modules/babel-plugin-bem-import/dist/index.js.ORIG    Sat Mar 10 05:43:45 2018
+++ node_modules/babel-plugin-bem-import/dist/index.js    Sat Mar 10 19:23:55 2018
@@ -63,13 +63,13 @@
                 .map(function (bemCell) {
                     var localNamingOpts = levelsMap[bemCell.layer].naming || namingOptions;
                     var fsScheme = levelsMap[bemCell.layer].scheme || 'nested';
-                    var entityPath = path.resolve(bemFs(fsScheme).path(bemCell, localNamingOpts));
+                    var entityPath = path.resolve(bemFs(fsScheme).path(bemCell, localNamingOpts)).replace(/\\/g,'/');
                     // BemFile
                     return {
                         cell: bemCell,
                         exist: fs.existsSync(entityPath),
                         // prepare path for require cause relative returns us string that we couldn't require
-                        path: requiredPath(path.relative(path.dirname(filename), entityPath))
+                      path: requiredPath(path.relative(path.dirname(filename), entityPath)).replace(/\\/g,'/')
                     };
                 });

В качестве PR такую кувалду предлагать не рискую; оставляю здесь как временное решение для тех, кто столкнётся с таким же багом и для привлечения внимания к существующей проблеме.

Не про БЭМ, но прошу помочь разобраться. Редирект с сайта site.ru на сайт test.ru Локально все работает, на реальном сервере редиректит по адресу site.ru/test.ru, причем даже обычный window.location.replace('http://test.ru') работает также. Может кто подсказать в чем причина?

a year ago

/dell

/dell

Верстаю по методологии BEM, но получается сильно расширный блок. Использовать только элементы не получается, поэтому приходится разбивать блок на подблоки, зависимые части главного независимого блока . Поэтому хочу спросить, не противоречит ли такой код методологии?

.product
  .product__title
  .product__img
// первый служебный блок
  .product-properties
    .product-properties__img
    .product-properties__desc
// второй служебный блок
  .product-content
    .product-content__desc
    .product-content__price
    .product-content__date

Два вопроса:

  1. Очень интересует где я могу включить доп. опции для шаблонов, такие как закрытие одиночных элементов, аттрибуты без кавычек - читал тут https://ru.bem.info/platform/bem-xjst/8/api/ Использую bem express и я должен это делать в файле .enb/techs.js, (?) так как шаблоны подключаются там

    module.exports = {
     bemtree: require('enb-bemxjst/techs/bemtree'),
     bemhtml: require('enb-bemxjst/techs/bemhtml')
    }
    

    Можно какой-то элементарный пример?

  2. Как убрать стандартную обработку текста, например, мне иногда важно чтобы сохранялись переносы строк в тексте.

Пробую подключить bem-react-components в проект на основе bem-react-boilerplate. Добавляю уровень в .bemrc.js:

module.exports = {
  levels: {
    'node_modules/bem-react-components/blocks':  { scheme: 'nested', schemeOptions : 'react', naming : 'react' },
    'src/blocks': { scheme: 'nested', schemeOptions : 'react', naming : 'react' },
  },
  // ...
}

Делаю импорт:

import Button from 'b:Button';

При запуске dev-сервера в консоли вижу ошибку:

Failed to compile.
./node_modules/bem-react-components/blocks/Button/Button.js
Module parse failed: Unexpected token (61:12)
You may need an appropriate loader to handle this file type.
|         const { focused, hovered, pressed } = this.state;
|         return {
|             ...this.__base(...arguments),
|             disabled,
|             focused,

Строка 61 это именно ...this.__base(...arguments).

Насколько могу понять, требуется вручную ещё указать webpack, что файлы из node_modules/bem-react-components/blocks/ должны обрабатываться babel'ем? Как это сделать?

Пробовал добавлять в config-overrides.js, возникает ошибка, связанная с некорректной работой с windows-путями:

Module not found: Can't resolve './blocksAppApp.js' in 'D:\My\Project\Path\src'

Добавляю так:

  rules1.oneOf[1] = {
    test : babelLoader.test,
    include : babelLoader.include,
    use : [
      {
        loader : require.resolve('webpack-bem-loader'),
        options : {
          techs : ['js', 'css'],
        }
      },
      {
        loader : babelLoader.loader,
        options : Object.assign({}, babelLoader.options, {
          presets : [['es2015', {
            loose : true,
          }], 'react'],
          plugins : [
            'transform-object-rest-spread',
            ['bem-import', {
              'levels': [
                './node_modules/bem-react-components/blocks',
                './src/blocks',
              ]
            }],
          ],
        })
      }
    ]
  };

Ошибка выпадает в node_modules/webpack/lib/ModuleNotFoundError.js. Дальше пока не смотрю (на этом станке нет отладчика).

Как надо делать правильно.

Здравствуйте,

пытаюсь правильно сверстать компонент группы кнопок, использую flexbox. У компонента может быть 2 стиля - без зазора и с зазором между кнопками. Не понимаю, как правильно сделать через CSS зазоры между кнопками. Первое что пришло на ум, это использовать отрицательные маржины у группы и положительные паддинги у кнопок, но margin у блока группа кнопок менять нельзя (блок не должен влиять на своё "положение", есть ситуация когда маржин задаётся примиксованным элементом). Второе что приходит на ум - это маржин справа у каждой кнопки кроме последней и маржин снизу у всех кнопок. Минус такого решения - есть "лишний" отступ снизу или "лишний" отступ справа, если последняя кнопка перенеслась на новую строку при сжатии экрана. Третий вариант который я пробовал - это использовать CSS Grid, но в данном случае это вообще не вариант...

Помогите, пожалуйста, понять, как правильно сверстать такой блок.

При создании блока с примесями (mixins) в текущей версии i-bem (bem-core@4.2.1 из npm) приходится добавлять bemDom.Block в список примесей, чтобы нормально наследовался функционал блока (findChildBlock etc):

BEMDOM.declBlock('block', [bemDom.Block, Mixin], { /* props... */ });

Собрался было добавить кейс для чистых миксинов в declBlock, но вижу, что в текущей версии на github уже всё есть:

function (baseCls, entityName, base) { /* ... */ }
// ...
declBlock : function(blockName, base, props, staticProps) {
    // ...
    base = getEntityBase(Block, blockName, base);
    // ...
},

Правильно понимаю, что это недавний фикс и будет на npm в ближайшем минорном апдейте?

(Чёт' потратил кучу времени, чтобы понять, что происходит... %((( Это, собственно, было в продолжение того вопроса: Примешивание миксина к модификатору · Issue #1481 · bem-site/bem-forum-content-ru.)

Пытаюсь дополнить конфигурацию bem-react-boilerplate через config-overrides.js. Хочется:

1. Удобный синтаксис для стилей

Пытаюсь добавить обработчик SugarSS или хотя бы подключать stylus. Пока получается только добавить соотв. парсер для всех исходных .css, что не является годным вариантом -- хотелось бы, чтобы css обрабатывалось именно, как css, а остальные вкусности применялись для файлов с соотв. расширением (.sss, .styl).

Создаю объект для обработки .sss файлов по аналогии с оригинальным:

  let ssLoader = {
    test : /\.sss$/, // Вариант А: пытаемся применять к файлам `.sss`. Не работает вообще.
    // test : /\.css$/, // Вариант Б: применяем к css-файлам. Работает, но ломается на обычном css.
    use : [
      require.resolve('style-loader'),
      {
        loader : require.resolve('css-loader'),
        options : { importLoaders : 1 },
      },
      {
        loader : require.resolve('postcss-loader'),
        options : {
          ident : 'postcss_sss',
          parser : 'sugarss',
          plugins : // autoprefixer...
        },
      },
    ],
  };

Далее могу либо заменить исходный объект, либо попытаться добавить новый:

  // Replace default postcss with SugarSS
  config.module.rules[1].oneOf[2] = ssLoader;
  // Append SugarSS
  config.module.rules[1].oneOf.push(ssLoader);

Проблема в том, что оно работает только в "Варианте Б" -- только если указываю расширение .css для test, но в этом случае сыпятся ошибки, если встречается обычный css. Типа такого:

Failed to compile

./src/blocks/App/Logo/App-Logo.css
Module build failed: Syntax Error

(1:11) Unnecessary curly bracket

> 1 | .App-Logo {
    |           ^

Т.е., с одной стороны, понятно, что оно как-то работает. Но вот повесить на отдельное расширение не удаётся никак.

Такое ощущение, что есть ещё фильтрация по расширениям исходных файлов и задаваемое мной условие поиска .sss или .styl ничего не находит в отобранных файлах.

Как можно добавить своё собственный "кастомный" тип исходных файлов?

В шаблонах конфигов (node_modules/react-scripts/config/) тоже не вижу ничего подобного на список допустимых расширений. Как это делается? Что делаю не так?

2. Sourcemaps для babel

При отладке вижу только один уровень sourcemaps -- код до склейки вебпаком (уже обработанные babel'ем отдельные модули). Мой исходный код либо не передается от babel в webpack, либо не подхватывается там.

Пробовал (там же, в config-overrides.js):

  1. Добавлять опции devtool: 'source-map', sourceMaps: true (или 'inline') и retainLines: true для (for babelLoader.loader).

  2. Передавать sourceMaps: true для опций babel-плагина es2015.

  3. Использовать config = injectBabelPlugin('source-map-support', config).

(См. How to use sourcemaps? · Issue #1 · bem/bem-react-boilerplate.)

Возможно ли? Какова сигнатура передачи параметров?

В разделе Декларация блока / Клиентский JavaScript (i-bem.js) / Платформа / БЭМ ничего подходящего не увидел. Свои собственные попытки пока приводят к тому, что в создаваемом модуле модификатора блока отсутствуют добавляемые методы. Сейчас прообую лезть внутрь, смотреть, что происходит, пока хотелось бы убедиться, что не упустил ч.-ндь банального.

Как-то так:

// Примесь scrollableMixin:
modules.define('scrollableMixin', [ 'i-bem-dom' ], function(provide, BEMDOM) {
    provide(BEMDOM.declMixin({ /*...*/ ));
});
// Модификатор с примесью
modules.define('box', [ /*...*/ 'scrollableMixin', /*...*/ ], function(provide, /*...*/ ScrollableMixin, /*...*/ Box) {
    provide(Box.declMod({ modName : 'scrollable', modVal : true }, ScrollableMixin, { /*...*/ }));
});

UP: Вижу, что declMixin вообще не предполагает передачу @param {Function|Array[Function]} [base] base block + mixes. Как быть? Как-то inherit'ить перед delcMod нужные модули самостоятельно?

Немного не по теме, наверное.. Кто-то знает как в Express 4 включить поддержку форм с multipart/form-data? Уже использовал и formidable, и multer, но все равно стабильно получаю ответ:

InvalidContentTypeError: Could not parse content type header: multipart/form-data; boundary=----WebKitFormBoundaryE8eRwjA5gxuFzaTp at createError (/home/kndn/projects/bets/node_modules/error/typed.js:31:22) at anyBody (/home/kndn/projects/bets/node_modules/body/any.js:36:18) at Server.handler (/home/kndn/projects/bets/node_modules/tiny-lr/src/server.js:145:32) at tinylr (/home/kndn/projects/bets/node_modules/tiny-lr/src/index.js:45:9) at Layer.handle [as handle_request] (/home/kndn/projects/bets/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/home/kndn/projects/bets/node_modules/express/lib/router/index.js:317:13) at /home/kndn/projects/bets/node_modules/express/lib/router/index.js:284:7 at Function.process_params (/home/kndn/projects/bets/node_modules/express/lib/router/index.js:335:12) at next (/home/kndn/projects/bets/node_modules/express/lib/router/index.js:275:10) at SessionStrategy.strategy.pass (/home/kndn/projects/bets/node_modules/passport/lib/middleware/authenticate.js:325:9) at SessionStrategy.authenticate (/home/kndn/projects/bets/node_modules/passport/lib/strategies/session.js:71:10) at attempt (/home/kndn/projects/bets/node_modules/passport/lib/middleware/authenticate.js:348:16) at authenticate (/home/kndn/projects/bets/node_modules/passport/lib/middleware/authenticate.js:349:7) at Layer.handle [as handle_request] (/home/kndn/projects/bets/node_modules/express/lib/router/layer.js:95:5) at trim_prefix (/home/kndn/projects/bets/node_modules/express/lib/router/index.js:317:13) at /home/kndn/projects/bets/node_modules/express/lib/router/index.js:284:7

Куда копать? Что не так? С какого конкретно момента это происходит понять не могу..