From ddd9b5a1ee96ed638fae59244dee5d25694e07d1 Mon Sep 17 00:00:00 2001 From: Tobias Bieniek Date: Tue, 29 Nov 2022 11:44:00 +0100 Subject: [PATCH] Use `:root` prefix to ensure correct `background-image` paths (#506) Using embroider does not appear to use the same CSS import order as a regular Ember CLI build, and we haven't found a way to enforce it. While using `:root` to increase the specificity is certainly not great, it is probably better than using `!important` and appears to be the best workaround for now until we can find a better solution. --- vendor/ember-phone-input.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/vendor/ember-phone-input.css b/vendor/ember-phone-input.css index c2f533fd..fc58401d 100644 --- a/vendor/ember-phone-input.css +++ b/vendor/ember-phone-input.css @@ -1,4 +1,5 @@ -.iti__flag { +/* Using `:root` prefix here to increase the specificity to avoid a CSS import order bug when using embroider */ +:root .iti__flag { background-image: url('ember-phone-input/images/flags.png'); } @@ -8,7 +9,7 @@ only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { - .iti__flag { + :root .iti__flag { background-image: url('ember-phone-input/images/flags@2x.png'); } }