Как собрать проект? about whitepaper-bem HOT 13 OPEN

1. В этой либе не будет сборки, т.к. это противоречит идеологии wtpr — независимость от технологий сборки, только css.
2. Эта либа для бэм-структуры проекта. Чистые css теперь собираются с новыми версиями в пакет https://www.npmjs.com/package/whitepaper-css и по ссылке http://whitepaper.tools/cdn/whitepaper-2.0.0.min.css

from whitepaper-bem.

Сборка осуществляется непосредственно на самом проекте. В whitepaer-stub (project-stub) например это enb https://github.com/whitepapertools/whitepaper-stub/blob/master/.enb/make.js#L44

from whitepaper-bem.

@koloskof Я хочу сделать сборку css через webpack и закинуть прямо в этот проект. Перед публикацией пакета будет выполняться сборка и целевой проект сможет подключать себе whitepaper.css (или минифицированную версию) прямо из пакета.

from whitepaper-bem.

У меня есть проблема. postcss-simple-vars ожидает, что переменные будут определены в том же файле, в котором они и используются, а также они должны быть определены до использования. Получается, что надо сначала сконкатенировать весь css, при этом поставить объявления переменных (видимо из компонента theme) в начало.
@koloskof кто занимался сборкой на whitepaper-stub? Я не понял, как там была решена эта проблема.

from whitepaper-bem.

Мне объяснили, что это из-за того, что в примере desktop.bundles/hello первым подключается компонент theme и поэтому он первым попадает в итоговый бандл.

from whitepaper-bem.

Есть предложение вынести postcss переменные в отдельный файл, обычно это так делается.

from whitepaper-bem.

src/theme/_gap/theme_gap_small.post.css

@import "../_breakpoint/theme_breakpoint_default.post.css";

:root {
 /* Размеры отступа у контента */
 --gap: $space-s;

 /* Размеры отступов в колонках */
 --col-gap-third: calc(var(--gap) * 0.33);
 --col-gap-half: calc(var(--gap) * 0.5);
 --col-gap-two-thirds: calc(var(--gap) * 0.66);
 --col-gap-full: var(--gap);
 --col-gap-2x: calc(var(--gap) * 2);
 --col-gap-3x: calc(var(--gap) * 3);
}

@media screen and (min-width: $screen-s) {
 :root { --gap: $space-l; }
}

@media screen and (min-width: $screen-m) {
 :root { --gap: $space-xl; }
}

@media screen and (min-width: $screen-l) {
 :root { --gap: $space-xxl; }
}

src/theme/_gap/theme_gap_small.deps.js

([
    {
        mustDeps: [
            {
                block: 'theme',
                mods: { 'space': 'default' }
            },
        ]
    }
]);

Почему здесь и import и зависимость через bem используются? Кажется, что достаточно было бы чего-то одного.

from whitepaper-bem.

Чтобы подключить все стили из проекта пришлось использовать @import по glob паттерну.
postcss-import не умеет в glob паттерны, а postcss-easy-import не умеет разрешать зависимости при использовании glob паттерна. Подробнее здесь TrySound/postcss-easy-import#33
Из-за этого пришлось использовать предыдущую версию postcss-import, которая поддерживала glob и понизить версии некоторых других postcss плагинов.

from whitepaper-bem.

Также, у вас проект собирался используя какое-то конкретное bemjson дерево, то есть на самом деле не все стили из whitepaper попадали в результирующий whitepaper.css.

from whitepaper-bem.

Также для удобства подключения компонентов и выполнения сборки вынес все компоненты в src/, это может сломать другие BEM проекты использующие whitepaper-bem

from whitepaper-bem.

Пока не разбирался с url на шрифты и svg, потому что @Miocene и @fooontic говорили, что их не будет в следующей версии.

from whitepaper-bem.

Сделал PR #46

from whitepaper-bem.

Как раз за счёт этой сборки появилась возможность не зависеть от бэма. Так как этот проект – это единственное место, где есть исходники whitepaper и каким-то образом надо получить css отсюда, то и сборка оказалась здесь.

Не понял как собирается новый проект.

from whitepaper-bem.