build: add exports entries for Sass module resolution

Adds the `exports` field for module resolution of `@angular/cdk`
and `@angular/material` when Sass is requested.

Since these packages use the `exports` field already, to prevent
deep imports, we also need to expose the Sass entry-points and prebuilt
files. The webpack loader requires the `sass` conditional to be set
when the CDK or Material modules are loaded without the `includePaths` option.

It is worth noting that the Sass webpack loader does not seem to respect
the exports field when `@import` is used. Still for consistency and
other potential bundlers/loaders, we will expose the `.css` extension
subpaths. Also as a side-note: the `.css` extension imports do not
work with `@use`, so the non-extension variants are helpful there for
backwards compatibility & convenient access.

Author: devversion

package.json

@@ -50,12 +50,12 @@
   },
   "version": "13.0.0-next.7",
   "dependencies": {
-    "@angular/animations": "13.0.0-next.12",
-    "@angular/common": "13.0.0-next.12",
-    "@angular/compiler": "13.0.0-next.12",
-    "@angular/core": "13.0.0-next.12",
-    "@angular/forms": "13.0.0-next.12",
-    "@angular/platform-browser": "13.0.0-next.12",
+    "@angular/animations": "13.0.0-next.15",
+    "@angular/common": "13.0.0-next.15",
+    "@angular/compiler": "13.0.0-next.15",
+    "@angular/core": "13.0.0-next.15",
+    "@angular/forms": "13.0.0-next.15",
+    "@angular/platform-browser": "13.0.0-next.15",
     "@types/google.maps": "^3.45.6",
     "@types/youtube": "^0.0.42",
     "core-js-bundle": "^3.8.2",
@@ -69,13 +69,13 @@
     "@angular-devkit/build-optimizer": "0.1300.0-next.7",
     "@angular-devkit/core": "13.0.0-next.7",
     "@angular-devkit/schematics": "13.0.0-next.7",
-    "@angular/bazel": "13.0.0-next.12",
-    "@angular/compiler-cli": "13.0.0-next.12",
+    "@angular/bazel": "13.0.0-next.15",
+    "@angular/compiler-cli": "13.0.0-next.15",
     "@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#e674228281ff6ac4d21779070b090e8a8bde9e69",
-    "@angular/localize": "13.0.0-next.12",
-    "@angular/platform-browser-dynamic": "13.0.0-next.12",
-    "@angular/platform-server": "13.0.0-next.12",
-    "@angular/router": "13.0.0-next.12",
+    "@angular/localize": "13.0.0-next.15",
+    "@angular/platform-browser-dynamic": "13.0.0-next.15",
+    "@angular/platform-server": "13.0.0-next.15",
+    "@angular/router": "13.0.0-next.15",
     "@axe-core/webdriverjs": "^4.1.0",
     "@babel/core": "^7.13.10",
     "@babel/traverse": "^7.13.0",

src/cdk/config.bzl

@@ -30,6 +30,8 @@ CDK_TARGETS = ["//src/cdk"] + ["//src/cdk/%s" % ep for ep in CDK_ENTRYPOINTS]
 # Within the CDK, only a few targets have sass libraries which need to be
 # part of the release package. This list declares all CDK targets with sass
 # libraries that need to be included and re-exported at the package root.
+# **Note**: When updating the list of CDK entry-points with styles, also update
+# the `exports` field in the `cdk/package.json` file.
 CDK_ENTRYPOINTS_WITH_STYLES = [
     "a11y",
     "overlay",

src/cdk/package.json

@@ -18,6 +18,17 @@
     "url": "https://github.com/angular/components/issues"
   },
   "homepage": "https://github.com/angular/components#readme",
+  "exports": {
+    ".": {
+      "sass": "./_index.scss"
+    },
+    "./a11y-prebuilt.css": {"style": "./a11y-prebuilt.css"},
+    "./a11y-prebuilt": {"style": "./a11y-prebuilt.css"},
+    "./overlay-prebuilt.css": {"style": "./overlay-prebuilt.css"},
+    "./overlay-prebuilt": {"style": "./overlay-prebuilt.css"},
+    "./text-field-prebuilt.css": {"style": "./text-field-prebuilt.css"},
+    "./text-field-prebuilt": {"style": "./text-field-prebuilt.css"}
+  },
   "peerDependencies": {
     "@angular/core": "0.0.0-NG",
     "@angular/common": "0.0.0-NG",

src/material-experimental/package.json

@@ -11,6 +11,17 @@
     "url": "https://github.com/angular/components/issues"
   },
   "homepage": "https://github.com/angular/components#readme",
+  "exports": {
+    ".": {
+      "sass": "./_index.scss"
+    },
+    "./mdc-theming/prebuilt/indigo-pink.css": {
+      "style": "./mdc-theming/prebuilt/indigo-pink.css"
+    },
+    "./mdc-theming/prebuilt/*": {
+      "style": "./mdc-theming/prebuilt/*.css"
+    }
+  },
   "peerDependencies": {
     "@angular/core": "0.0.0-NG",
     "@angular/material": "0.0.0-PLACEHOLDER",

src/material/package.json

@@ -17,6 +17,32 @@
     "url": "https://github.com/angular/components/issues"
   },
   "homepage": "https://github.com/angular/components#readme",
+  "exports": {
+    ".": {
+      "sass": "./_index.scss"
+    },
+    "./theming": {
+      "sass": "./_theming.scss"
+    },
+    "./_theming": {
+      "sass": "./_theming.scss"
+    },
+    "./prebuilt-themes/indigo-pink.css": {
+      "style": "./prebuilt-themes/indigo-pink.css"
+    },
+    "./prebuilt-themes/deeppurple-amber.css": {
+      "style": "./prebuilt-themes/deeppurple-amber.css"
+    },
+    "./prebuilt-themes/pink-bluegrey.css": {
+      "style": "./prebuilt-themes/pink-bluegrey.css"
+    },
+    "./prebuilt-themes/purple-green.css": {
+      "style": "./prebuilt-themes/purple-green.css"
+    },
+    "./prebuilt-themes/*": {
+      "style": "./prebuilt-themes/*.css"
+    }
+  },
   "peerDependencies": {
     "@angular/animations": "0.0.0-NG",
     "@angular/cdk": "0.0.0-PLACEHOLDER",

src/material/prebuilt-themes/BUILD.bazel

@@ -4,6 +4,9 @@ package(default_visibility = ["//visibility:public"])
 # package in the right spot. The *right* thing to do would be to move them, but
 # we would need to update references for Google apps.
 
+## **NOTE**: When adding/removing prebuilt themes from here, make sure to update
+# the `material/package.json` exports field.
+
 genrule(
     name = "indigo-pink",
     srcs = ["//src/material/core:theming/prebuilt/indigo-pink.css"],

tools/postinstall/apply-patches.js

@@ -14,7 +14,7 @@ const chalk = require('chalk');
  * Version of the post install patch. Needs to be incremented when
  * existing patches or edits have been modified.
  */
-const PATCH_VERSION = 11;
+const PATCH_VERSION = 13;
 
 /** Path to the project directory. */
 const projectDir = path.join(__dirname, '../..');