feat(compiler): add config.modes to validate mode-keyed styleUrls/styles

[johnjenkins]

What is the current behavior?

GitHub Issue Number: #3183

What is the new behavior?

Closes #3183

Adds an opt-in modes entry to stencil.config.ts. When set, the compiler validates that mode keys used in @Component({ styleUrls / styles }) match a declared allowlist, catching typos at build time instead of silently producing a style that never applies at runtime. Entries can also be marked required, enforcing that every component using mode-keyed styles supplies that mode.

Usage

// stencil.config.ts
export const config: Config = {
  modes: ['ios', { mode: 'md', required: true }],
};

// ✅ valid
@Component({
  tag: 'my-button',
  styleUrls: { ios: 'my-button.ios.css', md: 'my-button.md.css' },
})
export class MyButton {}

// ❌ compile error: Invalid mode "tyop" in "styleUrls". Valid modes are: ios, md.
@Component({
  tag: 'my-button',
  styleUrls: { ios: 'my-button.ios.css', tyop: 'my-button.tyop.css' },
})
export class MyButton {}

// ❌ compile error: Missing required mode: md.
@Component({
  tag: 'my-button',
  styleUrls: { ios: 'my-button.ios.css' },
})
export class MyButton {}

Documentation

Does this introduce a breaking change?

• Yes
• No

Testing

Other information