Skip to content

Commit 2fb0b25

Browse files
committed
refactor(cdk/overlay): use index files for public Sass API instead of copying files out
Currently we copy out a few of the CDK .scss files to the root of the `cdk` package so that they're more convenient to consume. The problem with this is that it prevents us from importing other Sass files, because the import path will be wrong after the files are copied (see #22043). These changes rename the files to `_index.scss` which will allow users to maintain the same import paths while allowing us to remove the file copying logic and not having to worry about import paths.
1 parent b8d83cb commit 2fb0b25

File tree

80 files changed

+108
-116
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

80 files changed

+108
-116
lines changed

src/cdk/BUILD.bazel

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,15 +17,7 @@ ts_library(
1717
# to make it easier for developers to import these styles without needing to know about
1818
# deep imports in the release output. Note that this is done for backwards compatibility
1919
# with the Gulp release output. TODO(devversion): consider removing this in the future.
20-
rerootedStyles = [file for target in CDK_ENTRYPOINTS_WITH_STYLES for file in [
21-
[
22-
"_%s.scss" % target,
23-
target,
24-
],
25-
[
26-
"_%s.import.scss" % target,
27-
target,
28-
],
20+
prebuiltStyles = [file for target in CDK_ENTRYPOINTS_WITH_STYLES for file in [
2921
[
3022
"%s-prebuilt.css" % target,
3123
target,
@@ -34,20 +26,20 @@ rerootedStyles = [file for target in CDK_ENTRYPOINTS_WITH_STYLES for file in [
3426

3527
# Create genrules which re-root stylesheets from secondary entry-points.
3628
[genrule(
37-
name = "%s_rerooted" % file,
29+
name = "%s_prebuilt" % file,
3830
srcs = ["//src/cdk/%s:%s" % (target, file)],
3931
outs = [file],
4032
cmd = "cp $< $@",
4133
) for [
4234
file,
4335
target,
44-
] in rerootedStyles]
36+
] in prebuiltStyles]
4537

4638
# List of targets which generate the re-rooted stylesheet files.
47-
rerootedStyleTargets = ["%s_rerooted" % file for [
39+
prebuiltStyleTargets = ["%s_prebuilt" % file for [
4840
file,
4941
_,
50-
] in rerootedStyles]
42+
] in prebuiltStyles]
5143

5244
# Makes the public Sass API bundle available in the release output as `angular/cdk`.
5345
sass_library(
@@ -59,7 +51,7 @@ sass_library(
5951
ng_package(
6052
name = "npm_package",
6153
srcs = ["package.json"],
62-
data = [":sass_index"] + rerootedStyleTargets + CDK_SCSS_LIBS,
54+
data = [":sass_index"] + prebuiltStyleTargets + CDK_SCSS_LIBS,
6355
entry_point = ":public-api.ts",
6456
nested_packages = [
6557
"//src/cdk/schematics:npm_package",

src/cdk/_index.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@forward './overlay/overlay' show overlay;
2-
@forward './a11y/a11y' show a11y-visually-hidden, high-contrast;
3-
@forward './text-field/text-field' show text-field-autosize, text-field-autofill,
1+
@forward './overlay' show overlay;
2+
@forward './a11y' show a11y-visually-hidden, high-contrast;
3+
@forward './text-field' show text-field-autosize, text-field-autofill,
44
text-field-autofill-color;

src/cdk/a11y/_a11y.import.scss

Lines changed: 0 additions & 2 deletions
This file was deleted.

src/cdk/a11y/_index.import.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@forward 'index' hide a11y, high-contrast;
2+
@forward 'index' as cdk-* hide cdk-optionally-nest-content;
File renamed without changes.

src/cdk/a11y/a11y-prebuilt.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
@use './a11y';
1+
@use './index' as a11y;
22

33
@include a11y.a11y-visually-hidden();

src/cdk/overlay/_index.import.scss

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@forward '../a11y' as cdk-*;
2+
@forward 'index' hide $dark-backdrop-background, $z-index-overlay, $z-index-overlay-backdrop,
3+
$z-index-overlay-container, overlay;
4+
@forward 'index' as cdk-* hide $cdk-backdrop-animation-duration,
5+
$cdk-backdrop-animation-timing-function, $cdk-dark-backdrop-background;
6+
@forward 'index' as cdk-overlay-* hide $cdk-overlay-backdrop-animation-duration,
7+
$cdk-overlay-backdrop-animation-timing-function, $cdk-overlay-z-index-overlay,
8+
$cdk-overlay-z-index-overlay-backdrop, $cdk-overlay-z-index-overlay-container, cdk-overlay-overlay;
9+
10+
@import '../a11y';
File renamed without changes.

src/cdk/overlay/_overlay.import.scss

Lines changed: 0 additions & 10 deletions
This file was deleted.

src/cdk/overlay/overlay-prebuilt.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
@use './overlay';
1+
@use './index' as overlay;
22

33
@include overlay.overlay();

src/cdk/text-field/_index.import.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@forward 'index' as cdk-* show cdk-text-field-autofill, cdk-text-field-autofill-color,
2+
cdk-text-field-autosize, cdk-text-field;
File renamed without changes.

src/cdk/text-field/_text-field.import.scss

Lines changed: 0 additions & 2 deletions
This file was deleted.
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use 'text-field';
1+
@use 'index' as text-field;
22

33
@include text-field.text-field-autosize();
44
@include text-field.text-field-autofill();

src/dev-app/input/input-demo.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use '../../cdk/text-field/text-field';
1+
@use '../../cdk/text-field';
22

33
.demo-basic {
44
padding: 0;

src/dev-app/mdc-input/mdc-input-demo.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use '../../cdk/text-field/text-field';
1+
@use '../../cdk/text-field';
22

33
.demo-basic {
44
padding: 0;

src/material-experimental/mdc-autocomplete/autocomplete.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use '@material/menu-surface/mixins' as mdc-menu-surface;
22
@use '@material/list/mixins' as mdc-list;
3-
@use '../../cdk/a11y/a11y';
3+
@use '../../cdk/a11y';
44
@use '../mdc-helpers/mdc-helpers';
55

66
@include mdc-menu-surface.core-styles($query: structure);

src/material-experimental/mdc-button/button.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use '@material/button/button' as mdc-button;
22
@use '@material/button/variables' as mdc-button-variables;
33
@use '../mdc-helpers/mdc-helpers';
4-
@use '../../cdk/a11y/a11y';
4+
@use '../../cdk/a11y';
55
@use '_button-base';
66

77

src/material-experimental/mdc-checkbox/checkbox.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
@use '@material/form-field' as mdc-form-field;
44
@use '@material/ripple' as mdc-ripple;
55
@use 'sass:map';
6-
@use '../../cdk/a11y/a11y';
6+
@use '../../cdk/a11y';
77
@use '../mdc-helpers/mdc-helpers';
88
@use '../../material/core/style/_layout-common.scss';
99

src/material-experimental/mdc-chips/chips.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use '@material/chips/deprecated' as mdc-chips;
22
@use '@material/ripple' as mdc-ripple;
33
@use '../../material/core/style/layout-common';
4-
@use '../../cdk/a11y/a11y';
4+
@use '../../cdk/a11y';
55
@use '../mdc-helpers/mdc-helpers';
66

77
@include mdc-chips.without-ripple($query: mdc-helpers.$mat-base-styles-query);

src/material-experimental/mdc-core/option/option.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@use 'sass:map';
33
@use '../../mdc-helpers/mdc-helpers';
44
@use '../../../material/core/style/vendor-prefixes';
5-
@use '../../../cdk/a11y/a11y';
5+
@use '../../../cdk/a11y';
66
@use '../../../material/core/style/layout-common';
77

88
.mat-mdc-option {

src/material-experimental/mdc-dialog/dialog.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use '@material/dialog' as mdc-dialog;
22
@use '../mdc-helpers/mdc-helpers';
33
@use './mdc-dialog-structure-overrides';
4-
@use '../../cdk/a11y/a11y';
4+
@use '../../cdk/a11y';
55

66
// Dialog content max height. This has been copied from the standard dialog
77
// and is needed to make the dialog content scrollable.
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
@forward '../../material/core/theming/theming.import';
2-
@forward '../../cdk/a11y/a11y.import';
2+
@forward '../../cdk/a11y/index.import';
33
@forward 'form-field-native-select' hide private-form-field-native-select,
44
private-form-field-native-select-color;
55
@forward 'form-field-native-select' as mat-mdc-* hide $mat-mdc-mat-form-field-select-arrow-height,
66
$mat-mdc-mat-form-field-select-arrow-width, $mat-mdc-mat-form-field-select-horizontal-end-padding;
77

88
@import '../../material/core/theming/theming';
9-
@import '../../cdk/a11y/a11y';
9+
@import '../../cdk/a11y';

src/material-experimental/mdc-form-field/_form-field-native-select.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use 'sass:map';
22
@use '../../material/core/theming/theming';
3-
@use '../../cdk/a11y/a11y';
3+
@use '../../cdk/a11y';
44
@use '../../material/core/theming/palette';
55

66
// Width of the Material Design form-field select arrow.

src/material-experimental/mdc-form-field/_form-field-theme.import.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde
2020
@forward 'form-field-density' as mat-mdc-*;
2121
@forward 'form-field-subscript' as mat-mdc-*;
2222
@forward 'form-field-focus-overlay' as mat-mdc-*;
23-
@forward '../../cdk/a11y/a11y.import';
23+
@forward '../../cdk/a11y/index.import';
2424
@forward 'form-field-theme' hide color, density, theme, typography;
2525
@forward 'form-field-theme' as mat-mdc-form-field-* hide mat-mdc-form-field-text-field-color-styles;
2626

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@forward 'form-field-sizing';
2-
@forward '../../cdk/a11y/a11y.import';
2+
@forward '../../cdk/a11y/index.import';
33
@forward 'mdc-text-field-structure-overrides' as mat-mdc-*;
44

55
@import 'form-field-sizing';
6-
@import '../../cdk/a11y/a11y';
6+
@import '../../cdk/a11y';

src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use 'form-field-sizing';
2-
@use '../../cdk/a11y/a11y';
2+
@use '../../cdk/a11y';
33

44
// Mixin that can be included to override the default MDC text-field
55
// styles to fit our needs. See individual comments for context on why

src/material-experimental/mdc-menu/menu.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
@use '@material/list' as mdc-list;
44
@use '../../material/core/style/menu-common';
55
@use '../../material/core/style/button-common';
6-
@use '../../cdk/a11y/a11y';
6+
@use '../../cdk/a11y';
77
@use '../mdc-helpers/mdc-helpers';
88

99
@include mdc-menu-surface.core-styles($query: structure);

src/material-experimental/mdc-paginator/paginator.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use '../mdc-form-field/form-field-theme';
2-
@use '../../cdk/a11y/a11y';
2+
@use '../../cdk/a11y';
33

44
$padding: 0 8px;
55
$page-size-margin-right: 8px;

src/material-experimental/mdc-radio/radio.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@use '@material/radio/radio-theme' as mdc-radio-theme;
33
@use '@material/form-field' as mdc-form-field;
44
@use '../mdc-helpers/mdc-helpers';
5-
@use '../../cdk/a11y/a11y';
5+
@use '../../cdk/a11y';
66
@use '../../material/core/style/layout-common';
77

88
@include mdc-radio.without-ripple($query: mdc-helpers.$mat-base-styles-query);

src/material-experimental/mdc-select/select.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@use '@material/list' as mdc-list;
33
@use '../../material/core/style/variables';
44
@use '../../material/core/style/vendor-prefixes';
5-
@use '../../cdk/a11y/a11y';
5+
@use '../../cdk/a11y';
66

77
$mat-select-arrow-size: 5px !default;
88
$mat-select-arrow-margin: 4px !default;

src/material-experimental/mdc-slide-toggle/slide-toggle.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@use 'sass:map';
55
@use '../mdc-helpers/mdc-helpers';
66
@use '../../material/core/style/layout-common';
7-
@use '../../cdk/a11y/a11y';
7+
@use '../../cdk/a11y';
88

99
@include mdc-switch.without-ripple($query: mdc-helpers.$mat-base-styles-query);
1010
@include mdc-form-field.core-styles($query: mdc-helpers.$mat-base-styles-query);

src/material-experimental/mdc-slider/slider.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// TODO: disabled until we implement the new MDC slider.
22
// @use '@material/slider' as mdc-slider;
33
@use '../mdc-helpers/mdc-helpers';
4-
@use '../../cdk/a11y/a11y';
4+
@use '../../cdk/a11y';
55

66
$mat-slider-min-size: 128px !default;
77
$mat-slider-horizontal-margin: 8px !default;

src/material-experimental/mdc-snack-bar/snack-bar-container.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use '@material/snackbar' as mdc-snackbar;
22
@use '../mdc-helpers/mdc-helpers';
3-
@use '../../cdk/a11y/a11y';
3+
@use '../../cdk/a11y';
44

55
@include mdc-snackbar.core-styles($query: mdc-helpers.$mat-base-styles-query);
66

src/material-experimental/mdc-tabs/_tabs-common.import.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
@forward '../mdc-helpers/mdc-helpers.import';
33
@forward '../mdc-helpers/mdc-helpers';
44
@forward '../../material/core/style/vendor-prefixes.import';
5-
@forward '../../cdk/a11y/a11y.import';
5+
@forward '../../cdk/a11y/index.import';
66
@forward 'tabs-common' hide paginated-tab-header, paginated-tab-header-container,
77
paginated-tab-header-item-wrapper, tab, tab-ripple;
88
@forward 'tabs-common' as mat-mdc-* hide $mat-mdc-mat-tab-animation-duration;
99

1010
@import '../../material/core/style/variables';
1111
@import '../../material/core/style/private';
1212
@import '../../material/core/style/vendor-prefixes';
13-
@import '../../cdk/a11y/a11y';
13+
@import '../../cdk/a11y';
1414
@import '../mdc-helpers/mdc-helpers';

src/material-experimental/mdc-tabs/_tabs-common.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@use '../../material/core/style/variables';
55
@use '../../material/core/style/private';
66
@use '../../material/core/style/vendor-prefixes';
7-
@use '../../cdk/a11y/a11y';
7+
@use '../../cdk/a11y';
88
@use '../mdc-helpers/mdc-helpers';
99

1010
$mat-tab-animation-duration: 500ms !default;

src/material-experimental/popover-edit/_popover-edit.import.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@forward '../../material/core/style/private.import';
22
@forward '../../material/core/theming/theming.import';
3-
@forward '../../cdk/a11y/a11y.import';
3+
@forward '../../cdk/a11y/index.import';
44
@forward '../../material/core/typography/typography-utils.import';
55
@forward 'popover-edit' hide color, density, theme, typography;
66
@forward 'popover-edit' as mat-popover-edit-* hide
77
mat-popover-edit-mat-edit-hover-content-background;
88

9-
@import '../../cdk/a11y/a11y';
9+
@import '../../cdk/a11y';
1010
@import '../../material/core/style/variables';
1111
@import '../../material/core/style/private';
1212
@import '../../material/core/theming/palette';

src/material-experimental/popover-edit/_popover-edit.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use 'sass:map';
2-
@use '../../cdk/a11y/a11y';
2+
@use '../../cdk/a11y';
33
@use '../../material/core/style/variables';
44
@use '../../material/core/style/private';
55
@use '../../material/core/theming/palette';

src/material/autocomplete/autocomplete.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use '../core/style/menu-common';
2-
@use '../../cdk/a11y/a11y';
2+
@use '../../cdk/a11y';
33

44
// The max-height of the panel, currently matching mat-select value.
55
$panel-max-height: 256px !default;
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@forward '../core/theming/theming.import';
22
@forward '../core/typography/typography-utils.import';
3-
@forward '../../cdk/a11y/a11y.import';
3+
@forward '../../cdk/a11y/index.import';
44
@forward 'badge-theme' hide $default-size, $font-size, $font-weight, $large-size, $small-size,
55
color, theme, typography;
66
@forward 'badge-theme' as mat-badge-* hide mat-badge-density, mat-badge-size;
77

88
@import '../core/theming/palette';
99
@import '../core/theming/theming';
1010
@import '../core/typography/typography-utils';
11-
@import '../../cdk/a11y/a11y';
11+
@import '../../cdk/a11y';

src/material/badge/_badge-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
@use '../core/theming/theming';
99
@use '../core/typography/typography';
1010
@use '../core/typography/typography-utils';
11-
@use '../../cdk/a11y/a11y';
11+
@use '../../cdk/a11y';
1212

1313
$font-size: 12px;
1414
$font-weight: 600;

src/material/bottom-sheet/bottom-sheet-container.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use '../../cdk/a11y/a11y';
1+
@use '../../cdk/a11y';
22

33
// The bottom sheet minimum width on larger screen sizes is based
44
// on increments of the toolbar, according to the spec. See:

src/material/button-toggle/_button-toggle-theme.import.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22
@forward '../core/theming/theming.import';
33
@forward '../core/density/private/compatibility.import';
44
@forward 'button-toggle-variables' as mat-button-toggle-*;
5-
@forward '../../cdk/a11y/a11y.import';
5+
@forward '../../cdk/a11y/index.import';
66
@forward '../core/typography/typography-utils.import';
77
@forward 'button-toggle-theme' as mat-button-toggle-*;
88

9-
@import '../../cdk/a11y/a11y';
9+
@import '../../cdk/a11y';
1010
@import '../core/style/private';
1111
@import '../core/theming/palette';
1212
@import '../core/theming/theming';

src/material/button-toggle/_button-toggle-theme.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use 'sass:map';
2-
@use '../../cdk/a11y/a11y';
2+
@use '../../cdk/a11y';
33
@use '../core/style/private';
44
@use '../core/theming/palette';
55
@use '../core/theming/theming';

src/material/button-toggle/button-toggle.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use '../core/style/vendor-prefixes';
22
@use '../core/style/layout-common';
3-
@use '../../cdk/a11y/a11y';
3+
@use '../../cdk/a11y';
44

55
$standard-padding: 0 12px !default;
66
$standard-border-radius: 4px !default;

src/material/button/button.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// TODO(jelbourn): Figure out if anchor hover underline actually happens in any browser.
33
@use 'button-base';
44
@use '../core/style/layout-common';
5-
@use '../../cdk/a11y/a11y';
5+
@use '../../cdk/a11y';
66

77
.mat-button, .mat-icon-button {
88
.mat-button-focus-overlay {

0 commit comments

Comments
 (0)