feat: rm `src/styles/components.css` by SevereCloud · Pull Request #4063 · VKCOM/VKUI

SevereCloud · 2023-01-29T09:52:04Z

Удаляем src/styles/components.css, используем src/index.ts

fixes Избавиться от src/styles/components.css #4062

codesandbox-ci · 2023-01-29T09:54:31Z

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 cf2f2ee:

Sandbox	Source
VKUI TypeScript	Configuration

github-actions · 2023-01-30T18:43:18Z

size-limit report 📦

Path	Size
JS	298.98 KB (+0.08% 🔺)
JS (gzip)	86.88 KB (+0.22% 🔺)
JS (brotli)	71.99 KB (-0.02% 🔽)
JS import Div (tree shaking)	4.6 KB (0%)
CSS	271.36 KB (+0.06% 🔺)
CSS (gzip)	34.8 KB (+0.46% 🔺)
CSS (brotli)	27.62 KB (+0.51% 🔺)

codecov-commenter · 2023-01-30T18:46:34Z

Codecov Report

Base: 79.51% // Head: 75.21% // Decreases project coverage by -4.30% ⚠️

Coverage data is based on head (cf2f2ee) compared to base (73ceccf).
Patch coverage: 100.00% of modified lines in pull request are covered.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4063      +/-   ##
==========================================
- Coverage   79.51%   75.21%   -4.30%     
==========================================
  Files         273      273              
  Lines        7062     7005      -57     
  Branches     2680     2626      -54     
==========================================
- Hits         5615     5269     -346     
- Misses       1447     1736     +289

