bem-site / bem-forum-content-ru

Content BEM forum for Russian speak users
MIT License
56 stars 6 forks source link

Подключение плагина к PostCSS #573

Open vlastv opened 9 years ago

vlastv commented 9 years ago

Расскажите пожалуйста, как подключить пакет для PostCSS на примере Lost (вариант, установить bem-grid не предлагать). Насколько мне известно, PostCSS уже включен в последний пакет enb-stylus.

Используется enb сборщик, и yo bem stub как стартовый пакет.

Хочу получить возможность использовать LostGrid в .styl, например:

.header {
    lost-column: 2; 
}
voischev commented 9 years ago

//cc @awinogradov

awinogradov commented 9 years ago

@vlastv https://github.com/awinogradov/enb-postcss

voischev commented 9 years ago

А чем bem-grid не подошел?

vlastv commented 9 years ago

@voischev я взял lost для примера, возможно мне нужны и другие плагины для postcss и хотелось понимать как их устанавливать.

Guria commented 9 years ago

В enb-stylus теперь тоже postcss подключен. Но, кажется, там нет API для подключения плагинов. сс @blond

blond commented 9 years ago

Да, в enb-stylus внутри используется PostCSS, но наружу не торчит никакой возможности подключить плагины, кроме как через поделку новых опций.

Считаете, что нужно подумать над таким API?

vlastv commented 9 years ago

Именно из-за того, что внутри используется PostCSS я и решил, что могу пользоваться плагинами. А оказалось, что не видно "снаружи", по этому и появился данный топик.

vlastv commented 9 years ago

@awinogradov ваш вариант имеет конфликт

Error: Concurrent techs for target: index.css, techs: "stylus" vs "enb-postcss"
// .enb/make.js
    config.nodes('*desktop.bundles/*', function (nodeConfig) {
        nodeConfig.addTechs([
            // essential
            [enbBemTechs.levels, {
                levels: [
                    { path: 'libs/bem-core/common.blocks', check: false },
                    { path: 'libs/bem-core/desktop.blocks', check: false },
                    { path: 'libs/bem-components/common.blocks', check: false },
                    { path: 'libs/bem-components/desktop.blocks', check: false },
                    'common.blocks',
                    'desktop.blocks'
                ]
            }],
            // css
            [require('enb-stylus/techs/stylus'), {
                target: '?.css',
                autoprefixer: {
                    browsers: ['ie >= 10', 'last 2 versions', 'opera 12.1', '> 2%']
                }
            }],
            // postcss
            [require('enb-postcss/techs/enb-postcss'), {
                sourcemap : true,
                plugins : [require('lost')()]
            }],
        ]);
    });
tadatuta commented 9 years ago

@vlastv и enb-stylus, и enb-postcss принимают на вход fileList, а в данном случае необходимо, чтобы результат работы enb-stylus (бандл) был обработан postCSS.

Вот пример того, что подойдет, пока не появится возможность подключать плагины прямо в enb-stylus: https://github.com/tadatuta/enb-bundle-postcss

vkhv commented 8 years ago

tadatuta а есть ли в enb-stylus возможность прокинуть не валидный код в бандл? Для дальнейшей обработки enb-bundle-postcss'ом?

Например такой код: @define-mixin icon $name { padding-left: 16px; &::after { content: ""; background-url: url(/icons/$(name).png); } }

.search { @mixin icon search; }

Сломает сборку, а нужно чтобы он пробросился в бандл и обработался postCSS'ом.

tadatuta commented 8 years ago

@campykid Нет. Можно поставить postCSS перед Stylus либо писать код, предназначенный только для postCSS, в файлах с расширением css, они (вроде) будут переданы дальше без измеений.

Но @ai обещает в обозримом будущем sugarSS, тогда в Stylus в принципе нужда отпадет.