Modernize Site Kit PostCSS configuration for modern browsers

[kuasha420]

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 5.40.0 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 5.40.0.
• Update postcss-preset-env package to 9.5.11.
• 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

• Do a quick smoke test to ensure that everything looks the same.
• Also follow QA Brief from #8163 to make sure that nothing is broken there.

Changelog entry

• N/A

[tofumatt]

Nice, IB ✅

[binnieshah]

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

[mohitwp]

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**