Description
I’m not 100% sure we’re using autoprefixer as intended. The prefixes are generated correctly for /dist when I condense the mixin down to just min-resolution, but NOT for /package.
Examples
src file with mixin condensed to just min-resolution, with $ratio
expected behaviour: autoprefixer adds the additional prefixes needed
actual behaviour: prefixes not generated
src file:
@mixin govuk-device-pixel-ratio($ratio: 2) {
@media only screen and (min-resolution: #{($ratio*96)}dpi),
only screen and (min-resolution: #{$ratio}dppx) {
@content;
}
}
generated package:
@mixin govuk-device-pixel-ratio($ratio: 2) {
@media only screen and (min-resolution: #{($ratio*96)}dpi),
only screen and (min-resolution: #{$ratio}dppx) {
@content;
}
}
The expected behaviour works ok when we remove the $ratio variable and include a hardcoded number instead
src file (hardcoded numbers):
# Condensed mixin to just min-resolution, with fixed number instead of $ratio
@mixin govuk-device-pixel-ratio() {
@media only screen and (min-resolution: 2dpi),
only screen and (min-resolution: 2dppx) {
@content;
}
}
generated package:
@mixin govuk-device-pixel-ratio() {
@media only screen and (-webkit-min-device-pixel-ratio: 0.020833333333333332),
only screen and (min-resolution: 2dpi),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 2dppx) {
@content;
}
}
It looks like it’s tripped up by the use of the $ratio variable. When I raised this as an issue, it's suggested we're not using autoprefixer as intended (on CSS rather than on SCSS): postcss/autoprefixer#1355. Not sure where else we’re relying on autoprefixer, but we may want to check/revisit our use of it