{"id":27553012,"url":"https://github.com/maccesar/purgetss","last_synced_at":"2026-03-09T01:01:50.222Z","repository":{"id":42019418,"uuid":"279669069","full_name":"macCesar/purgeTSS","owner":"macCesar","description":"PurgeTSS is a toolkit designed to make it easier for Titanium developers to create visually attractive mobile apps. It offers features like customizable utility classes, support for icon fonts, a basic animation module, a simple grid system, and a \"shades\" command for generating custom colors.","archived":false,"fork":false,"pushed_at":"2025-06-19T21:01:22.000Z","size":58563,"stargazers_count":25,"open_issues_count":0,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-06-19T21:30:55.334Z","etag":null,"topics":["alloy","android","appcelerator","cli","ios","javascript","nodejs","purgetss","titanium","titanium-module"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/macCesar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"macCesar"}},"created_at":"2020-07-14T18:56:34.000Z","updated_at":"2025-06-12T18:14:52.000Z","dependencies_parsed_at":"2023-10-15T18:03:58.118Z","dependency_job_id":"64761e6b-cedb-481c-a537-e230c5b7f57c","html_url":"https://github.com/macCesar/purgeTSS","commit_stats":{"total_commits":1005,"total_committers":5,"mean_commits":201.0,"dds":0.007960199004975133,"last_synced_commit":"ea5fc8928fae7b6a2d849652c5d9df3a62c26f81"},"previous_names":[],"tags_count":90,"template":false,"template_full_name":null,"purl":"pkg:github/macCesar/purgeTSS","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macCesar%2FpurgeTSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macCesar%2FpurgeTSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macCesar%2FpurgeTSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macCesar%2FpurgeTSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/macCesar","download_url":"https://codeload.github.com/macCesar/purgeTSS/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/macCesar%2FpurgeTSS/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261494591,"owners_count":23167162,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alloy","android","appcelerator","cli","ios","javascript","nodejs","purgetss","titanium","titanium-module"],"created_at":"2025-04-19T11:42:47.379Z","updated_at":"2026-03-09T01:01:50.212Z","avatar_url":"https://github.com/macCesar.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://codigomovil.mx/images/logotipo-purgetss-gris.svg\" height=\"230\" width=\"230\" alt=\"PurgeCSS logo\"/\u003e\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n![npm](https://img.shields.io/npm/dm/purgetss)\n![npm](https://img.shields.io/npm/v/purgetss)\n![NPM](https://img.shields.io/npm/l/purgetss)\n\n\u003c/div\u003e\n\n**PurgeTSS** is a toolkit for building mobile apps with the [Titanium framework](https://titaniumsdk.com). It adds practical utilities to speed up styling and reduce repeated setup work.\n\nIt includes utility classes, icon font support, an Animation module, a simple grid system, and the `shades` command for generating custom colors.\n\nIf you build UI-heavy screens, PurgeTSS helps you move faster without hand-writing long TSS files.\n\n---\n\n## What's New in v7.3.x\n\n**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.\n\n### Breaking changes\n\n- **File rename**: Output file is now `utilities.tss` instead of `tailwind.tss`\n  - Generated file: `purgetss/styles/utilities.tss` (was `purgetss/styles/tailwind.tss`)\n  - Distribution file: `dist/utilities.tss` (was `dist/tailwind.tss`)\n\n### Major improvements\n\n- **XML syntax validation**: Catches common Alloy XML malformations before processing\n  - Detects missing opening `\u003c` brackets (e.g., `Label id=` instead of `\u003cLabel id=`)\n  - Shows detailed error messages with line numbers, context preview, and fix suggestions\n  - Saves debugging time by catching errors early in the build process\n\n- **Classic Titanium compatibility**: `deviceInfo()` function now works in both Alloy and Classic projects\n  - Removed dependency on `Alloy.isTablet`/`Alloy.isHandheld`\n  - Uses platform-based detection instead\n\n### Migration guide\n\nIf you have references to `tailwind.tss` in your project, update them to `utilities.tss`:\n\n```bash\n# Update any custom scripts or paths\n# From: purgetss/styles/tailwind.tss\n# To:   purgetss/styles/utilities.tss\n```\n\nFor most users, upgrading is straightforward:\n```bash\nnpm install -g purgetss@latest\n```\n\n---\n\nHere are its main functionalities:\n\n- **Utility-First Classes**: PurgeTSS ships with 21,000+ utility classes, so you get a lot of styling options out of the box.\n- **Efficient style management**: It parses all XML files to create a clean `app.tss` containing only the classes used in your project, reducing size and improving performance.\n- **Customization and JIT classes**: You can customize default classes via a config file and use JIT classes for arbitrary values inside views.\n- **Icon fonts integration**: Use icon fonts such as Font Awesome, Material Icons, Material Symbols, and Framework7-Icons in Buttons and Labels.\n- **`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.\n- **`shades` command**: Generate custom color shades from a hex color without external tools.\n- **Animation module**: Apply basic 2D matrix animations or transformations to elements or arrays of elements.\n- **Grid system**: A two-dimensional grid system to align and distribute elements within views.\n\n---\n\n## Animation Module (`purgetss.ui.js`)\n\nInstall with `purgetss module` (or `purgetss m`). This places `purgetss.ui.js` in your project's `lib` folder.\n\n### Declaring an Animation object\n\n```xml\n\u003cAnimation id=\"myAnimation\" module=\"purgetss.ui\" class=\"opacity-0 duration-300 ease-in\" /\u003e\n```\n\nYou can use any position, size, color, opacity, or transformation class from `utilities.tss`.\n\n### Available methods\n\n| Method                                  | Description                                                                                   |\n| --------------------------------------- | --------------------------------------------------------------------------------------------- |\n| `play(views, cb)` / `toggle(views, cb)` | Animate views from current state to the animation state. Toggles `open`/`close` on each call. |\n| `open(views, cb)`                       | Explicitly run the `open` state animation.                                                    |\n| `close(views, cb)`                      | Explicitly run the `close` state animation.                                                   |\n| `apply(views, cb)`                      | Apply properties instantly without animation.                                                 |\n| `draggable(views)`                      | Make a view or array of views draggable inside their parent.                                  |\n\n### Callback event object\n\nAll callbacks (`play`, `open`, `close`, `apply`) receive an enriched event object:\n\n```js\n{\n  type: String,         // event type ('complete' or 'applied')\n  bubbles: Boolean,\n  cancelBubble: Boolean,\n  action: String,       // 'play' or 'apply'\n  state: String,        // 'open' or 'close'\n  id: String,           // Animation object ID\n  targetId: String,     // ID of the animated view\n  index: Number,        // position in array (0-based)\n  total: Number,        // total views in array\n  getTarget: Function   // returns the animated view object\n}\n```\n\nWhen animating an **array of views**, the callback is called once per view with the corresponding `index` and `total` values.\n\n```js\n$.myAnimation.play([$.card1, $.card2, $.card3], (e) =\u003e {\n  console.log(`Animated ${e.index + 1} of ${e.total}`) // \"Animated 1 of 3\", etc.\n  if (e.index === e.total - 1) {\n    console.log('All done!')\n  }\n})\n```\n\n### Multi-state animations\n\nUse `open`, `close`, and `complete` modifiers inside `animationProperties` to define different states:\n\n```xml\n\u003cAnimation id=\"fadeToggle\" module=\"purgetss.ui\" class=\"duration-300\"\n  animationProperties=\"{\n    open: { opacity: 1 },\n    close: { opacity: 0 }\n  }\"\n/\u003e\n```\n\n### Draggable views\n\n```js\n$.myAnimation.draggable($.myView)\n// or with constraints:\n$.myAnimation.draggable([$.card1, $.card2])\n```\n\nUse `bounds` to restrict movement, and `drag`/`drop` modifiers for drag-state animations. Use `vertical-constraint` or `horizontal-constraint` classes to limit the drag axis.\n\n### Utility classes for animations\n\n| Class pattern                                       | Description                   |\n| --------------------------------------------------- | ----------------------------- |\n| `duration-{n}`                                      | Animation duration in ms      |\n| `delay-{n}`                                         | Delay before animation starts |\n| `rotate-{n}`                                        | 2D rotation in degrees        |\n| `scale-{n}`                                         | Scale factor                  |\n| `repeat-{n}`                                        | Number of repeats             |\n| `ease-in`, `ease-out`, `ease-linear`, `ease-in-out` | Timing curve                  |\n| `zoom-in-{n}`, `zoom-out-{n}`                       | Zoom animations               |\n| `drag-apply`, `drag-animate`                        | Drag interaction style        |\n| `vertical-constraint`, `horizontal-constraint`      | Constrain drag axis           |\n\n### Utility functions\n\n| Function                               | Description                                                                                              |\n| -------------------------------------- | -------------------------------------------------------------------------------------------------------- |\n| `deviceInfo()`                         | Logs detailed platform and display information to the console. Works in both Alloy and Classic projects. |\n| `saveComponent({ source, directory })` | Saves a view snapshot as PNG to the photo gallery.                                                       |\n\nSee the full documentation at [purgetss.com/docs/animation-module/introduction](https://purgetss.com/docs/animation-module/introduction).\n\nIn short, PurgeTSS keeps styling consistent and removes a lot of repetitive UI setup work.\n\n### Visit the official documentation site at [purgetss.com](https://purgetss.com) to learn more.\n\n## Requirements\n\n- **Titanium SDK** (Compatible with all versions; 13.1.1.GA recommended for full property support)\n- **Alloy Framework** (for most commands)\n- **Node.js 20+** (required for the CLI tool)\n\n## Table of Content\n\n- [What's New in v7.2](https://purgetss.com/#whats-new-in-v72x)\n- [Installation](https://purgetss.com/docs/installation)\n- [Commands](https://purgetss.com/docs/commands)\n- Customization\n  - [config file](https://purgetss.com/docs/customization/the-config-file)\n  - [Custom rules](https://purgetss.com/docs/customization/custom-rules)\n  - [apply directive](https://purgetss.com/docs/customization/the-apply-directive)\n  - [opacity modifier](https://purgetss.com/docs/customization/the-opacity-modifier)\n  - [Arbitrary values in XMLs](https://purgetss.com/docs/customization/arbitrary-values)\n  - [Platform and Device modifiers](https://purgetss.com/docs/customization/platform-and-device-modifiers)\n  - [Icon Fonts Libraries](https://purgetss.com/docs/customization/icon-fonts-libraries)\n- Animation module\n  - [Introduction](https://purgetss.com/docs/animation-module/introduction)\n  - [Available utilities](https://purgetss.com/docs/animation-module/available-utilities)\n  - [Complex UI elements](https://purgetss.com/docs/animation-module/complex-ui-elements)\n- [Grid System](https://purgetss.com/docs/grid-system)\n","funding_links":["https://github.com/sponsors/macCesar"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaccesar%2Fpurgetss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaccesar%2Fpurgetss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaccesar%2Fpurgetss/lists"}