search

whitepapertools / whitepaper-bem

Design System Library
https://whitepaper.tools
MIT License
61 stars 15 forks source link

Как собрать проект? #44

Open Yankovsky opened 5 years ago

Yankovsky commented 5 years ago

В этом репозитории только css, но нет скрипта сборки. Как получается whitepaper.css?

koloskof commented 5 years ago

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

Yankovsky commented 5 years ago

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

Yankovsky commented 5 years ago

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

Yankovsky commented 5 years ago

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

Yankovsky commented 5 years ago

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

Yankovsky commented 5 years ago

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 используются? Кажется, что достаточно было бы чего-то одного.

Yankovsky commented 5 years ago

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

Yankovsky commented 5 years ago

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

Yankovsky commented 5 years ago

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

Yankovsky commented 5 years ago

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

Yankovsky commented 5 years ago

Сделал PR https://github.com/whitepapertools/whitepaper-bem/pull/46

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

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

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