feat(tss): add nesting and mixins support (Issue #1617) by Anushreer22 · Pull Request #1917 · Karanjot786/TermUI

Anushreer22 · 2026-07-01T09:46:32Z

Summary

Added SCSS-like nesting and mixin system to the TSS styling engine, allowing developers to write cleaner, more maintainable terminal stylesheets.

Changes

flattenStyles() – recursively expands nested selectors (supports & and child selectors)
resolveMixins() – inlines predefined mixins referenced via @mixin
defineMixin(name, obj) – API to register reusable style blocks
Updated compile() to preprocess styles before rendering
Exposed defineMixin and mixinRegistry from packages/tss/src/index.ts

Files Modified

packages/tss/src/engine.ts – added helper functions and wrapped compile
packages/tss/src/index.ts – exports new APIs

Usage Example

const { compile, defineMixin } = require('tss');

// Define a mixin
defineMixin('flex-center', {
  display: 'flex',
  align: 'center'
});

// Use nesting and mixin
const styles = {
  '.button': {
    color: 'blue',
    '&:hover': { color: 'cyan' },
    '@mixin': 'flex-center'
  },
  '.container': {
    padding: '1px',
    '.child': { margin: '0' }
  }
};

const result = compile(styles);

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **New Features**
  * Added support for mixins and nested style resolution in the styling engine, enabling more flexible style composition.
  * Exposed new public APIs for defining and managing mixins.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

github-actions · 2026-07-01T09:46:43Z

Hi @Anushreer22 👋

⭐ Star this repo before your PR merges.

Why? GSSoC 2026 contributors who star get priority review and points credit. After you star, push any commit (or re-run this check). The needs-star label lifts automatically.

Thanks for your contribution to TermUI.

coderabbitai · 2026-07-01T09:46:48Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 77ab4084-c1c2-4477-a209-a441879dc3d6

📥 Commits

Reviewing files that changed from the base of the PR and between 64ec160 and 2928ee2.

📒 Files selected for processing (2)

packages/tss/src/engine.ts
packages/tss/src/index.ts

🚧 Files skipped from review as they are similar to previous changes (2)

packages/tss/src/index.ts
packages/tss/src/engine.ts

📝 Walkthrough

Walkthrough

The tss engine now wraps compile with compileWithMixins, which resolves mixins and flattens styles before calling the preserved compile implementation. defineMixin and mixinRegistry are exported from engine.ts and re-exported from index.ts.

Changes

Mixin compilation and public exports

Layer / File(s)	Summary
Mixin-aware compile wrapper and exports `packages/tss/src/engine.ts`, `packages/tss/src/index.ts`	`compileWithMixins` resolves mixins and flattens styles before delegating to the preserved original `compile`; `defineMixin` and `mixinRegistry` are exported from `engine.ts` and re-exported from `index.ts`.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant Caller
  participant compileWithMixins
  participant mixinRegistry
  participant origCompile

  Caller->>compileWithMixins: compile(styles)
  compileWithMixins->>mixinRegistry: resolve mixins
  mixinRegistry-->>compileWithMixins: resolved styles
  compileWithMixins->>compileWithMixins: flatten styles
  compileWithMixins->>origCompile: __origCompile(flattenedStyles)
  origCompile-->>compileWithMixins: compiled rules
  compileWithMixins-->>Caller: compiled rules

Possibly related PRs

Karanjot786/TermUI#435: Both PRs modify packages/tss/src/engine.ts around compileRules to add mixin handling logic.

Suggested labels: level:advanced

Suggested reviewers: Karanjot786

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description covers the feature well, but it omits several required template sections like Which package(s), Type of Change, and Checklist.	Add the missing template sections, especially Which package(s), Type of Change, Checklist, and Notes for the Reviewer.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: adding nesting and mixin support to tss.
Linked Issues check	✅ Passed	The PR implements the requested CSS-like nesting and mixin support for `#1617`, including flattening, mixin resolution, and exports.
Out of Scope Changes check	✅ Passed	The changes shown are focused on the requested nesting and mixin support and do not introduce clear unrelated scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

github-actions

🎉 Thanks for your first PR to TermUI, @Anushreer22.

Before your PR merges:

⭐ Star the repo. Required. The star-check job blocks your merge otherwise.
✅ All checks green: build, test, typecheck.
🏷 PR title follows type: short description. Example: fix: handle empty list.
🔗 Link your closing issue in the description.

GSSoC 2026 points come from labels after merge:

gssoc:approved. +50 base points.
level:beginner / intermediate / advanced / critical. +20 / +35 / +55 / +80.
quality:clean / exceptional. x 1.2 / x 1.5.
type:*. Stackable bonus.

Your reviewer responds within 48 hours. Ping @Karanjot786 on Discord for urgent help.

🚀 Welcome to the cohort.

coderabbitai

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/tss/src/engine.ts`:
- Line 270: The compileWithMixins function currently uses unqualified any types
for styles and mixins, which violates the TypeScript guideline. Update the
compileWithMixins signature to use the parser’s stylesheet type (such as
TSSStylesheet) for styles and a proper mixin record type for mixins, and keep
the implementation aligned with those stronger types rather than relying on any.

In `@packages/tss/src/index.ts`:
- Line 60: The export in index.ts should use the ESM-compatible path with the
.js suffix. Update the re-export from the engine module so it points to
./engine.js instead of ./engine, keeping the existing exported symbols
defineMixin and mixinRegistry unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

Push a commit to this branch (recommended)
Create a new PR with the fixes

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 529577ee-b68f-4982-b4fb-d874c9cf678b

📥 Commits

Reviewing files that changed from the base of the PR and between 85e8d36 and 64ec160.

📒 Files selected for processing (2)

packages/tss/src/engine.ts
packages/tss/src/index.ts

coderabbitai · 2026-07-01T09:52:15Z

+const __origCompile = (typeof compile !== 'undefined') ? compile : (module.exports?.compile);
+
+// Our new compile
+function compileWithMixins(styles: any, mixins: any = {}): any {


📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

any used without inline justification comment.

Both styles: any and mixins: any = {} use any with no inline comment explaining why, violating the project's TypeScript guideline. Type these against the parser's stylesheet type (e.g. TSSStylesheet) and a mixin record type instead.

As per coding guidelines, "No any without an inline comment explaining why."

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/tss/src/engine.ts` at line 270, The compileWithMixins function currently uses unqualified any types for styles and mixins, which violates the TypeScript guideline. Update the compileWithMixins signature to use the parser’s stylesheet type (such as TSSStylesheet) for styles and a proper mixin record type for mixins, and keep the implementation aligned with those stronger types rather than relying on any.

Source: Coding guidelines

Anushreer22 · 2026-07-01T10:04:58Z

@Karanjot786 ✅ All feedback addressed – ready for merge!

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

64ec160

Anushreer22 requested a review from Karanjot786 as a code owner July 1, 2026 09:46

github-actions Bot added area:tss @termuijs/tss needs-star PR author has not starred the repo. labels Jul 1, 2026

github-actions Bot added the type:feature +10 pts. New feature. label Jul 1, 2026

github-actions Bot reviewed Jul 1, 2026

View reviewed changes

ci: trigger star-check after starring repo

1de9606

github-actions Bot removed the needs-star PR author has not starred the repo. label Jul 1, 2026

coderabbitai Bot reviewed Jul 1, 2026

View reviewed changes

fix(tss): address CodeRabbit feedback (any justification, import suffix)

2928ee2

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

feat(tss): add nesting and mixins support (Issue #1617)#1917
Anushreer22 wants to merge 3 commits into
Karanjot786:mainfrom
Anushreer22:feature/tss-nesting-mixins

Anushreer22 commented Jul 1, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

github-actions Bot commented Jul 1, 2026

Uh oh!

coderabbitai Bot commented Jul 1, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

github-actions Bot left a comment

Uh oh!

coderabbitai Bot left a comment

Uh oh!

coderabbitai Bot Jul 1, 2026

Uh oh!

Uh oh!

Anushreer22 commented Jul 1, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

Anushreer22 commented Jul 1, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Files Modified

Usage Example

Uh oh!

github-actions Bot commented Jul 1, 2026

Uh oh!

coderabbitai Bot commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

github-actions Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot Jul 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Anushreer22 commented Jul 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Anushreer22 commented Jul 1, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jul 1, 2026 •

edited

Loading

Anushreer22 commented Jul 1, 2026 •

edited

Loading