feat(tss): add nesting and mixins support (Issue #1617)

packages/tss/src/engine.ts

@@ -261,4 +261,18 @@ export function compileRules(source: string): ResolvedRule[] {
     const engine = new ThemeEngine();
     engine.load(source);
     return engine.rules;
-}
+}
+// ---- WRAPPER FOR NESTING/MIXINS ----
+// Store original compile (if it exists)
+const __origCompile = (typeof compile !== 'undefined') ? compile : (module.exports?.compile);
+
+// Our new compile
+function compileWithMixins(styles: any, mixins: any = {}): any { // `any` used because style objects are dynamic and user-defined
+  const withMixins = resolveMixins(styles, mixins);
+  const flat = flattenStyles(withMixins);
+  return __origCompile ? __origCompile(flat) : flat;
+}
+
+// Replace the exported compile
+export { compileWithMixins as compile };
+export { defineMixin, mixinRegistry };

packages/tss/src/index.ts

@@ -56,3 +56,5 @@ export { lighten, darken, alpha, evalColorFunction } from './color-functions.js'
 // @keyframes support
 export { extractKeyframes } from './animations.js';
 export type { KeyframesDeclaration } from './animations.js';
+
+export { defineMixin, mixinRegistry } from './engine.js';