search

mozilla / bedrock

Making mozilla.org awesome, one pebble at a time
https://www.mozilla.org
Mozilla Public License 2.0
1.18k stars 913 forks source link

Evaluate Parcel CSS for building / optimising CSS #11391

Closed alexgibson closed 2 years ago

alexgibson commented 2 years ago

Description

Parcel CSS is a relatively new CSS parser / minifier written in Rust. It could offer bedrock faster build times, and also improved minimisation / optimisation for our CSS.

It can work with Webpack's css-minimizer-webpack-plugin: https://github.com/parcel-bundler/parcel-css#with-webpack

Depending on the results we see, we can decide if we want to use it.

alexgibson commented 2 years ago

Taking this for a spin and the default settings fail with the following error on a few IE specific files:

remote: ERROR in css/firefox_desktop_download_ie8.css        
remote: css/firefox_desktop_download_ie8.css from Css Minimizer plugin        
remote: SyntaxError: Unexpected token Delim('*')

My assumption is this is due to old-IE hacks such as: https://github.com/mozilla/bedrock/blob/main/media/css/protocol/components/_navigation-ie.scss#L41

Looking to see if there's a workaround.

alexgibson commented 2 years ago

I managed to get a build up on demo: https://www-demo1.allizom.org/en-US/

Most bundles see small but definitely visible savings looking at minified file sizes. I do notice one oddball issue comparing the home page on demo to https://www-dev.allizom.org however:

For some reason, Parcel doesn't seem to remove duplicate CSS as well for this file. There are multiple imports in the file, and they all import the same base styles:

@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-family';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-beta';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-developer';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-nightly';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-focus';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-monitor';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-lockwise';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-mozilla';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-vpn';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-pocket';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-relay';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-family';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-beta';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-developer';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-nightly';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-focus';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-monitor';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-lockwise';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-mozilla';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-pocket';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-relay';

This file could definitely be more efficient from the outset, but right now we don't really notice since the duplicate CSS is removed. I'm looking to see if Parcel has an option we need to enable here, but I can't seem to find one.

alexgibson commented 2 years ago

After taking this for a spin yesterday I think it's not worth our while switching over just now, however it may be worth revisiting in the future, maybe after we've migrated away from sass imports (https://github.com/mozilla/bedrock/issues/10896)