site-kit-wp icon indicating copy to clipboard operation
site-kit-wp copied to clipboard
verified publisher icon google

Modernize Site Kit PostCSS configuration for modern browsers

Open kuasha420 opened this issue 1 year ago • 2 comments

Feature Description

Currently, Site Kit uses the default postcss-preset-env with 6.7.0 version which was released 3 years ago. As discovered while working on #8163, this results in needless polyfilling of modern CSS features that are well supported in our target version of browsers. We should explore updating the related infrastructure and configuration to utilize modern CSS features without polyfilling/transpilation and hopefully reducing the resulting CSS bundle.

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

  • Site Kit browserlist config should be updated to use the latest version of @wordpress/browserslist-config that dropped support for Internet Explorer 11, since Site Kit does not support Internet Explorer.
  • CSS Build infrastructure should be updated no longer polyfill Stage 2 CSS features that are supported by the the Site Kit supported browsers, determined by the updated @wordpress/browserslist-config.

Implementation Brief

  • Update @wordpress/browserslist-config package to latest (5.40.0 at the time of writing).
  • Update postcss-preset-env package to latest (9.5.11 at the time of writing, and known to work with Site Kit build infrastructure).
  • Search for 'TODO' comments related to logical-properties-and-values in **/*.scss files, and remove the comments and the corresponding CSS overrides.
  • A POC PR is available here that can be used as a starting point.

Test Coverage

  • No tests needed, but existing VRTs should pass without changes.

QA Brief

Changelog entry

kuasha420 avatar Mar 19 '24 14:03 kuasha420

Nice, IB ✅

tofumatt avatar May 13 '24 22:05 tofumatt

Putting this as a provisional for 132 based on the conversation during stand up on 26/06

binnieshah avatar Jun 26 '24 14:06 binnieshah

QA Update ✅

  • Tested on dev environment.
  • Verified plugin setup.
  • Verified main and entity dashboard.
  • Verified data according to date range.
  • Verified zero and gathering data state.
  • Verified all modules setup.
  • Verified all functionalities working same as latest environment and as expected.
  • Verified tag manager setup.
  • Verified spinner buttons are looking fine.
  • Verified spinner button storybook story.
  • Verified Spinner button on RTL site.
  • Verified space between spinner and button title is 8px.

https://github.com/user-attachments/assets/41a3f4a5-16ee-4ad0-bdcf-6d9de342170b

https://github.com/user-attachments/assets/c718d277-6c5f-4711-8197-5c6fda31d13c

https://github.com/user-attachments/assets/4fcd7e3b-be1c-4044-a859-bec23cac2402

https://github.com/user-attachments/assets/cff0b23a-7b70-4487-998a-89fb34c1516d

https://github.com/user-attachments/assets/2231d7db-5335-4df2-a415-06ed6d566514

https://github.com/user-attachments/assets/fbafbdf0-4e40-42c9-b49b-87d58a5b5148

https://github.com/user-attachments/assets/fbd2d859-ec19-4857-a78d-b30a3072fc8e

https://github.com/user-attachments/assets/b2a98ae5-5d38-4936-b4e6-a6a5f0e7c95f

Spinner button Storybook

image

image

image

image

mohitwp avatar Jul 23 '24 11:07 mohitwp