PurgeTSS is a toolkit for building mobile apps with the Titanium framework. It adds practical utilities to speed up styling and reduce repeated setup work.
It includes utility classes, icon font support, an Animation module, a simple grid system, and the shades command for generating custom colors.
If you build UI-heavy screens, PurgeTSS helps you move faster without hand-writing long TSS files.
File rename and improved error handling. PurgeTSS v7.3 renames tailwind.tss to utilities.tss to reflect the project's standalone identity, and adds XML syntax validation to catch errors early.
utilities.tss instead of tailwind.tss
purgetss/styles/utilities.tss (was purgetss/styles/tailwind.tss)dist/utilities.tss (was dist/tailwind.tss)XML syntax validation: Catches common Alloy XML malformations before processing
< brackets (e.g., Label id= instead of <Label id=)Classic Titanium compatibility: deviceInfo() function now works in both Alloy and Classic projects
Alloy.isTablet/Alloy.isHandheldIf you have references to tailwind.tss in your project, update them to utilities.tss:
# Update any custom scripts or paths
# From: purgetss/styles/tailwind.tss
# To: purgetss/styles/utilities.tss
For most users, upgrading is straightforward:
npm install -g purgetss@latest
Here are its main functionalities:
app.tss containing only the classes used in your project, reducing size and improving performance.fonts.tss generation: The build-fonts command creates a fonts.tss file with class definitions and fontFamily selectors for regular and icon fonts, with simplified options for filenames and icon prefixes.shades command: Generate custom color shades from a hex color without external tools.purgetss.ui.js)Install with purgetss module (or purgetss m). This places purgetss.ui.js in your project's lib folder.
<Animation id="myAnimation" module="purgetss.ui" class="opacity-0 duration-300 ease-in" />
You can use any position, size, color, opacity, or transformation class from utilities.tss.
| Method | Description |
|---|---|
play(views, cb) / toggle(views, cb) | Animate views from current state to the animation state. Toggles open/close on each call. |
open(views, cb) | Explicitly run the open state animation. |
close(views, cb) | Explicitly run the close state animation. |
apply(views, cb) | Apply properties instantly without animation. |
draggable(views) | Make a view or array of views draggable inside their parent. |
All callbacks (play, open, close, apply) receive an enriched event object:
{
type: String, // event type ('complete' or 'applied')
bubbles: Boolean,
cancelBubble: Boolean,
action: String, // 'play' or 'apply'
state: String, // 'open' or 'close'
id: String, // Animation object ID
targetId: String, // ID of the animated view
index: Number, // position in array (0-based)
total: Number, // total views in array
getTarget: Function // returns the animated view object
}
When animating an array of views, the callback is called once per view with the corresponding index and total values.
$.myAnimation.play([$.card1, $.card2, $.card3], (e) => {
console.log(`Animated ${e.index + 1} of ${e.total}`) // "Animated 1 of 3", etc.
if (e.index === e.total - 1) {
console.log('All done!')
}
})
Use open, close, and complete modifiers inside animationProperties to define different states:
<Animation id="fadeToggle" module="purgetss.ui" class="duration-300"
animationProperties="{
open: { opacity: 1 },
close: { opacity: 0 }
}"
/>
$.myAnimation.draggable($.myView)
// or with constraints:
$.myAnimation.draggable([$.card1, $.card2])
Use bounds to restrict movement, and drag/drop modifiers for drag-state animations. Use vertical-constraint or horizontal-constraint classes to limit the drag axis.
| Class pattern | Description |
|---|---|
duration-{n} | Animation duration in ms |
delay-{n} | Delay before animation starts |
rotate-{n} | 2D rotation in degrees |
scale-{n} | Scale factor |
repeat-{n} | Number of repeats |
ease-in, ease-out, ease-linear, ease-in-out | Timing curve |
zoom-in-{n}, zoom-out-{n} | Zoom animations |
drag-apply, drag-animate | Drag interaction style |
vertical-constraint, horizontal-constraint | Constrain drag axis |
| Function | Description |
|---|---|
deviceInfo() | Logs detailed platform and display information to the console. Works in both Alloy and Classic projects. |
saveComponent({ source, directory }) | Saves a view snapshot as PNG to the photo gallery. |
See the full documentation at purgetss.com/docs/animation-module/introduction.
In short, PurgeTSS keeps styling consistent and removes a lot of repetitive UI setup work.
FAQs
A package that simplifies mobile app creation for Titanium developers.
The npm package purgetss receives a total of 18 weekly downloads. As such, purgetss popularity was classified as not popular.
We found that purgetss demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
The worm-enabled campaign hit @emilgroup and @teale.io, then used an ICP canister to deliver follow-on payloads.
Research
/Security News
Attackers compromised Trivy GitHub Actions by force-updating tags to deliver malware, exposing CI/CD secrets across affected pipelines.
Security News
ENISA’s new package manager advisory outlines the dependency security practices companies will need to demonstrate as the EU’s Cyber Resilience Act begins enforcing software supply chain requirements.