About

Titanium Style Sheets (TSS) use a JavaScript object-literal syntax to declare UI properties for Appcelerator Alloy views. Sassy Titanium Style Sheets (STSS) extend this with SCSS-like nesting, variables ($myColor), and mixins, compiled back to TSS by the stss preprocessor. Manually rewriting a project's TSS files to STSS is error-prone: a misplaced brace or a forgotten Titanium constant shorthand (Ti.UI.TEXT_ALIGNMENT_LEFT → left) breaks the entire build chain. This converter parses your TSS token-by-token, restructures selector blocks into nested STSS syntax, and applies constant optimizations automatically. It approximates the output of the tss2stss CLI tool under standard formatting assumptions. Edge case: deeply nested platform queries or runtime-evaluated expressions (Alloy.Globals.*) are passed through verbatim since they have no static STSS equivalent.

Formulas

The conversion follows a deterministic transformation pipeline. TSS uses quoted selectors as JavaScript object keys mapped to property objects. STSS uses unquoted, SCSS-style nested selectors.

parse(TSS) → tokenize → buildAST → optimizeConstants → emit(STSS)

Each TSS block of the form:
"selector": { prop: value }
is transformed to:
selector { prop: value; }

Where selector is unquoted and stripped of its surrounding double-quotes. The constant optimization step replaces known Ti.UI.* enumerations with their string shorthand equivalents per the Alloy STSS compiler specification. Properties that reference runtime expressions (e.g., Alloy.Globals.brandColor) are emitted verbatim since static resolution is not possible.

Reference Data

TSS Titanium Constant	STSS Shorthand	Category
`Ti.UI.TEXT_ALIGNMENT_LEFT`	`left`	Text Alignment
`Ti.UI.TEXT_ALIGNMENT_CENTER`	`center`	Text Alignment
`Ti.UI.TEXT_ALIGNMENT_RIGHT`	`right`	Text Alignment
`Ti.UI.TEXT_VERTICAL_ALIGNMENT_TOP`	`top`	Vertical Alignment
`Ti.UI.TEXT_VERTICAL_ALIGNMENT_CENTER`	`center`	Vertical Alignment
`Ti.UI.TEXT_VERTICAL_ALIGNMENT_BOTTOM`	`bottom`	Vertical Alignment
`Ti.UI.SIZE`	`Ti.UI.SIZE`	Layout (no shorthand)
`Ti.UI.FILL`	`Ti.UI.FILL`	Layout (no shorthand)
`Ti.UI.UNIT_PX`	`px`	Units
`Ti.UI.UNIT_DIP`	`dip`	Units
`Ti.UI.UNIT_MM`	`mm`	Units
`Ti.UI.UNIT_CM`	`cm`	Units
`Ti.UI.UNIT_IN`	`in`	Units
`Ti.UI.INPUT_BORDERSTYLE_NONE`	`none`	Border Style
`Ti.UI.INPUT_BORDERSTYLE_ROUNDED`	`rounded`	Border Style
`Ti.UI.INPUT_BORDERSTYLE_BEZEL`	`bezel`	Border Style
`Ti.UI.INPUT_BORDERSTYLE_LINE`	`line`	Border Style
`Ti.UI.AUTOLINK_ALL`	`all`	Autolink
`Ti.UI.AUTOLINK_NONE`	`none`	Autolink
`Ti.UI.KEYBOARD_TYPE_DEFAULT`	`default`	Keyboard
`Ti.UI.KEYBOARD_TYPE_ASCII`	`ascii`	Keyboard
`Ti.UI.KEYBOARD_TYPE_URL`	`url`	Keyboard
`Ti.UI.KEYBOARD_TYPE_EMAIL`	`email`	Keyboard
`Ti.UI.RETURN_KEY_TYPE_DONE`	`done`	Return Key
`Ti.UI.RETURN_KEY_TYPE_GO`	`go`	Return Key
`Ti.UI.RETURN_KEY_TYPE_NEXT`	`next`	Return Key
`Ti.UI.RETURN_KEY_TYPE_SEARCH`	`search`	Return Key
`Ti.UI.RETURN_KEY_TYPE_SEND`	`send`	Return Key

Frequently Asked Questions

The converter handles standard Alloy TSS patterns: quoted string selectors ("#id", ".class", "TagName"), platform-conditional selectors ("Label[platform=ios]"), nested property objects with Titanium constants, numeric values, string values, and array values. Complex selectors with multiple attributes and descendant combinators introduced in tss2stss v0.3.0 are also supported. Runtime expressions like Alloy.Globals references pass through unchanged.

Yes. Single-line comments (//) and multi-line comments (/* */) found in the TSS input are preserved in the STSS output at their approximate original positions. However, comments embedded inside property value expressions may shift position slightly during reformatting.

The converter maintains an internal lookup table of approximately 25 common Titanium UI constants. When a property value matches a known constant (e.g., Ti.UI.TEXT_ALIGNMENT_LEFT), it is replaced with the equivalent string shorthand ('left'). This optimization mirrors the behavior of the STSS compiler, which understands these shorthands and compiles them back to the full constant. Constants without a recognized shorthand (e.g., Ti.UI.SIZE, Ti.UI.FILL) are left as-is.

This tool processes one TSS file at a time via paste or file upload. For batch conversion of entire project directories, use the tss2stss CLI tool (npm install -g tss2stss) which accepts directory paths. This browser tool is designed for quick single-file conversions and inspection of the output before committing to a full project migration.

The converter attempts best-effort parsing. If it encounters an unmatched brace, unterminated string, or unexpected token, it will flag the error with the approximate line number in a toast notification and output whatever was successfully parsed up to that point. Always validate the STSS output by running it through the STSS compiler (stss) before committing.

No. The converter performs a structural translation only: TSS object syntax to STSS nested syntax. It does not infer or generate STSS variables ($varName), mixins, or imports. Those are authoring conveniences you add manually after conversion. The output is valid STSS that compiles back to equivalent TSS.