Подключение sharps в виде плагина к postCSS, как описано в документации, не решает задачу?

// cc @awinogradov

Нет, не решает. 1) При подключении sharps в css притаскивает весь sharps, об этом писал уже https://ru.bem.info/forum/633/#comment-275050584 . Есть большая вероятность, что не правильно подключал плагин, или не правильно использовал. 2) mq.post.css - кастомизировал, добавив необходимые диапазоны экранов. 3) Найден пробел в расчете экранов mq.post.css (не научился оформлять замечания в github, на выходных планировал разобраться и выложить свою версию). Кратко - при разрешении 641px (граничная ширина экрана) выпадает из медиакверис, и показываются стили назначенные по умолчанию. Проблему решил. 4) Хотелось бы разобраться с внутренностями, понять использование @import на уровне БЭМ-проекта (бадла хотя бы).

Вспомнил, почему не подключал в виде библиотеки стилей.

Задача стояла следующая - Ни одного лишнего класса (row, col), лишних оберток, неиспользуемых media и т.д.

Кратко - при разрешении 641px (граничная ширина экрана) выпадает из медиакверис

Красавчик!

Хотелось бы разобраться с внутренностями, понять использование @import на уровне БЭМ-проекта (бадла хотя бы).

Может быть положить свою версию css в блок и прописать в нужных местах от него зависимости?

Есть предположения - в Gulpfile это указать, но как именно указать я не знаю.

const merge2 = require('merge2');

builder({
  css: bundle => merge2(
      gulp.src('./путь-до-mq.css'),
      bundle.src('css')
    )
    .pipe...
})

@zxqfox Настройка сработала, в бандле появился файл mq.post.css. Спасибо, пригодится. Это не то что я ожидал. Может не так объяснил.

Исходные данные:

Стили блока:

@import "../../node_modules/sharps/common.blocks/mq/mq.post.css"

@media (--small-only) {
    .card-content {
        padding 5px
    }
}

Ожидание: Один файл для стилей index.min.css с содержанием:

@media screen and (max-width: 40em) {
    .card-content {
        padding: 5px;
    }
}

У меня так собирается, если в каждом css делаю импорт. Вопрос и заключается в том, где этот импорт указать для всего проекта в целом что бы не бегать по файликам стилей и не прописывать, каждый раз

А postcss запускается на каждый файл или один раз в конце?

Покажи, пожалуйста, флоу сборки css

            css: bundle =>
                bundle.src('css')
                    .pipe(stylus())
                    .pipe(require('gulp-one-of')())
                    .pipe(postcss([
                        // require('precss')(),
                        require('postcss-import')(),
                        require('postcss-mixins'),
                        require('postcss-each'),
                        // require('postcss-simple-vars')({
                        //     variables: config,
                        //     silent: true
                        // }),
                        require('postcss-for'),
                        // require('cssnext')(),
                        require('postcss-custom-media'),
                        // require('sharps').postcss({ columns: 12, maxWidth: '2048px', gutter: '10px',   flex: 'flex' }),
                        require('postcss-calc')(),
                        require('postcss-nested'),
                        require('rebem-css'),
                        require('postcss-url')({ url: 'inline' }),
                        // require('autoprefixer')(),
                        require('postcss-reporter')()
                    ]))
                    .pipe(gcmq())
                    .pipe(concat(bundle.name + '.min.css'))
                    .pipe(gulpif(isProd, csso()))
            ,

const insert = require('gulp-insert');
                    ...
                    .pipe(require('gulp-one-of')())
                    .pipe(insert.prepend('@import "mq.css";')) // ← можно вот так
                    .pipe(postcss([
...

Не сработало по причине того, что добавляется строка с импортом на один уровень вложения папок. то есть: block/ block/ block/ вот так работает

а со структурой: block/ elem _mods block/ block/ elem Не работает. Т.к. добавляет строку только на один уровень - ../../ или ../

Направление мысли понятно - плагинами выполнить импорт с нужной директорией, потом запустить всё это дело в трубу с postcss. Пошел ломать gulpfile, искать решение