feat(theme): add validation option to disallow custom properties

PiperOrigin-RevId: 354349315

Author: asyncLiz

packages/mdc-theme/_custom-properties.scss

@@ -21,6 +21,7 @@
 //
 @use 'sass:map';
 @use 'sass:meta';
+@use 'sass:string';
 @use './css';
 @use './gss';
 
@@ -32,6 +33,11 @@
   @return meta.type-of($value) == 'map' and map.has-key($value, 'varname');
 }
 
+@function is-custom-prop-string($value) {
+  @return meta.type-of($value) == 'string' and string.slice($value, 1, 4) ==
+    'var(';
+}
+
 /// Returns true if $prop1's varname and fallback values are deeply equal to
 /// $prop2's varname and fallback values.
 ///

packages/mdc-theme/_theme.scss

@@ -177,9 +177,9 @@
 /// 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
+/// @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
+/// @param {Map} $custom-theme - Provided theme configuration in Sass map format
 ///     that should be validated against `$origin-theme`.
 /// @examples
 ///     @mixin theme($theme) {
@@ -189,12 +189,26 @@
 ///     }
 @mixin validate-keys($origin-theme, $custom-theme, $test-only: false) {
   $origin-keys: map.keys($origin-theme);
-  $custom-keys: map.keys($custom-theme);
   $unsupported-keys: ();
+  $unsupported-custom-prop-keys: ();
 
-  @each $key in $custom-keys {
+  @each $key, $value in $custom-theme {
     @if (not list.index($origin-keys, $key)) {
-      $unsupported-keys: list.append($unsupported-keys, $key);
+      $unsupported-keys: list.append(
+        $unsupported-keys,
+        $key,
+        $separator: comma
+      );
+    }
+
+    $is-prop: custom-properties.is-custom-prop($value) or
+      custom-properties.is-custom-prop-string($value);
+    @if $is-prop {
+      $unsupported-custom-prop-keys: list.append(
+        $unsupported-custom-prop-keys,
+        $key,
+        $separator: comma
+      );
     }
   }
 
@@ -207,4 +221,14 @@
       @error $error-message;
     }
   }
+
+  @if list.length($unsupported-custom-prop-keys) > 0 {
+    $error-message: 'Custom properties are not supported for theme map keys: #{$unsupported-custom-prop-keys}';
+
+    @if $test-only {
+      content: $error-message;
+    } @else {
+      @error $error-message;
+    }
+  }
 }

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

@@ -43,3 +43,19 @@ $origin-theme: (
     $test-only: true
   );
 }
+
+// Should throw error when custom properties are provided
+.no-custom-props {
+  @include theme.validate-keys(
+    $origin-theme,
+    (
+      one: var(--one),
+      two: var(--two, 4px),
+      three: (
+        varname: --three,
+        fallback: teal,
+      ),
+    ),
+    $test-only: true
+  );
+}

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

@@ -87,4 +87,11 @@ describe('theme.test.scss', () => {
        const css = fs.readFileSync(filePath, 'utf8').trim();
        expect(css).toContain('Unsupported keys found: foobar.');
      });
+
+  it('validate-keys Should throw error when custom properties are provided', () => {
+    const filePath = path.join(__dirname, 'theme-validate-keys.test.css');
+    const css = fs.readFileSync(filePath, 'utf8').trim();
+    expect(css).toContain(
+        'Custom properties are not supported for theme map keys: one, two, three');
+  });
 });