Disable the CSS autoprefixer in the Storefront by default
INFO
This document represents an architecture decision record (ADR) and has been mirrored from the ADR section in our Shopware 6 repository. You can find the original version here
Context
The storefront CSS, compiled by scssphp/scssphp, is currently automatically prefixed with vendor prefixes using padaliyajay/php-autoprefixer. However, the generated prefixes no longer add much value since the browser support has been updated with the Bootstrap v5 update. Most of the prefixes are unnecessary for the supported browsers in .browserslist. Unfortunately, the theme:compile process experiences a significant decrease in performance due to the auto-prefixer, which is particularly problematic in our SaaS solution. Moreover, the padaliyajay/php-autoprefixer package does not work dynamically and fails to consider .browserslist while applying the appropriate vendor-prefixes. This package hard-codes the CSS properties that require prefixing, making it an unsustainable long-term solution. To demonstrate this, a table containing all automatic prefixes generated by padaliyajay/php-autoprefixer is provided below.
Current browser support
>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11Current auto-prefixes
✅ = Fully covered by current browser support. The prefix is not used by the browser.
⚠️ = Not fully covered by current browser support. Please read the notes.
Current auto-prefixes for Webkit
| CSS property | Vendor prefix | Support | Notes | Can I use |
|---|---|---|---|---|
| box-reflect | -webkit-box-reflect | ⚠️ No Firefox support | No cross-browser support was possible using prefixing only | https://caniuse.com/?search=box-reflect |
| column-count | -webkit-column-count | ✅ Full support | https://caniuse.com/?search=column-count | |
| column-gap | -webkit-column-gap | ✅ Full support | https://caniuse.com/?search=column-gap | |
| column-rule | -webkit-column-rule | ✅ Full support | https://caniuse.com/?search=column-rule | |
| clip-path | -webkit-clip-path | ⚠️ Partial support | Prefix was needed in Safari 7-13 and iOS 7-12.5 | https://caniuse.com/?search=clip-path |
| user-select | -webkit-user-select | ✅ Full support | https://caniuse.com/?search=user-select | |
| appearance | -webkit-appearance | ✅ Full support | https://caniuse.com/?search=appearance | |
| animation | -webkit-animation | ✅ Full support | https://caniuse.com/?search=animation | |
| transition | -webkit-transition | ✅ Full support | https://caniuse.com/?search=transition | |
| transform | -webkit-transform | ✅ Full support | https://caniuse.com/?search=transform | |
| transform-origin | -webkit-transform-origin | ✅ Full support | https://caniuse.com/?search=transform-origin | |
| backface-visibility | -webkit-backface-visibility | ✅ Full support | https://caniuse.com/?search=backface-visibility | |
| perspective | -webkit-perspective | ✅ Full support | https://caniuse.com/?search=perspective | |
| background-clip | -webkit-background-clip | ⚠️ Partial support | Value "text" needs prefix. Non-standard method of clipping a background image to the foreground text | https://caniuse.com/?search=background-clip |
| filter | -webkit-filter | ✅ Full support | https://caniuse.com/?search=filter | |
| font-feature-settings | -webkit-font-feature-settings | ✅ Full support | https://caniuse.com/?search=font-feature-settings | |
| flow-from | -webkit-flow-from | ⚠️ No support | Was supported in WebKit and IE, implementing the feature is no longer being pursued by any browser | https://caniuse.com/?search=flow-from |
| flow-into | -webkit-flow-into | ⚠️ No support | Was supported in WebKit and IE, implementing the feature is no longer being pursued by any browser | https://caniuse.com/?search=flow-into |
| hyphens | -webkit-hyphens | ⚠️ Partial support | Safari and iOs need prefix. Value "auto" has full support | https://caniuse.com/?search=hyphens |
| mask-image | -webkit-mask-image | ✅ Full support | Prefixed values for gradients (-webkit-linear-gradient) were needed. Later, support for unprefixed values was added. | https://caniuse.com/?search=mask-image |
| mask-repeat | -webkit-mask-repeat | ⚠️ Partial support | Chrome and Edge need prefix. | https://caniuse.com/?search=mask-repeat |
| mask-position | -webkit-mask-position | ⚠️ Partial support | Chrome and Edge need prefix. | https://caniuse.com/?search=mask-position |
| mask-size | -webkit-mask-size | ⚠️ Partial support | Chrome and Edge need prefix. | https://caniuse.com/?search=mask-size |
| display: flex | display: -webkit-flex | ✅ Full support | https://caniuse.com/?search=display%3A flex | |
| display: inline-flex | display: -webkit-inline-flex | ✅ Full support | https://caniuse.com/?search=display%3A inline-flex | |
| position: sticky | position: -webkit-sticky | ⚠️ Partial support | Safari 7.1 - 12.1 needed prefix. Afterwards full unprefixed support | https://caniuse.com/?search=display%3A inline-flex |
| ::placeholder | ::-webkit-input-placeholder | ✅ Full support | https://caniuse.com/?search=%3A%3Aplaceholder | |
| ::file-selector-button | ::-webkit-file-upload-button | ✅ Full support | https://caniuse.com/?search=%3A%3Afile-selector-button | |
| keyframes | -webkit-keyframes | ✅ Full support | https://caniuse.com/?search=keyframes |
Current auto-prefixes for Mozilla
| CSS property | Vendor prefix | Support | Notes | Can I use |
|---|---|---|---|---|
| column-count | -moz-column-count | ✅ Full support | https://caniuse.com/?search=column-count | |
| column-gap | -moz-column-gap | ✅ Full support | https://caniuse.com/?search=column-gap | |
| column-rule | -moz-column-rule | ✅ Full support | https://caniuse.com/?search=column-rule | |
| user-select | -moz-user-select | ✅ Full support | https://caniuse.com/?search=user-select | |
| appearance | -moz-appearance | ✅ Full support | https://caniuse.com/?search=appearance | |
| font-feature-settings | -moz-font-feature-settings | ✅ Full support | https://caniuse.com/?search=font-feature-settings | |
| hyphens | -moz-hyphens | ✅ Full support | https://caniuse.com/?search=hyphens | |
| ::placeholder | ::-moz-placeholder | ✅ Full support | https://caniuse.com/?search=placeholder | |
| :placeholder-shown | :-moz-placeholder-shown | ✅ Full support | https://caniuse.com/?search=%3Aplaceholder-shown |
Decision
- Due to the above points we have decided to disable the CSS auto-prefixing by default.
- In case it is still needed, to support older browsers or some special CSS property from the table above, it can still be activated via the config key
storefront.theme.auto_prefix_cssinStorefront/Resources/config/packages/storefront.yaml. However, we recommend to do a manual prefix inside the SCSS instead. - We will deprecate the auto-prefixing for v6.6.0 and only use SCSS compiling
- We do not consider the deactivation of the auto-prefixing as a hard breaking change because:
- Most prefixes are not needed due to current browser support.
- Some prefixes are for CSS properties which are no longer implemented and developed by browsers.
- Prefixes which are still valid are primarily cosmetic/appearance properties which are very unlikely to affect the Storefronts functionality.
Consequences
When compiling the themes SCSS with theme:compile, the vendor-prefixes are no longer applied by default to the all.css.
