build: extract correct tokens set from core theme

The tokens extraction script assumes that all the imported tokens will be used in the `overrides` mixin. That's true for all themes, except for `core` which only supports some of the mixins. These changes add a separate function that `core` can use to tell the tokens extraction script about which tokens are supported.

Author: crisbeto

src/material/core/_core-theme.scss

@@ -71,15 +71,19 @@
   }
 }
 
-@mixin overrides($tokens: ()) {
+// This theme is a special case where not all of the imported tokens are supported in `overrides`.
+// To aid the docs token extraction, we have to pull the `overrides` token config out into a
+// separate function.
+// !!!Important!!! renaming or removal of this function requires the `extract-tokens.ts` script to
+// be updated as well.
+@function _get-supported-overrides-tokens() {
   $app-tokens: tokens-mat-app.get-token-slots();
   $ripple-tokens: tokens-mat-ripple.get-token-slots();
   $option-tokens: tokens-mat-option.get-token-slots();
   $full-pseudo-checkbox-tokens: tokens-mat-full-pseudo-checkbox.get-token-slots();
   $minimal-pseudo-checkbox-tokens: tokens-mat-minimal-pseudo-checkbox.get-token-slots();
 
-  @include token-utils.batch-create-token-values(
-    $tokens,
+  @return (
     (prefix: tokens-mat-app.$prefix, tokens: $app-tokens),
     (prefix: tokens-mat-ripple.$prefix, tokens: $ripple-tokens),
     (prefix: tokens-mat-option.$prefix, tokens: $option-tokens),
@@ -88,6 +92,10 @@
   );
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _get-supported-overrides-tokens()...);
+}
+
 // Mixin that renders all of the core styles that depend on the theme.
 @mixin theme($theme, $options...) {
   // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that

tools/extract-tokens/extract-tokens.ts

@@ -187,13 +187,35 @@ function getTokenExtractionCode(
 
   // Goes through all the available namespaces looking for a `$prefix` variable. This allows us to
   // determine the prefixes that are used within the theme. Once we know the prefixes we can use
-  // them to extract only the tokens we care about from the full token set.
+  // them to extract only the tokens we care about from the full token set. Note: `core-theme`
+  // is a special case where not all of the imported tokens are supported in the `overrides`
+  // mixin. Such cases will expose a `_get-supported-overrides-tokens` private function that
+  // can be used to determine the exact set of prefixes that are used.
   // After the tokens are extracted, we log them out using `@debug` and then intercept the log
   // in order to get the raw data. We have to go through `@debug`, because there's no way to
   // output a Sass map to CSS.
   // The tokens are encoded as JSON so we don't have to implement parsing of Sass maps in TS.
   const append = `
-    $__namespaces: (${useStatements.map(stmt => `"${extractNamespace(stmt)}"`).join(', ')});
+    $__prefixes: ();
+
+    @if ${meta}.function-exists('_get-supported-overrides-tokens') {
+      $__configs: _get-supported-overrides-tokens();
+
+      @each $config in $__configs {
+        $__prefixes: ${list}.append($__prefixes, ${map}.get($config, prefix));
+      }
+    } @else {
+      $__namespaces: (${useStatements.map(stmt => `"${extractNamespace(stmt)}"`).join(', ')});
+
+      @each $name in $__namespaces {
+        $prefix: ${map}.get(${meta}.module-variables($name), prefix);
+
+        @if ($prefix) {
+          $__prefixes: ${list}.append($__prefixes, $prefix);
+        }
+      }
+    }
+
     $__all-color: ${m3Tokens}.generate-color-tokens(light, ${palettes}.$azure-palette,
       ${palettes}.$azure-palette, ${palettes}.$azure-palette, 'sys');
     $__all-typography: ${m3Tokens}.generate-typography-tokens(font, 100, 100, 100, 100, 'sys');
@@ -204,15 +226,11 @@ function getTokenExtractionCode(
     $__density: ();
     $__base: ();
 
-    @each $name in $__namespaces {
-      $prefix: map-get(${meta}.module-variables($name), 'prefix');
-
-      @if ($prefix) {
-        $__color: ${map}.set($__color, $prefix, map-get($__all-color, $prefix));
-        $__typography: ${map}.set($__typography, $prefix, map-get($__all-typography, $prefix));
-        $__density: ${map}.set($__density, $prefix, map-get($__all-density, $prefix));
-        $__base: ${map}.set($__base, $prefix, map-get($__all-base, $prefix));
-      }
+    @each $prefix in $__prefixes {
+      $__color: ${map}.set($__color, $prefix, ${map}.get($__all-color, $prefix));
+      $__typography: ${map}.set($__typography, $prefix, ${map}.get($__all-typography, $prefix));
+      $__density: ${map}.set($__density, $prefix, ${map}.get($__all-density, $prefix));
+      $__base: ${map}.set($__base, $prefix, ${map}.get($__all-base, $prefix));
     }
 
     // Define our JSON.stringify implementation so it can be used below.