Skip to content

Commit efc0f9e

Browse files
authored
fix(cdk/overlay): resolve regression when overlay is imported through shorthand path (#22043)
Fixes a regression caused by #21896 where importing the overlay styles through `~@angular/cdk/overlay` would result in a compilation error.
1 parent 56a9fc3 commit efc0f9e

File tree

2 files changed

+8
-7
lines changed

2 files changed

+8
-7
lines changed

src/cdk/a11y/_a11y.scss

+2
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,8 @@
6060
$selector-context: #{&};
6161

6262
@if ($encapsulation != 'on') {
63+
// Note that if this selector is updated, the same change has to be made inside
64+
// `_overlay.scss` which can't depend on this mixin due to some infrastructure limitations.
6365
.cdk-high-contrast-#{$target} {
6466
@include _cdk-optionally-nest-content($selector-context) {
6567
@content;

src/cdk/overlay/_overlay.scss

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@use '../a11y/a11y';
2-
31
// We want overlays to always appear over user content, so set a baseline
42
// very high z-index for the overlay container, which is where we create the new
53
// stacking context for all overlays.
@@ -82,11 +80,12 @@ $backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
8280
&.cdk-overlay-backdrop-showing {
8381
opacity: 1;
8482

85-
// In high contrast mode the rgba background will become solid so we need to fall back
86-
// to making it opaque using `opacity`. Note that we can't use the `cdk-high-contrast`
87-
// mixin, because we can't normalize the import path to the _a11y.scss both for the
88-
// source and when this file is distributed. See #10908.
89-
@include a11y.high-contrast(active, off) {
83+
// Note that we can't import and use the `high-contrast` mixin from `_a11y.scss`, because
84+
// this file will be copied to the top-level `cdk` package when putting together the files
85+
// for npm. Any relative import paths we use here will become invalid once the file is copied.
86+
.cdk-high-contrast-active & {
87+
// In high contrast mode the rgba background will become solid
88+
// so we need to fall back to making it opaque using `opacity`.
9089
opacity: 0.6;
9190
}
9291
}

0 commit comments

Comments
 (0)