Comments (13)
- В этой либе не будет сборки, т.к. это противоречит идеологии wtpr — независимость от технологий сборки, только css.
- Эта либа для бэм-структуры проекта. Чистые 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.
Related Issues (11)
- Предложения по avatar
- social-icon_name_codepen.bemhtml.js HOT 1
- social-icon_name_facebook.bemhtml.js HOT 1
- social-icon_name_github.bemhtml.js HOT 1
- social-icon_name_instagram.bemhtml.js HOT 1
- social-icon_name_twitter.bemhtml.js HOT 1
- Ошибка в стилях pt-form__item_indent-t_s
- stylelint
- Лицензия
- whitepaper.tools - This domain has expired HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from whitepaper-bem.