Flag	Coverage Δ
e2e-chromium-android-dark	`?`
e2e-chromium-android-light	`?`
e2e-chromium-vkcom-dark	`?`
e2e-chromium-vkcom-light	`?`
e2e-firefox-vkcom-dark	`?`
e2e-firefox-vkcom-light	`?`
e2e-webkit-ios-dark	`?`
e2e-webkit-ios-light	`?`
e2e-webkit-vkcom-dark	`?`
e2e-webkit-vkcom-light	`?`
unittests	`75.21% <100.00%> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...es/vkui/src/components/FixedLayout/FixedLayout.tsx	`88.88% <ø> (-0.59%)`	⬇️
packages/vkui/src/components/Root/Root.tsx	`96.42% <ø> (ø)`
packages/vkui/src/components/SplitCol/SplitCol.tsx	`93.33% <ø> (-0.42%)`	⬇️
packages/vkui/src/components/View/View.tsx	`91.70% <ø> (+1.12%)`	⬆️
packages/vkui/src/components/View/ViewInfinite.tsx	`90.69% <ø> (ø)`
...s/vkui/src/components/SplitCol/SplitColContext.tsx	`100.00% <100.00%> (ø)`
...kui/src/components/ModalRoot/ModalRootAdaptive.tsx	`0.00% <0.00%> (-100.00%)`	⬇️
...ckages/vkui/src/components/ImageBase/validators.ts	`12.76% <0.00%> (-82.98%)`	⬇️
...ponents/HorizontalScroll/HorizontalScrollArrow.tsx	`14.28% <0.00%> (-73.22%)`	⬇️
...mponents/AppearanceProvider/AppearanceProvider.tsx	`33.33% <0.00%> (-66.67%)`	⬇️
... and 76 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

github-actions · 2023-01-30T18:50:27Z

👀 Styleguide deployed

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

github-actions · 2023-01-30T19:22:09Z

Changed screenshots

cell-ios-webkit-dark-1

cell-ios-webkit-light-1

formlayoutgroup-ios-webkit-dark-1

formlayoutgroup-ios-webkit-light-1

inomdzhon

Скриншоты не должны были обновиться...

Я собрал у себя локально, сравнил стили с master – меняется порядок CSS правил

Нужно импорты в src/index.ts привести к тому же виду, что в src/styles/components.css

Например, типографика была в самом верху, чтобы можно было её перебивать

Удаляем `src/styles/components.css`, используем `src/index.ts` - fixes #4062

SevereCloud · 2023-02-10T07:24:37Z

Переставил

Про Remover -- в конечной сборке они оказались сломаны - .vkuiIconButton оказался ниже чем .vkuiRemovable__toggle, поэтому отступ занулялся

В стайлгайде это не воспроизводится, поскольку используется порядок из src/index.ts.

Теперь порядок css везде одинаковый

BlackySoul · 2023-02-10T08:51:53Z

Кажется, ещё тут почистить (components.css)?

SevereCloud · 2023-02-10T08:52:59Z

Кажется, ещё тут почистить (components.css)?

Здесь идет речь про dist/components.css

inomdzhon · 2023-02-10T10:36:13Z

Переставил

Про Remover -- в конечной сборке они оказались сломаны - .vkuiIconButton оказался ниже чем .vkuiRemovable__toggle, поэтому отступ занулялся

В стайлгайде это не воспроизводится, поскольку используется порядок из src/index.ts.

Теперь порядок css везде одинаковый

🔥 да, по скриншотам стало лучше

Вот по размеру, что-то не то...

Рис. 1 Слева (281 Кб) это SevereCloud/issue4062, справа (278 Кб) это master.

Рис. 2 Тут я отформатировал оба файла и глянул насколько строк увеличился файл – на 114 строк (слева это текущая ветка)

Либо что-то дублируется, либо что-то начало попадать в бандл

SevereCloud · 2023-02-10T12:04:56Z

Дублировался ViewIOS.module.css. Фикс.

Также обнаружил что в компонентах бывают экспорируемые вещи, которые могут поменять очередность css, например SplitColContext. Нужно будет(отдельно) пройтись по компонентам и вынести в отдельный файл такое

inomdzhon · 2023-02-10T14:17:11Z

Дублировался ViewIOS.module.css. Фикс.

Также обнаружил что в компонентах бывают экспорируемые вещи, которые могут поменять очередность css, например SplitColContext. Нужно будет(отдельно) пройтись по компонентам и вынести в отдельный файл такое

Очередность та самая проблема, из-за которой что CSS в чанки по компонентам делить((

Не пойму, почему всё-равно CSS бандл вырос (хоть и немного)

Может postcss-loader в webpack'е не так отрабатывает?

SevereCloud · 2023-02-10T15:51:07Z

Не пойму, почему всё-равно CSS бандл вырос (хоть и немного)

Долго ковыряясь, обнаружил, что он вырос на 140 байт из-за символов новой строки "\n"

до	после

Кажется это не страшно

inomdzhon · 2023-02-10T20:20:36Z

Не пойму, почему всё-равно CSS бандл вырос (хоть и немного)

Долго ковыряясь, обнаружил, что он вырос на 140 байт из-за символов новой строки "\n"

до после

Кажется это не страшно

Ноу критикал 👍

Но вижу почему новая строка не удаляется – в webpack.config.styles параметр mode в 'none'. Надо выставить production, чтобы оптимизации на стороне Webpack сработали

SevereCloud · 2023-02-10T20:28:43Z

Надо выставить production, чтобы оптимизации на стороне Webpack сработали

Они слишком хорошо сработали, что почти полностью удалили css код 🌚

inomdzhon · 2023-02-13T06:33:23Z

Надо выставить production, чтобы оптимизации на стороне Webpack сработали

Они слишком хорошо сработали, что почти полностью удалили css код 🌚

🥲🥲🥲

eugpoloz

🚀

SevereCloud requested a review from a team as a code owner January 29, 2023 09:52

SevereCloud marked this pull request as draft January 31, 2023 06:17

SevereCloud force-pushed the SevereCloud/issue4062 branch 7 times, most recently from a997faa to 642e181 Compare February 2, 2023 15:50

SevereCloud marked this pull request as ready for review February 2, 2023 19:44

inomdzhon reviewed Feb 3, 2023

View reviewed changes

feat: rm src/styles/components.css

ac1ac08

Удаляем `src/styles/components.css`, используем `src/index.ts` - fixes #4062

SevereCloud force-pushed the SevereCloud/issue4062 branch from c61b0ef to ac1ac08 Compare February 10, 2023 07:10

SevereCloud requested a review from inomdzhon February 10, 2023 07:31

actions-user added 2 commits February 10, 2023 07:35

CHORE: Update screenshots

3fbcf38

CHORE: Update screenshots

ba3b02e

SevereCloud added 2 commits February 10, 2023 14:13

fix: SplitColContext to new file

e7c2ef2

fix: remove import ViewIOS.module.css

cf2f2ee

inomdzhon approved these changes Feb 13, 2023

View reviewed changes

eugpoloz approved these changes Feb 13, 2023

View reviewed changes

SevereCloud merged commit 8bdf9c6 into master Feb 13, 2023

SevereCloud deleted the SevereCloud/issue4062 branch February 13, 2023 12:23

Conversation

SevereCloud commented Jan 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codesandbox-ci bot commented Jan 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Jan 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

codecov-commenter commented Jan 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented Jan 30, 2023

👀 Styleguide deployed

Uh oh!

github-actions bot commented Jan 30, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changed screenshots

Uh oh!

inomdzhon left a comment

Choose a reason for hiding this comment

Uh oh!

SevereCloud commented Feb 10, 2023

Uh oh!

BlackySoul commented Feb 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SevereCloud commented Feb 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

inomdzhon commented Feb 10, 2023

Uh oh!

SevereCloud commented Feb 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

inomdzhon commented Feb 10, 2023

Uh oh!

SevereCloud commented Feb 10, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

inomdzhon commented Feb 10, 2023

Uh oh!

SevereCloud commented Feb 10, 2023

Uh oh!

inomdzhon commented Feb 13, 2023

Uh oh!

eugpoloz left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

SevereCloud commented Jan 29, 2023 •

edited

Loading

codesandbox-ci bot commented Jan 29, 2023 •

edited

Loading

github-actions bot commented Jan 30, 2023 •

edited

Loading

codecov-commenter commented Jan 30, 2023 •

edited

Loading

github-actions bot commented Jan 30, 2023 •

edited

Loading

BlackySoul commented Feb 10, 2023 •

edited

Loading

SevereCloud commented Feb 10, 2023 •

edited

Loading

SevereCloud commented Feb 10, 2023 •

edited

Loading

SevereCloud commented Feb 10, 2023 •

edited

Loading