chore: Misc minor cleanup unused and duplicative code

Author: jkuelz

src/build/__tests__/css-vars.test.ts

@@ -87,9 +87,7 @@ test('generateReferenceTokenDefaults creates CSS variable declarations', () => {
 });
 
 test('resolveTheme with CSS variables returns CSS var() for reference tokens', () => {
-  const resolved = resolveTheme(testTheme, undefined, {
-    propertiesMap,
-  });
+  const resolved = resolveTheme(testTheme, undefined, propertiesMap);
 
   // Direct token takes precedence over reference token
   expect(resolved.colorPrimary500).toBe('#direct-primary-500');
@@ -115,9 +113,7 @@ test('resolveContext with CSS variables preserves var() references', () => {
     },
   };
 
-  const resolved = resolveContext(testTheme, context, undefined, undefined, {
-    propertiesMap,
-  });
+  const resolved = resolveContext(testTheme, context, undefined, undefined, propertiesMap);
 
   // Should resolve to CSS var since colorNeutral900 is a reference token
   expect(resolved.colorSecondary).toBe('var(--color-neutral-900)');
@@ -157,6 +153,4 @@ test('createBuildDeclarations with secondary theme generates reference token CSS
   // Should contain reference tokens from both primary and secondary themes
   expect(css).toContain('--color-primary-500');
   expect(css).toContain('[data-theme="dark"]');
-  // TODO: Reference tokens from secondary themes are not yet included in CSS generation
-  // expect(css).toContain('--color-error-100');
 });

src/shared/declaration/index.ts

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { mergeInPlace, Override, Theme, ResolveOptions } from '../theme';
+import { mergeInPlace, Override, Theme } from '../theme';
 import { flattenReferenceTokens, collectReferencedTokens } from '../theme/utils';
 import type { PropertiesMap, SelectorCustomizer } from './interfaces';
 import { RuleCreator } from './rule';
@@ -35,35 +35,58 @@ function createMinimalTheme(base: Theme, override: Override): Theme {
   return mergeInPlace(minimalTheme, override);
 }
 
+function collectAllRequiredTokens(
+  themes: Theme[],
+  initialTokens: string[]
+): { referenceTokens: string[]; referencedTokens: string[] } {
+  const referenceTokens: string[] = [];
+  themes.forEach((theme) => referenceTokens.push(...Object.keys(flattenReferenceTokens(theme))));
+
+  const alreadyIncluded = new Set([...initialTokens, ...referenceTokens]);
+  const referencedTokens: string[] = [];
+
+  themes.forEach((theme) => {
+    const referenced = collectReferencedTokens(theme, [...initialTokens, ...referenceTokens]);
+    referenced.forEach((token) => {
+      if (!alreadyIncluded.has(token)) {
+        referencedTokens.push(token);
+        alreadyIncluded.add(token);
+      }
+    });
+  });
+
+  return { referenceTokens, referencedTokens };
+}
+
+function addMissingTokensToTheme(theme: Theme, tokens: string[], sourceTheme: Theme): void {
+  tokens.forEach((token) => {
+    if (!(token in theme.tokens) && token in sourceTheme.tokens) {
+      theme.tokens[token] = sourceTheme.tokens[token];
+    }
+  });
+}
+
 export function createOverrideDeclarations(
   base: Theme,
   override: Override,
   propertiesMap: PropertiesMap,
   selectorCustomizer: SelectorCustomizer
 ): string {
   const minimalTheme = createMinimalTheme(base, override);
-  let usedTokens = Object.keys(minimalTheme.tokens);
-
-  const allReferencedTokens = collectReferencedTokens(base, usedTokens);
-  usedTokens = [...usedTokens, ...allReferencedTokens];
+  const initialTokens = Object.keys(minimalTheme.tokens);
 
+  const { referencedTokens } = collectAllRequiredTokens([base], initialTokens);
   // Add referenced tokens to minimalTheme so they get output in root
   // The transformer will remove them from mode/context selectors since they're unchanged
-  allReferencedTokens.forEach((token) => {
-    if (!(token in minimalTheme.tokens) && token in base.tokens) {
-      minimalTheme.tokens[token] = base.tokens[token];
-    }
-  });
+  addMissingTokensToTheme(minimalTheme, referencedTokens, base);
 
+  const usedTokens = [...initialTokens, ...referencedTokens];
   const ruleCreator = new RuleCreator(
     new Selector(selectorCustomizer),
     new UsedPropertyRegistry(propertiesMap, usedTokens)
   );
-  const stylesheetCreator = new SingleThemeCreator(minimalTheme, ruleCreator, base, { propertiesMap });
-  const stylesheet = stylesheetCreator.create();
-  const transformer = new MinimalTransformer();
-  const minimal = transformer.transform(stylesheet);
-  return minimal.toString();
+  const stylesheet = new SingleThemeCreator(minimalTheme, ruleCreator, base, propertiesMap).create();
+  return new MinimalTransformer().transform(stylesheet).toString();
 }
 
 export function createBuildDeclarations(
@@ -74,38 +97,13 @@ export function createBuildDeclarations(
   used: string[]
 ): string {
   const themes = [primary, ...secondary];
-  // Add reference tokens (from referenceTokens object)
-  const allReferenceTokens: string[] = [];
-  themes.forEach((theme: Theme) => {
-    const referenceTokens = flattenReferenceTokens(theme);
-    allReferenceTokens.push(...Object.keys(referenceTokens));
-  });
-
-  // Collect referenced leaf tokens (like colorWhite, colorGreyOpaque70)
-  const allReferencedTokens: string[] = [];
-  const alreadyIncluded = new Set([...used, ...allReferenceTokens]);
-
-  themes.forEach((theme: Theme) => {
-    const referenced = collectReferencedTokens(theme, [...used, ...allReferenceTokens]);
-    referenced.forEach((token) => {
-      if (!alreadyIncluded.has(token)) {
-        allReferencedTokens.push(token);
-        alreadyIncluded.add(token);
-      }
-    });
-  });
-
-  // Add allReferencedTokens to effectiveUsed so they get created in primary rule
-  // The transformer will remove them from mode rules since they're unchanged
-  const effectiveUsed = [...used, ...allReferenceTokens, ...allReferencedTokens];
+  const { referenceTokens, referencedTokens } = collectAllRequiredTokens(themes, used);
+  const usedTokens = [...used, ...referenceTokens, ...referencedTokens];
 
   const ruleCreator = new RuleCreator(
     new Selector(selectorCustomizer),
-    new UsedPropertyRegistry(propertiesMap, effectiveUsed)
+    new UsedPropertyRegistry(propertiesMap, usedTokens)
   );
-  const stylesheetCreator = new MultiThemeCreator([primary, ...secondary], ruleCreator, { propertiesMap });
-  const stylesheet = stylesheetCreator.create();
-  const transformer = new MinimalTransformer();
-  const minimal = transformer.transform(stylesheet);
-  return minimal.toString();
+  const stylesheet = new MultiThemeCreator(themes, ruleCreator, propertiesMap).create();
+  return new MinimalTransformer().transform(stylesheet).toString();
 }

src/shared/declaration/multi.ts

@@ -1,17 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { isGlobalSelector } from '../styles/selector';
-import {
-  defaultsReducer,
-  modeReducer,
-  OptionalState,
-  reduce,
-  resolveContext,
-  resolveTheme,
-  Theme,
-  ResolveOptions,
-} from '../theme';
-import { flattenReferenceTokens } from '../theme/utils';
+import { defaultsReducer, modeReducer, OptionalState, reduce, resolveContext, resolveTheme, Theme } from '../theme';
+import type { PropertiesMap } from './interfaces';
 import { AbstractCreator } from './abstract';
 import type { StylesheetCreator } from './interfaces';
 import { RuleCreator, SelectorConfig } from './rule';
@@ -26,13 +17,13 @@ import { compact } from './utils';
 export class MultiThemeCreator extends AbstractCreator implements StylesheetCreator {
   themes: Theme[];
   ruleCreator: RuleCreator;
-  options?: ResolveOptions;
+  propertiesMap?: PropertiesMap;
 
-  constructor(themes: Theme[], ruleCreator: RuleCreator, options?: ResolveOptions) {
+  constructor(themes: Theme[], ruleCreator: RuleCreator, propertiesMap?: PropertiesMap) {
     super();
     this.themes = themes;
     this.ruleCreator = ruleCreator;
-    this.options = options;
+    this.propertiesMap = propertiesMap;
   }
 
   create(): Stylesheet {
@@ -51,7 +42,7 @@ export class MultiThemeCreator extends AbstractCreator implements StylesheetCrea
     if (!globalThemes.length) {
       // If there is no root theme, all themes are scoped by their root selector. No interference.
       const stylesheets = this.themes.map((theme) =>
-        new SingleThemeCreator(theme, this.ruleCreator, undefined, this.options).create()
+        new SingleThemeCreator(theme, this.ruleCreator, undefined, this.propertiesMap).create()
       );
       const result = new Stylesheet();
       stylesheets.forEach((stylesheet) => {
@@ -62,7 +53,7 @@ export class MultiThemeCreator extends AbstractCreator implements StylesheetCrea
 
     const [globalTheme] = globalThemes;
 
-    const stylesheet = new SingleThemeCreator(globalTheme, this.ruleCreator, undefined, this.options).create();
+    const stylesheet = new SingleThemeCreator(globalTheme, this.ruleCreator, undefined, this.propertiesMap).create();
     const secondaries = this.getThemesWithout(globalTheme);
     secondaries.forEach((secondary) => {
       this.appendRulesForSecondary(stylesheet, globalTheme, secondary);
@@ -72,7 +63,7 @@ export class MultiThemeCreator extends AbstractCreator implements StylesheetCrea
   }
 
   appendRulesForSecondary(stylesheet: Stylesheet, primary: Theme, secondary: Theme) {
-    const secondaryResolution = resolveTheme(secondary, undefined, this.options);
+    const secondaryResolution = resolveTheme(secondary, undefined, this.propertiesMap);
     const defaults = reduce(secondaryResolution, secondary, defaultsReducer());
 
     const rootRule = this.ruleCreator.create({ global: [secondary.selector] }, defaults);
@@ -96,7 +87,7 @@ export class MultiThemeCreator extends AbstractCreator implements StylesheetCrea
 
     MultiThemeCreator.forEachContext(secondary, (context) => {
       const contextResolution = reduce(
-        resolveContext(secondary, context, undefined, undefined, this.options),
+        resolveContext(secondary, context, undefined, undefined, this.propertiesMap),
         secondary,
         defaultsReducer()
       );
@@ -130,7 +121,7 @@ export class MultiThemeCreator extends AbstractCreator implements StylesheetCrea
     MultiThemeCreator.forEachContextWithinOptionalModeState(secondary, (context, mode, state) => {
       const optionalState = mode.states[state] as OptionalState;
       const contextResolution = reduce(
-        resolveContext(secondary, context, undefined, undefined, this.options),
+        resolveContext(secondary, context, undefined, undefined, this.propertiesMap),
         secondary,
         modeReducer(mode, state)
       );

src/shared/declaration/single.ts

@@ -9,8 +9,8 @@ import {
   resolveContext,
   resolveTheme,
   Theme,
-  ResolveOptions,
 } from '../theme';
+import type { PropertiesMap } from './interfaces';
 import Stylesheet from './stylesheet';
 import { AbstractCreator } from './abstract';
 import type { StylesheetCreator } from './interfaces';
@@ -22,15 +22,15 @@ export class SingleThemeCreator extends AbstractCreator implements StylesheetCre
   baseTheme?: Theme;
   resolution: FullResolution;
   ruleCreator: RuleCreator;
-  options?: ResolveOptions;
+  propertiesMap?: PropertiesMap;
 
-  constructor(theme: Theme, ruleCreator: RuleCreator, baseTheme?: Theme, options?: ResolveOptions) {
+  constructor(theme: Theme, ruleCreator: RuleCreator, baseTheme?: Theme, propertiesMap?: PropertiesMap) {
     super();
     this.theme = theme;
     this.baseTheme = baseTheme;
-    this.resolution = resolveTheme(theme, this.baseTheme, options);
+    this.propertiesMap = propertiesMap;
+    this.resolution = resolveTheme(theme, this.baseTheme, propertiesMap);
     this.ruleCreator = ruleCreator;
-    this.options = options;
   }
 
   create(): Stylesheet {
@@ -53,7 +53,7 @@ export class SingleThemeCreator extends AbstractCreator implements StylesheetCre
 
     SingleThemeCreator.forEachContext(this.theme, (context) => {
       const contextResolution = reduce(
-        resolveContext(this.theme, context, this.baseTheme, this.resolution, this.options),
+        resolveContext(this.theme, context, this.baseTheme, this.resolution, this.propertiesMap),
         this.theme,
         defaultsReducer(),
         this.baseTheme
@@ -73,7 +73,7 @@ export class SingleThemeCreator extends AbstractCreator implements StylesheetCre
 
     SingleThemeCreator.forEachContextWithinOptionalModeState(this.theme, (context, mode, state) => {
       const contextResolution = reduce(
-        resolveContext(this.theme, context, this.baseTheme, this.resolution, this.options),
+        resolveContext(this.theme, context, this.baseTheme, this.resolution, this.propertiesMap),
         this.theme,
         modeReducer(mode, state),
         this.baseTheme

src/shared/declaration/stylesheet.ts

@@ -89,6 +89,10 @@ export class Rule {
     }
     return rule;
   }
+
+  isModeRule(): boolean {
+    return !!this.media;
+  }
 }
 
 export class Declaration {

src/shared/declaration/transformer.ts

@@ -3,7 +3,8 @@
 import { entries } from '../utils';
 import type Stylesheet from './stylesheet';
 import { Declaration } from './stylesheet';
-import { isGlobalSelector } from '../styles/selector';
+import { getFirstSelector, isGlobalSelector } from '../styles/selector';
+import { getReferencedVar } from './utils';
 
 export interface Transformer {
   transform(stylesheet: Stylesheet): Stylesheet;
@@ -46,56 +47,45 @@ export class MinimalTransformer implements Transformer {
       // However, for mode rules (which have media queries), we should skip tokens that have
       // identical values to their parent, even if referenced variables are overridden. These can inherit
       // properly via natural css variable cascade rules.
-      const selector = rule.toString().split('{')[0].trim();
-      const firstSelector = selector.split(/[\s.:[\]]/)[0];
-      const isModeRule = !!rule.media;
-      if (!isGlobalSelector(firstSelector)) {
-        // Helper to check if a variable or any variable it references is overridden
-        const isVariableOverriddenRecursive = (varName: string, visited = new Set<string>()): boolean => {
-          if (visited.has(varName)) return false;
-          visited.add(varName);
-
-          // Check if this variable itself is overridden
-          if (varName in ruleValue && varName in resolvedParent && ruleValue[varName] !== resolvedParent[varName]) {
-            return true;
-          }
-
-          // Check if this variable references another variable that's overridden
-          if (varName in ruleValue) {
-            const varValue = ruleValue[varName];
-            const refMatch = varValue.match(/var\((--[^)]+)\)/);
-            if (refMatch) {
-              const referencedVar = refMatch[1];
-              if (isVariableOverriddenRecursive(referencedVar, visited)) {
-                return true;
-              }
-            }
-          }
-
-          return false;
-        };
-
-        Object.keys(ruleValue).forEach((property) => {
-          const value = ruleValue[property];
-          // Check if this is a CSS variable reference
-          const match = value.match(/var\((--[^)]+)\)/);
-          if (match) {
-            const referencedVar = match[1];
-            // If the referenced variable (or any variable it references) is overridden
-            if (isVariableOverriddenRecursive(referencedVar)) {
-              // For mode rules, only output if value actually differs from resolved parent
-              // For context rules, always output to ensure correct resolution
-              if (isModeRule && property in resolvedParent && ruleValue[property] === resolvedParent[property]) {
-                return;
-              }
-              if (!(property in diff) && property in ruleValue) {
-                diff[property] = ruleValue[property];
-              }
-            }
-          }
-        });
+
+      const firstSelector = getFirstSelector(rule.selector);
+      const isModeRule = rule.isModeRule();
+
+      if (isGlobalSelector(firstSelector)) {
+        rule.clear();
+        entries(diff).forEach(([property, value]) => rule.appendDeclaration(new Declaration(property, value)));
+        if (rule.size() === 0) {
+          stylesheet.removeRule(rule);
+        }
+        return;
       }
 
+      const isOverridden = (varName: string, visited = new Set<string>()): boolean => {
+        if (visited.has(varName)) return false;
+        visited.add(varName);
+
+        const isDirectlyOverridden =
+          varName in ruleValue && varName in resolvedParent && ruleValue[varName] !== resolvedParent[varName];
+
+        if (isDirectlyOverridden) return true;
+
+        const referencedVar = varName in ruleValue ? getReferencedVar(ruleValue[varName]) : null;
+        return referencedVar ? isOverridden(referencedVar, visited) : false;
+      };
+
+      Object.keys(ruleValue).forEach((property) => {
+        const referencedVar = getReferencedVar(ruleValue[property]);
+        if (!referencedVar || !isOverridden(referencedVar)) return;
+        // For mode rules, only output if value actually differs from resolved parent
+        // For context rules, always output to ensure correct resolution
+        const canInherit = isModeRule && ruleValue[property] === resolvedParent[property];
+        if (canInherit) return;
+
+        if (!(property in diff)) {
+          diff[property] = ruleValue[property];
+        }
+      });
+
       rule.clear();
       entries(diff).forEach(([property, value]) => rule.appendDeclaration(new Declaration(property, value)));
       if (rule.size() === 0) {