Skip to content

WIP: VKUI-48: Подключать CSS в JS отдельно в каждом компоненте#1335

Closed
thoughtspile wants to merge 11 commits intomasterfrom
css-chunk
Closed

WIP: VKUI-48: Подключать CSS в JS отдельно в каждом компоненте#1335
thoughtspile wants to merge 11 commits intomasterfrom
css-chunk

Conversation

@thoughtspile
Copy link
Copy Markdown
Contributor

@thoughtspile thoughtspile commented Jan 26, 2021

  • Добавил css-импорты в компоненты
  • Добавил новую сборку с css-импортами в dist/cssm
    • Все стили в cssm обработаны postcss
  • Дефолтная и cjs сборки остаются как есть, без css-импортов
    • CSS-бандлы теперь собираются вебпаком, чтобы не дублировать список компонентов в styles.css
    • Вебпак собирает стили по файлам из cssm-сборки, чтобы не дублировать postcss + babel обработку.
  • Бабель-плагин переписывает import '@vkontakte/vkui' -> import '@vkontakte/vkui/dist/cssm'
    • Проект не взрывается из-за ошибочного импорта без /cssm
    • Прячем реализацию
  • Улучшения DX:
    • Не нужно импортить стили в неочевидном месте (styles.css unstable.css)
    • e2e-тесты отслеживают изменения стилей
  • Уменьшение css-бандла (min + gz):
    • create-vk-mini-app — 75% (26 -> 7К)

WIP:

  • В unstable.css попали транзитивные стили из vkui.css
  • Документация
  • Починить тесты
  • Починить стайлгайд
  • Вернуть фолбек для var(--duration) в .PullToRefresh__spinner--on .PullToRefresh__spinner-path

@github-actions
Copy link
Copy Markdown
Contributor

👀 Styleguide deployed

See the styleguide for this PR at https://vkcom.github.io/VKUI/pull/1335/

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jan 26, 2021

Warnings
⚠️

5 changed screenshots found — review & update them via "Update Screenshots" action before merging.

Messages
📖 Code coverage: 1577 / 3398 lines (46.41%), 1594 / 3473 statements (45.9%), 359 / 793 functions (45.27%), 821 / 2596 branches (31.63%)

Generated by 🚫 dangerJS against e97f4ac

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Jan 26, 2021

size-limit report 📦

Path Size
JS 46.03 KB (0%)
JS, unstable 6.89 KB (0%)
CSS 27.43 KB (+0.07% 🔺)
CSS, unstable 498 B (+6.42% 🔺)
CSS + JS, minimal 15.57 KB (+100% 🔺)

@thoughtspile thoughtspile force-pushed the css-chunk branch 3 times, most recently from 6a82045 to e97f4ac Compare January 28, 2021 15:47
@thoughtspile thoughtspile force-pushed the css-chunk branch 3 times, most recently from 4c9e856 to 0002069 Compare March 11, 2021 14:58
@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci bot commented Mar 22, 2021

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ad19d32:

Sandbox Source
VKUI - default example Configuration

@thoughtspile
Copy link
Copy Markdown
Contributor Author

пр умёр и поедет по чуть чуть в ближайший год

@eolme
Copy link
Copy Markdown
Contributor

eolme commented Jul 5, 2021

@thoughtspile почему?

@thoughtspile
Copy link
Copy Markdown
Contributor Author

@thoughtspile почему?

Потому что у нас не атомарные стили и есть шанс огрести очень тонких багов из-за порядка импорта компонентов в конечном аппе

@eolme
Copy link
Copy Markdown
Contributor

eolme commented Jul 5, 2021

Не понял, если нужны атомарные так давайте сделаем

@SevereCloud SevereCloud deleted the css-chunk branch January 25, 2024 08:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants