Skip to content

Latest commit

 

History

History
103 lines (88 loc) · 13.9 KB

2023-04-03-disable-css-autoprefixer.md

File metadata and controls

103 lines (88 loc) · 13.9 KB
title date area tags
Disable the CSS autoprefixer in the Storefront by default
2023-04-03
storefront
css
autoprefixer
theme-compiler

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 <= 11

Current 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%20flex
display: inline-flex display: -webkit-inline-flex ✅ Full support https://caniuse.com/?search=display%3A%20inline-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%20inline-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_css in Storefront/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.