feat(theme): Added validation mixin to validate provided theme config…

…uration keys

This mixin is used to validate provided theme configuration inside theme() mixin
implementation.

PiperOrigin-RevId: 345511907

packages/mdc-theme/_theme.scss

@@ -180,3 +180,39 @@
     );
   }
 }
+
+/// Validates keys in provided theme configuration by comparing with original
+/// theme configuration.
+/// Use this in component's `theme()` mixin implementation to validate if
+/// provided theme configuration has supported theme configuration keys.
+/// @param {Map} $origin-theme Original theme configuration in Sass map format
+///     that has all supported keys.
+/// @param {Map} $custom-theme Provided theme configuration in Sass map format
+///     that should be validated against `$origin-theme`.
+/// @examples
+///     @mixin theme($theme) {
+///       @include theme.validate-keys($light-theme, $theme);
+///
+///       // ...
+///     }
+@mixin validate-keys($origin-theme, $custom-theme, $test-only: false) {
+  $origin-keys: map.keys($origin-theme);
+  $custom-keys: map.keys($custom-theme);
+  $unsupported-keys: ();
+
+  @each $key in $custom-keys {
+    @if (not list.index($origin-keys, $key)) {
+      $unsupported-keys: list.append($unsupported-keys, $key);
+    }
+  }
+
+  @if list.length($unsupported-keys) > 0 {
+    $error-message: 'Unsupported keys found: #{$unsupported-keys}. Expected one of: #{$origin-keys}.';
+
+    @if $test-only {
+      content: $error-message;
+    } @else {
+      @error $error-message;
+    }
+  }
+}

packages/mdc-theme/test/theme-validate-keys.test.scss

@@ -0,0 +1,45 @@
+@use '../theme';
+
+$origin-theme: (
+  one: 1,
+  two: '22',
+  three: 3px,
+  four: (
+    x: 1,
+    y: 2,
+  ),
+);
+
+// Should validate when subset of keys are provided.
+@include theme.validate-keys(
+  $origin-theme,
+  (
+    two: '22',
+    three: 3px,
+  )
+);
+
+// Should validate when theme configuration is empty.
+@include theme.validate-keys($origin-theme, ());
+
+// Should validate when nested theme keys are provided.
+@include theme.validate-keys(
+  $origin-theme,
+  (
+    four: (
+      x: 11,
+      y: 22,
+    ),
+  )
+);
+
+// Should throw error when unsupported key (i.e., foobar) is provided.
+.test {
+  @include theme.validate-keys(
+    $origin-theme,
+    (
+      foobar: 66px,
+    ),
+    $test-only: true
+  );
+}

packages/mdc-theme/test/theme.scss.test.ts

@@ -76,4 +76,11 @@ describe('theme.test.scss', () => {
     expect(css).toContain('--mdc-theme-primary: teal');
     expect(css).toContain('--mdc-theme-secondary: crimson');
   });
+
+  it('validate-keys Should throw error when unsupported key is provided',
+     () => {
+       const filePath = path.join(__dirname, 'theme-validate-keys.test.css');
+       const css = fs.readFileSync(filePath, 'utf8').trim();
+       expect(css).toContain('Unsupported keys found: foobar.');
+     });
 });