v5.3.19

Material Design Icons - Update icons 8/1/2022

v5.3.17

• Update Material Design Icons - 7/7/2022

v5.3.16

• Fix Auto-hook on Windows - PurgeTSS most be installed globally!
• Update FontAwesome 6.1.2
• Added all platform and device modifiers to the definitions.css file, including open, close, complete, drag, drop and bounds for class autocompletion.
• Refactor some helper functions
• Minor bug fixes
• Revert back glob to v7.2.0

v5.3.15

• Fixed Auto-hook on Windows - PurgeTSS should be installed globally only!
• Update FontAwesome 6.1.2
• Refactoring some helper functions
• Minor bug fixes

v5.3.11

What's Changed

• Added compatibility with alloy
• udpate FontAwesome 6.1.1
• Added missing color classes for arbitrary values

v5.3.1

What's new in v5.3.1

• What's new in v5.3.1
  • New features
    • Added official icon sets to definitions.css file
  • Bug Fixes
    • Cannot read property 'mode' of undefined
  • New classes
    • Ti.UI.WebView
      • allowsBackForwardNavigationGestures
      • allowsLinkPreview
      • cacheMode
      • cachePolicy
      • disableContextMenu
      • enableJavascriptInterface
      • hideLoadIndicator
      • ignoreSslError
      • keyboardDisplayRequiresUserAction
      • lightTouchEnabled
      • mixedContentMode
      • pluginState
      • scalesPageToFit
      • selectionGranularity
      • timeout
      • willHandleTouches
    • Ti.UI.Label
      • backgroundLeftCap
      • backgroundPaddingBottom
      • backgroundPaddingLeft
      • backgroundPaddingRight
      • backgroundPaddingTop
      • backgroundTopCap
      • highlightedColor
      • includeFontPadding
      • leftButtonPadding
      • rightButtonPadding
    • Ti.UI.Label, Ti.UI.TextArea
      • lines
      • maxLines
    • Ti.UI.label, Ti.UI.TextField
      • minimumFontSize
    • Ti.UI.TextField
      • clearButtonMode
      • inputType
      • leftButtonMode
      • rightButtonMode
    • Ti.UI.TextArea, Ti.UI.TextField
      • clearOnEdit
      • hintType
      • keyboardToolbarHeight
      • showUndoRedoActions
      • suppressReturn
    • Ti.UI.ScrollView
      • canCancelEvents
      • contentHeight And contentWidth
      • contentWidth
      • contentHeight
      • maxZoomScale
      • minZoomScale
      • verticalBounce
      • zoomScale
    • Ti.UI.ListItem
      • accessoryType
      • canEdit
      • canInsert
      • canMove
      • selectedSubtitleColor
      • subtitleColor
      • backgroundSelectedGradient
    • Ti.UI.View
      • backgroundDisabledColor
      • filterTouchesWhenObscured
      • focusable
      • hiddenBehavior
      • horizontalWrap
      • overrideCurrentAnimation
      • pullBackgroundColor
    • Ti.UI.ImageView
      • autorotate
      • imageTouchFeedback
      • imageTouchFeedbackColor
      • repeatCount
      • duration
    • Ti.UI.Picker
      • calendarViewShown
      • countDownDuration
      • datePickerStyle
      • dateTimeColor
      • format24
      • nativeSpinner
      • selectionOpens
    • Ti.UI.Notification
      • gravity
      • vertical and Horizontal Margin
      • xOffset and yOffset
    • Ti.UI.TableViewRow
      • hasCheck
      • hasChild
      • hasDetail
    • icon
      • For Ti.UI.ShortcutItem
      • For Ti.Android.R.drawable
    • TabGroup
      • activeTab
    • Ti.UI.Tab
      • badgeColor
    • Ti.UI.Tab, Ti.UI.View
      • backgroundFocusedColor
    • Ti.Android.MenuItem
      • checkable
    • Ti.Android.Intent
      • flags
    • Ti.UI.ActivityIndicator
      • keyboardToolbarColor
    • Mix Components
      • indentionLevel
    • Ti.UI.Switch
      • onTintColor
      • thumbTintColor
    • Ti.Android.ActionBar
      • navigationMode
    • Ti.UI.TableView
      • passwordMask
      • hintTextColor ( Alias of placeholder-{color} )
    • Ti.UI.Animation
      • reverse
    • Ti.UI.ListView, Ti.UI.TableView
      • showHorizontalScrollIndicator
    • Ti.UI.Toolbar
      • titleTextColor
    • Ti.UI.ProgressBar, Ti.UI.Slider
      • trackTintColor

New features

Added official icon sets to definitions.css file

Now you will get class name completion for the official icon fonts for PurgeTSS: Font Awesome 6 Free, Material Design Icons and, Framework 7 icons.

Including your custom fontawesome.tss classes from Font Awesome Pro or Font Awesome Beta.

Bug Fixes

Cannot read property 'mode' of undefined

Fixed the error when purging a project with a missing purge property in ./purgetss/config.js.

New classes

We are almost done with all the properties from the main Titanium.UI module. Here's the list of the resently added properties:

Ti.UI.WebView

allowsBackForwardNavigationGestures

// Component(s): Ti.UI.WebView
// Property(ies): allowsBackForwardNavigationGestures - iOS Only
'.allow-back-forward-navigation-gestures[platform=ios]': { allowsBackForwardNavigationGestures: true }
'.dont-allow-back-forward-navigation-gestures[platform=ios]': { allowsBackForwardNavigationGestures: false }

allowsLinkPreview

// Component(s): Ti.UI.WebView
// Property(ies): allowsLinkPreview - iOS Only
'.allows-link-preview[platform=ios]': { allowsLinkPreview: true }
'.dont-allow-link-preview[platform=ios]': { allowsLinkPreview: false }

cacheMode

// Component(s): Ti.UI.WebView
// Property(ies): cacheMode - Android Only
'.cache-mode[platform=android]': { cacheMode: Ti.UI.Android.WEBVIEW_LOAD_DEFAULT }
'.cache-mode-no-cache[platform=android]': { cacheMode: Ti.UI.Android.WEBVIEW_LOAD_NO_CACHE }
'.cache-mode-cache-only[platform=android]': { cacheMode: Ti.UI.Android.WEBVIEW_LOAD_CACHE_ONLY }
'.cache-mode-cache-else-network[platform=android]': { cacheMode: Ti.UI.Android.WEBVIEW_LOAD_CACHE_ELSE_NETWORK }
'.webview-load[platform=android]': { cacheMode: Ti.UI.Android.WEBVIEW_LOAD_DEFAULT }
'.webview-load-no-cache[platform=android]': { cacheMode: Ti.UI.Android.WEBVIEW_LOAD_NO_CACHE }
'.webview-load-cache-only[platform=android]': { cacheMode: Ti.UI.Android.WEBVIEW_LOAD_CACHE_ONLY }
'.webview-load-cache-else-network[platform=android]': { cacheMode: Ti.UI.Android.WEBVIEW_LOAD_CACHE_ELSE_NETWORK }

cachePolicy

// Component(s): Ti.UI.WebView
// Property(ies): cachePolicy - Android Only
'.cache-policy-use-protocol-cache-only[platform=ios]': { cachePolicy: Ti.UI.iOS.CACHE_POLICY_USE_PROTOCOL_CACHE_POLICY }
'.cache-policy-ignoring-local-cache-data[platform=ios]': { cachePolicy: Ti.UI.iOS.CACHE_POLICY_RELOAD_IGNORING_LOCAL_CACHE_DATA }
'.cache-policy-return-cache-data-else-load[platform=ios]': { cachePolicy: Ti.UI.iOS.CACHE_POLICY_RETURN_CACHE_DATA_ELSE_LOAD }
'.cache-policy-return-cache-data-dont-load[platform=ios]': { cachePolicy: Ti.UI.iOS.CACHE_POLICY_RETURN_CACHE_DATA_DONT_LOAD }

disableContextMenu

// Component(s): Ti.UI.WebView
// Property(ies): disableContextMenu - Android Only
'.disable-context-menu[platform=android]': { disableContextMenu: true }
'.dont-disable-context-menu[platform=android]': { disableContextMenu: false }

enableJavascriptInterface

// Component(s): Ti.UI.WebView
// Property(ies): enableJavascriptInterface - Android Only
'.enable-javascript-interfase[platform=android]': { enableJavascriptInterface: true }
'.disable-javascript-interfase[platform=android]': { enableJavascriptInterface: false }
'.enable-js-interfase[platform=android]': { enableJavascriptInterface: true }
'.disable-js-interfase[platform=android]': { enableJavascriptInterface: false }

hideLoadIndicator

// Component(s): Ti.UI.WebView
// Property(ies): hideLoadIndicator - iOS Only
'.hide-load-indicator[platform=ios]': { hideLoadIndicator: true }
'.show-load-indicator[platform=ios]': { hideLoadIndicator: false }

ignoreSslError

// Component(s): Ti.UI.WebView
// Property(ies): ignoreSslError
'.ignore-ssl-e...

v5.2.1

What's new in v5.2.1

• What's new in v5.2.1
  • New Features
    • Purge Themes
    • Purge Widgets
    • Missing Classes
    • New definitions.css file
    • “IntelliSense for CSS class names in HTML” VSCode extension
  • Bug Fixes
    • Local installation
  • TableView and ListView properties
    • allowsMultipleSelectionDuringEditing
    • allowsMultipleSelectionInteraction
    • allowsSelection
    • allowsSelectionDuringEditing
    • canScroll
    • caseInsensitiveSearch
    • defaultItemTemplate
    • dimBackgroundForSearch
    • editing
    • fastScroll
    • filterAnchored
    • filterAttribute
    • filterCaseInsensitive
    • footerDividersEnabled
    • headerDividersEnabled
    • hideSearchOnSelection
    • maxRowHeight
    • minRowHeight
    • moveable
    • moving
    • overScrollMode
    • pruneSectionsOnEdit
    • resultsBackgroundColor
    • resultsSeparatorColor
    • resultsSeparatorStyle
    • rowHeight
    • currentPageIndicatorColor
    • searchAsChild
    • searchHidden
    • separatorColor
    • separatorHeight
    • showSelectionCheck
    • showVerticalScrollIndicator
    • willScrollOnStatusTap

New Features

Purge Themes

Now PurgeTSS will parse all the XML files found in the themes folder and add them to the app.tss file.

You don't need to do anything, PurgeTSS will do it for you, on every run.

Purge Widgets

Now PurgeTSS can parse all the XML files found in the widgets folder and add them to the app.tss file.

You'll only need to add the following option in your ./purgetss/config.js file:

// ./purgetss/config.js
module.exports = {
  purge: {
    // ...
    options: {
      widgets: true,
      // ...
    }
  },
  // ...
};

Missing Classes

You can have a list of any missing or misspelled classes at the end of the app.tss file.

So you can check if you forgot to add a class definition or forgot to remove an unused class from you views.

Set the missing option in your ./purgetss/config.js file to true:

// ./purgetss/config.js
module.exports = {
  purge: {
    // ...
    options: {
      missing: true,
      // ...
    }
  },
  // ...
};

If you set the widgets option to true, you'll also get a list of missing classes in widgets.

// Main styles
// ...
// ...

// Unused or unsupported classes
// '.my-forgotten-or-misspelled-class': { }
// '.second-custom-theme-class': { }
// '.unused-default-theme-class': { }
// '.class-from-my-widget': { }

New definitions.css file

We've created a new definitions.css file, that includes ALL the classes from fonts.tss and tailwind.tss files.

Including all of your custom classes defined in ./purgetss/config.js file.

“IntelliSense for CSS class names in HTML” VSCode extension

If you use Visual Studio Code, we recommend you to install the IntelliSense for CSS class names in HTML extension.

It provides class name completion for the XML class attribute based on the new definitions.css file.

After installing the extension, add the following lines to your .vscode/settings.json file:

Mainly, you'll need to add the xml language to the "HTMLLanguages" setting and exclude any css/html files from the caching process by pointing "excludeGlobPattern" to the ./purgetss/fonts/ folder.

VS Code settings.json:

{
  "html-css-class-completion.HTMLLanguages": [
      "html",
      "vue",
      "razor",
      "blade",
      "handlebars",
      "twig",
      "django-html",
      "php",
      "markdown",
      "erb",
      "ejs",
      "svelte",
      "xml",
  ],
  "html-css-class-completion.excludeGlobPattern": "purgetss/fonts/**/*.{css,html}",
}

Bug Fixes

Local installation

Fixed an issue when running PurgeTSS locally.

It is recommended to install PurgeTSS as a global module

TableView and ListView properties

We've added most of the properties for TableView and ListView objects.

allowsMultipleSelectionDuringEditing

// Component(s): Ti.UI.ListView, Ti.UI.TableView
// Property(ies): allowsMultipleSelectionDuringEditing
'.allows-multiple-selection-during-editing': { allowsMultipleSelectionDuringEditing: true }
'.dont-allow-multiple-selection-during-editing': { allowsMultipleSelectionDuringEditing: false }

allowsMultipleSelectionInteraction

// Component(s): Ti.UI.ListView, Ti.UI.TableView
// Property(ies): allowsMultipleSelectionInteraction
'.allows-multiple-selection-interaction': { allowsMultipleSelectionInteraction: true }
'.dont-allow-multiple-selection-interaction': { allowsMultipleSelectionInteraction: false }

allowsSelection

// Component(s): Ti.UI.ListView, Ti.UI.TableView
// Property(ies): allowsSelection - iOS Only
'.allows-selection[platform=ios]': { allowsSelection: true }
'.dont-allow-selection[platform=ios]': { allowsSelection: false }

allowsSelectionDuringEditing

// Component(s): Ti.UI.ListView, Ti.UI.TableView
// Property(ies): allowsSelectionDuringEditing
'.allows-selection-during-editing': { allowsSelectionDuringEditing: true }
'.dont-allow-selection-during-editing': { allowsSelectionDuringEditing: false }

canScroll

// Component(s): Ti.UI.ListView
// Property(ies): canScroll
'.can-scroll': { canScroll: true }
'.cant-scroll': { canScroll: false }

caseInsensitiveSearch

// Component(s): Ti.UI.ListView
// Property(ies): caseInsensitiveSearch
'.case-sensitive-search': { caseInsensitiveSearch: false }
'.case-insensitive-search': { caseInsensitiveSearch: true }

defaultItemTemplate

// Component(s): Ti.UI.ListView
// Property(ies): defaultItemTemplate
'.list-item-template': { defaultItemTemplate: Ti.UI.LIST_ITEM_TEMPLATE_DEFAULT }
'.list-item-template-contacts[platform=ios]': { defaultItemTemplate: Ti.UI.LIST_ITEM_TEMPLATE_CONTACTS }
'.list-item-template-settings[platform=ios]': { defaultItemTemplate: Ti.UI.LIST_ITEM_TEMPLATE_SETTINGS }
'.list-item-template-subtitle[platform=ios]': { defaultItemTemplate: Ti.UI.LIST_ITEM_TEMPLATE_SUBTITLE }

dimBackgroundForSearch

// Component(s): Ti.UI.ListView, Ti.UI.TableView
// Property(ies): dimBackgroundForSearch - iOS Only
'.dim-background-for-search[platform=ios]': { dimBackgroundForSearch: true }
'.dont-dim-background-for-search[platform=ios]': { dimBackgroundForSearch: false }

editing

// Component(s): Ti.UI.ListView, Ti.UI.TableView
// Property(ies): editing - iOS Only
'.editing': { editing: true }
'.no-editing': { editing: true }

fastScroll

// Component(s): Ti.UI.ListView
// Property(ies): fastScroll - Android Only
'.fast-scroll[platform=android]': { fastScroll: true }
'.slow-scroll[platform=android]': { fastScroll: false }

filterAnchored

// Component(s): Ti.UI.TableView
// Property(ies): filterAnchored
'.filter-anchored': { filterAnchored: true }
'.dont-filter-anchored': { filterAnchored: false }

filterAttribute

// Component(s): Ti.UI.TableView
// Property(ies): filterAttribute
'.filter-attribute': { filterAttribute: true }
'.dont-filter-attribute': { filterAttribute: false }

filterCaseInsensitive

// Component(s): Ti.UI.TableView
// Property(ies): filterCaseInsensitive
'.filter-case-sensitive': { filterCaseInsensitive: false }
'.filter-case-insensitive': { filterCaseInsensitive: true }

footerDividersEnabled

// Component(s): Ti.UI.ListView, Ti.UI.TableView
// Property(ies): footerDividersEnabled - Android Only
'.footer-dividers-enabled[platform=android]': { footerDividersEnabled: true }
'.footer-dividers-disabled[platform=android]': { footerDividersEnabled: false }

headerDividersEnabled

// Component(s): Ti.UI.ListView, Ti.UI.TableView
// Property(ies): headerDividersEnabled - Android Only
'.header-dividers-enabled[platform=android]': { headerDividersEnabled: true }
'.header-dividers-disabled[platform=android]': { headerDividersEnabled: false }

hideSearchOnSelection

// Component(s): Ti.UI.TableView
// Property(ies): hideSearchOnSelection - iOS Only
'.hide-search-on-selection[platform=ios]': { hideSearchOnSelection: true }
'.dont-hide-search-on-selection[platform=ios]': { hideSearchOnSelection: false }

maxRowHeight

// Component(s): Ti.UI.TableView
// Property(ies): maxRowHeight -...

v5.1.0

What's new in v5.1.0

• What's new in v5.1.0
  • Breaking changes
    • Removed several icon libraries
    • Instructions to recreate any of the deleted libraries
      • 1. Start by downloading them from their official websites:
      • 2. Put the desired libraries in ./purgetss/fonts folder
      • 3. Run the build-fonts command
  • New Features
    • Unused or unsupported classes
  • New classes for the following properties
    • Ti.Android.ActionBar
      • displayHomeAsUp
      • homeButtonEnabled
    • Ti.Android.Activity
      • requestOrientation
    • Ti.UI.Android.DrawerLayout
      • drawerIndicatorEnabled
      • drawerLockMode
      • leftDrawerLockMode
      • leftWidth
      • rightDrawerLockMode
      • rightWidth
      • toolbarEnabled
    • Ti.UI.Android.ProgressIndicator
      • cancelable
      • canceledOnTouchOutside
      • location
      • type
    • Ti.UI.Animation
      • transition
    • Ti.UI.Button
      • enabled
      • style
    • Ti.UI.Window
      • autoAdjustScrollViewInsets
      • hidesBackButton
      • hidesBarsOnSwipe
      • hidesBarsOnTap
      • hidesBarsWhenKeyboardAppears
      • hidesSearchBarWhenScrolling
      • homeIndicatorAutoHidden
      • statusBarStyle
    • Ti.UI.DashboardItem
      • canDelete
      • html
    • Ti.UI.DashboardView
      • columnCount
      • rowCount
      • wobble
    • Ti.UI.SearchBar
      • selectedButtonColor
      • selectedTextColor
      • showBookmark
    • Ti.UI.ImageView. Ti.UI.WebView
      • enableZoomControls
      • hires
      • systemButton
    • Ti.UI.ListView, Ti.UI.TableView
      • separatorStyle
      • showSearchBarInNavBar
    • style property
      • Ti.UI.AlertDialog
      • Ti.UI.ListView
      • Ti.UI.iOS.PreviewAction, Ti.UI.iOS.PreviewActionGroup
      • Ti.UI.ProgressBar
      • Ti.UI.Switch
      • Ti.UI.TableView
      • Ti.UI.TabGroup
    • Multiple components
      • accessibilityHidden
      • disableBounce
      • submitEnabled
      • iconified
      • iconifiedByDefault
      • scrollIndicatorStyle
      • scrollsToTop
      • selectedColor
      • selectionStyle
      • touchFeedback

Breaking changes

This is the LAST MAJOR VERSION UPDATE ( read: incompatible API changes ), within the next 6 months, to focus our attention on enhancements and bug fixes in a backwards compatible manner!!

Removed several icon libraries

We've decided to remove several icon libraries and leave only the Font Awesome 6 Free, Material Design Icons icons and Framework 7 icons, as the official icon fonts for PurgeTSS.

Instructions to recreate any of the deleted libraries

You can still use them by creating your own custom fonts file.

1. Start by downloading them from their official websites:

• Bootstrap Icons
• Boxicons
• LineIcons
• Tabler Icons

2. Put the desired libraries in ./purgetss/fonts folder

You'll need to copy just the TrueType OR OpenType font files and the .css file.

# Root of the project
purgetss
└─ fonts
   └─ boxicons
      ├─ boxicons.css
      └─ boxicons.ttf
   └─ lineicons
      ├─ lineicons.css
      └─ lineicons.ttf

3. Run the build-fonts command

Run the following command to create your custom fonts.tss file.

$ purgetss build-fonts [--modules]

# alias:
$ purgetss bf [-m]

• It will generate a custom ./purgetss/fonts.tss file with all the unicode characters and style rules:

// ./purgetss/fonts.tss

'.boxicons': { font: { fontFamily: 'boxicons' } }
'.lineicons': { font: { fontFamily: 'LineIcons' } }

// Unicode Characters
// To use your Icon Fonts in Buttons AND Labels each class sets 'text' and 'title' properties

// boxicons.css
'.bxl-meta': { text: '\uef27', title: '\uef27' }
'.bx-lemon': { text: '\uef28', title: '\uef28' }
'.bxs-lemon': { text: '\uef29', title: '\uef29' }
// ...

// lineicons.css
'.lni-500px': { text: '\uea03', title: '\uea03' }
'.lni-add-files': { text: '\uea01', title: '\uea01' }
'.lni-adobe': { text: '\uea06', title: '\uea06' }
// ...

• PurgeTSS will use the font's file name as the style rule name. You can change it by renaming the fonts file name.

# Root of the project
purgetss
└─ fonts
   └─ boxicons
      ├─ bx.ttf

New style rule name: '.bx'

// new style rule name
'.bx': { font: { fontFamily: 'boxicons' } }

• It will copy the font files to ./app/assets/fonts folder and renaming them to their corresponding PostScript name to work on both iOS and Android Apps:

# ./app/assets/fonts
app
└─ assets
   └─ fonts
      ├─ boxicons.ttf
      └─ LineIcons.ttf

• And when using the --modules option, it will generate a ./app/lib/purgetss.fonts.js CommonJS module file:

// ./app/lib/purgetss.fonts.js
const icons = {
  // boxicons
  'boxicons': {
    'bxlMeta': '\uef27',
    'bxLemon': '\uef28',
    'bxsLemon': '\uef29',
    // ...
  },
  // lineicons
  'lni': {
    '500px': '\uea03',
    'addFiles': '\uea01',
    'adobe': '\uea06',
    // ...
  }
};
exports.icons = icons;

• PurgeTSS will automatically try to guess the prefix for each group of icons.

If it can't guess it or there is none, it will use the .css file name as the prefix. You can change it by renaming the file.

# Root of the project
purgetss
└─ fonts
   └─ boxicons
      ├─ bx.css

New group prefix: bx

const icons = {
  // bx
  // New group prefix
  'bx': {
    // ...
  },
  // ...
};
exports.icons = icons;

• Remember that you can add any Serif, Sans-Serif, Cursive, Fantasy or Monospace font families to your custom fonts file, by copying the TrueType and OpenType fonts into the ./purgetss/fonts folder.

# Root of the project
purgetss
└─ fonts
   └─ bevan
      ├─ Bevan-Italic.ttf
      └─ Bevan-Regular.ttf
   └─ roboto
      ├─ Roboto-Regular.ttf
   ...

This will generate the corresponding style rules and fontFamily properties for each font file.

'.bevan-italic': { font: { fontFamily: 'Bevan-Italic' } }
'.bevan-regular': { font: { fontFamily: 'Bevan-Regular' } }
'.roboto-regular': { font: { fontFamily: 'Roboto-Regular' } }

And by renaming the font file you can customize the style rule name.

# Root of the project
purgetss
└─ fonts
   └─ roboto
      ├─ font-sans.ttf
   ...

'.font-sans': { font: { fontFamily: 'Roboto-Regular' } }

New Features

Unused or unsupported classes

Now PurgeTSS includes any unused or unsupported classes in app.tss, so you can create, fix or remove them from your XML files.

<Alloy>
  <Window>
    <View class="vertical">
      <Label class="font-semibold text-black" text="Character Name" />
      <Label class="my-forgotten-or-misspelled-class" text="Character's Title" />
    </View>
  </Window>
</Alloy>

// Main styles
// ...

// Unused or unsupported classes
'.my-forgotten-or-misspelled-class': { }

New classes for the following properties

Ti.Android.ActionBar

displayHomeAsUp

// Component(s): Ti.Android.ActionBar
// Property(ies): displayHomeAsUp - Android Only
'.display-home-as-up[platform=android]': { displayHomeAsUp: true }
'.dont-display-home-as-up[platform=android]': { displayHomeAsUp: false }

homeButtonEnabled

// Component(s): Ti.Android.ActionBar
// Property(ies): homeButtonEnabled - Android Only
'.home-button-enabled[platform=android]': { homeButtonEnabled: true }
'.home-button-disabled[platform=android]': { homeButtonEnabled: false }

Ti.Android.Activity

requestOrientation

// Component(s): Ti.Android.Activity
// Property(ies): requestOrientation - Android Only
'.request-orientation-behind[platform=android]': { requestOrientation: Ti.Android.SCRE...

v4.1.2

What's new in v4.1.2

• What's new in v4.1.2
  • Major Version (v4.x.x) - Breaking changes
    • bar-title-{color} now becomes title-attributes-{color}
    • bar-shadow-{size} now becomes title-attributes-shadow-{size}
    • bar-shadow-{color} now becomes title-attributes-shadow-{color}
    • feedback-{color} now becomes touch-feedback-{color}
    • Same name classes with platform specific styles
  • Minor Version (v4.1.x) - New functionalities
    • New theme classes for Android
  • Patch Version - (v.4.1.2) - Bug fixes
    • The apply directive

Now that we've adopted Semantic Versioning, here are the changes made in this release:

Major Version (v4.x.x) - Breaking changes

With this release we are introducing a few breaking changes.

Mainly we change some class names to be more specific about what properties are set.

bar-title-{color} now becomes title-attributes-{color}

// Component(s): Ti.UI.TabGroup, Ti.UI.Window
// Property(ies): titleAttributes: color - iOS Only
'.title-attributes-transparent[platform=ios]': { titleAttributes: { color: 'transparent' } }
'.title-attributes-black[platform=ios]': { titleAttributes: { color: '#000000' } }
'.title-attributes-white[platform=ios]': { titleAttributes: { color: '#ffffff' } }
'.title-attributes-slate-50[platform=ios]': { titleAttributes: { color: '#f8fafc' } }
'.title-attributes-slate-100[platform=ios]': { titleAttributes: { color: '#f1f5f9' } }
'.title-attributes-slate-200[platform=ios]': { titleAttributes: { color: '#e2e8f0' } }
'.title-attributes-slate-300[platform=ios]': { titleAttributes: { color: '#cbd5e1' } }
'.title-attributes-slate-400[platform=ios]': { titleAttributes: { color: '#94a3b8' } }
'.title-attributes-slate-500[platform=ios]': { titleAttributes: { color: '#64748b' } }
// ...

bar-shadow-{size} now becomes title-attributes-shadow-{size}

// Component(s): Ti.UI.TabGroup, Ti.UI.Window
// Property(ies): titleAttributes: shadow, color, blurRadius, offset - iOS Only
'.title-attributes-shadow-xs[platform=ios]': { titleAttributes: { shadow: { color: '#80000000', blurRadius: 1, offset: { width: 0, height: 0 } } } }
'.title-attributes-shadow-sm[platform=ios]': { titleAttributes: { shadow: { color: '#80000000', blurRadius: 2, offset: { width: 0, height: 1 } } } }
'.title-attributes-shadow[platform=ios]': { titleAttributes: { shadow: { color: '#80000000', blurRadius: 4, offset: { width: 0, height: 2 } } } }
'.title-attributes-shadow-md[platform=ios]': { titleAttributes: { shadow: { color: '#80000000', blurRadius: 6, offset: { width: 0, height: 3 } } } }
'.title-attributes-shadow-lg[platform=ios]': { titleAttributes: { shadow: { color: '#80000000', blurRadius: 8, offset: { width: 0, height: 4 } } } }
'.title-attributes-shadow-xl[platform=ios]': { titleAttributes: { shadow: { color: '#80000000', blurRadius: 12, offset: { width: 0, height: 6 } } } }
'.title-attributes-shadow-2xl[platform=ios]': { titleAttributes: { shadow: { color: '#80000000', blurRadius: 14, offset: { width: 0, height: 8 } } } }
'.title-attributes-shadow-none[platform=ios]': { titleAttributes: { shadow: { color: null, blurRadius: null, offset: { width: 0, height: 0 } } } }

bar-shadow-{color} now becomes title-attributes-shadow-{color}

// Component(s): Ti.UI.TabGroup, Ti.UI.Window
// Property(ies): titleAttributes: shadow - iOS Only
'.title-attributes-shadow-transparent[platform=ios]': { titleAttributes: { shadow: { color: 'transparent' } } }
'.title-attributes-shadow-black[platform=ios]': { titleAttributes: { shadow: { color: '#000000' } } }
'.title-attributes-shadow-white[platform=ios]': { titleAttributes: { shadow: { color: '#ffffff' } } }
'.title-attributes-shadow-slate-50[platform=ios]': { titleAttributes: { shadow: { color: '#f8fafc' } } }
'.title-attributes-shadow-slate-100[platform=ios]': { titleAttributes: { shadow: { color: '#f1f5f9' } } }
'.title-attributes-shadow-slate-200[platform=ios]': { titleAttributes: { shadow: { color: '#e2e8f0' } } }
'.title-attributes-shadow-slate-300[platform=ios]': { titleAttributes: { shadow: { color: '#cbd5e1' } } }
'.title-attributes-shadow-slate-400[platform=ios]': { titleAttributes: { shadow: { color: '#94a3b8' } } }
'.title-attributes-shadow-slate-500[platform=ios]': { titleAttributes: { shadow: { color: '#64748b' } } }
// ...

feedback-{color} now becomes touch-feedback-{color}

// Component(s): Ti.UI.View
// Property(ies): touchFeedbackColor - Android Only
'.touch-feedback-transparent[platform=android]': { touchFeedback: true, touchFeedbackColor: 'transparent' }
'.touch-feedback-black[platform=android]': { touchFeedback: true, touchFeedbackColor: '#000000' }
'.touch-feedback-white[platform=android]': { touchFeedback: true, touchFeedbackColor: '#ffffff' }
'.touch-feedback-slate-50[platform=android]': { touchFeedback: true, touchFeedbackColor: '#f8fafc' }
'.touch-feedback-slate-100[platform=android]': { touchFeedback: true, touchFeedbackColor: '#f1f5f9' }
'.touch-feedback-slate-200[platform=android]': { touchFeedback: true, touchFeedbackColor: '#e2e8f0' }
'.touch-feedback-slate-300[platform=android]': { touchFeedback: true, touchFeedbackColor: '#cbd5e1' }
'.touch-feedback-slate-400[platform=android]': { touchFeedback: true, touchFeedbackColor: '#94a3b8' }
'.touch-feedback-slate-500[platform=android]': { touchFeedback: true, touchFeedbackColor: '#64748b' }
// ...

Same name classes with platform specific styles

The following classes have the same name but with different properties for each platform, so in order to differentiate them, we've added the platform specific styles.

// Component(s): Ti.UI.View
// Property(ies): viewShadowOffset, viewShadowRadius, viewShadowColor - Box Shadow Effect in Tailwind - iOS Only
'.shadow-xs[platform=ios]': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: 1, viewShadowColor: '#80000000' }
'.shadow-sm[platform=ios]': { viewShadowOffset: { x: 0, y: 1 }, viewShadowRadius: 2, viewShadowColor: '#80000000' }
'.shadow[platform=ios]': { viewShadowOffset: { x: 0, y: 2 }, viewShadowRadius: 4, viewShadowColor: '#80000000' }
'.shadow-md[platform=ios]': { viewShadowOffset: { x: 0, y: 3 }, viewShadowRadius: 6, viewShadowColor: '#80000000' }
'.shadow-lg[platform=ios]': { viewShadowOffset: { x: 0, y: 4 }, viewShadowRadius: 8, viewShadowColor: '#80000000' }
'.shadow-xl[platform=ios]': { viewShadowOffset: { x: 0, y: 6 }, viewShadowRadius: 12, viewShadowColor: '#80000000' }
'.shadow-2xl[platform=ios]': { viewShadowOffset: { x: 0, y: 8 }, viewShadowRadius: 14, viewShadowColor: '#80000000' }
'.shadow-inner[platform=ios]': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: null, viewShadowColor: null }
'.shadow-outline[platform=ios]': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: 4, viewShadowColor: '#80000000' }
'.shadow-none[platform=ios]': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: null, viewShadowColor: null }

// Component(s): Ti.UI.Android.CardView, Ti.UI.Animation, Ti.UI.View
// Property(ies): elevation - Box Shadow Effect in Tailwind - Android Only
'.shadow-xs[platform=android]': { elevation: 4 }
'.shadow-sm[platform=android]': { elevation: 8 }
'.shadow[platform=android]': { elevation: 16 }
'.shadow-md[platform=android]': { elevation: 24 }
'.shadow-lg[platform=android]': { elevation: 26 }
'.shadow-xl[platform=android]': { elevation: 34 }
'.shadow-2xl[platform=android]': { elevation: 38 }
'.shadow-inner[platform=android]': { elevation: 0 }
'.shadow-outline[platform=android]': { elevation: 16 }
'.shadow-none[platform=android]': { elevation: 0 }

'.inverted-platform-w[platform=ios]': { width: Ti.Platform.displayCaps.platformHeight }
'.inverted-platform-h[platform=ios]': { height: Ti.Platform.displayCaps.platformWidth }
'.inverted-platform-w[platform=android]': { width: Ti.Platform.displayCaps.platformWidth }
'.inverted-platform-h[platform=android]': { height: Ti.Platform.displayCaps.platformHeight }

You don't need to target a specific platform in your .xml files.

<View class="w-32 h-32 shadow-lg bg-green"></View>

The resulting .tss file will contain both classes.

'.h-32': { height: 128 }
'.shadow-lg[platform=ios]': { viewShadowOffset: { x: 0, y: 4 }, viewShadowRadius: 8, viewShadowColor: '#80000000' }
'.shadow-lg[platform=android]': { elevation: 26 }
'.w-32': { width: 128 }

Minor Version (v4.1.x) - New functionalities

New theme classes for Android

From the docs:

Android allows you to set the appearance of your application using themes. A theme specifies default colors, fonts, and images, for an Android activity or an entire application.

As of Titanium 10.0.0, all of the below are material based themes which support displaying Google's native material widgets/views. You can apply these themes to your application or individual activities instead of creating your own custom theme.

// Component(s): Ti.UI.Window
// Property(ies): theme - Android Only
'.theme-titanium[platform=android]': { theme: "Theme.Titanium" }
'.theme-titanium-day-night[platform=android]': { theme: "Theme.Titanium.DayNight" }
'.theme-titanium-day-night-no-title-bar[platform=android]': { theme: "Theme.Titanium.DayNight.NoTitleBar" }
'.theme-titanium-day-night-fullscreen[platform=android]': { theme: "...

v.3.2.0

What's new in v3.2.0

• What's new in v3.2.0
  • Android
    • elevation-{spacing}
    • max-elevation-{spacing}
    • use-compat-padding and dont-use-compat-padding
    • prevent-corner-overlap and dont-prevent-corner-overlap
    • shadow-{size} for Android are set with elevation property
  • Refactored shadow-{size} and shadow-{color} classes are now iOS only
    • shadow-{size} for iOS are set with viewShadowOffset, viewShadowRadius, viewShadowColor properties
    • shadow-{colors} are for iOS only

Android

elevation-{spacing}

// Component(s): Ti.UI.Android.CardView, Ti.UI.Animation, Ti.UI.View
// Property(ies): elevation - Android Only
'.elevation-1[platform=android]': { elevation: 2 }
'.elevation-2[platform=android]': { elevation: 4 }
'.elevation-3[platform=android]': { elevation: 6 }
'.elevation-4[platform=android]': { elevation: 8 }
'.elevation-5[platform=android]': { elevation: 10 }
'.elevation-6[platform=android]': { elevation: 12 }
'.elevation-7[platform=android]': { elevation: 14 }
'.elevation-8[platform=android]': { elevation: 16 }
'.elevation-9[platform=android]': { elevation: 18 }
'.elevation-10[platform=android]': { elevation: 20 }
'.elevation-11[platform=android]': { elevation: 22 }
'.elevation-12[platform=android]': { elevation: 24 }
'.elevation-14[platform=android]': { elevation: 28 }
'.elevation-16[platform=android]': { elevation: 32 }
'.elevation-20[platform=android]': { elevation: 40 }
'.elevation-24[platform=android]': { elevation: 48 }
'.elevation-28[platform=android]': { elevation: 56 }
'.elevation-32[platform=android]': { elevation: 64 }
'.elevation-36[platform=android]': { elevation: 72 }
'.elevation-40[platform=android]': { elevation: 80 }
'.elevation-44[platform=android]': { elevation: 88 }
'.elevation-48[platform=android]': { elevation: 96 }
'.elevation-52[platform=android]': { elevation: 104 }
'.elevation-56[platform=android]': { elevation: 112 }
'.elevation-60[platform=android]': { elevation: 120 }
'.elevation-64[platform=android]': { elevation: 128 }
'.elevation-72[platform=android]': { elevation: 144 }
'.elevation-80[platform=android]': { elevation: 160 }
'.elevation-96[platform=android]': { elevation: 192 }
'.elevation-px[platform=android]': { elevation: '1px' }
'.elevation-0.5[platform=android]': { elevation: 1 }
'.elevation-1.5[platform=android]': { elevation: 3 }
'.elevation-2.5[platform=android]': { elevation: 5 }
'.elevation-3.5[platform=android]': { elevation: 7 }

max-elevation-{spacing}

// Component(s): Ti.UI.Android.CardView
// Property(ies): maxElevation - Android Only
'.max-elevation-1[platform=android]': { maxElevation: 2 }
'.max-elevation-2[platform=android]': { maxElevation: 4 }
'.max-elevation-3[platform=android]': { maxElevation: 6 }
'.max-elevation-4[platform=android]': { maxElevation: 8 }
'.max-elevation-5[platform=android]': { maxElevation: 10 }
'.max-elevation-6[platform=android]': { maxElevation: 12 }
'.max-elevation-7[platform=android]': { maxElevation: 14 }
'.max-elevation-8[platform=android]': { maxElevation: 16 }
'.max-elevation-9[platform=android]': { maxElevation: 18 }
'.max-elevation-10[platform=android]': { maxElevation: 20 }
'.max-elevation-11[platform=android]': { maxElevation: 22 }
'.max-elevation-12[platform=android]': { maxElevation: 24 }
'.max-elevation-14[platform=android]': { maxElevation: 28 }
'.max-elevation-16[platform=android]': { maxElevation: 32 }
'.max-elevation-20[platform=android]': { maxElevation: 40 }
'.max-elevation-24[platform=android]': { maxElevation: 48 }
'.max-elevation-28[platform=android]': { maxElevation: 56 }
'.max-elevation-32[platform=android]': { maxElevation: 64 }
'.max-elevation-36[platform=android]': { maxElevation: 72 }
'.max-elevation-40[platform=android]': { maxElevation: 80 }
'.max-elevation-44[platform=android]': { maxElevation: 88 }
'.max-elevation-48[platform=android]': { maxElevation: 96 }
'.max-elevation-52[platform=android]': { maxElevation: 104 }
'.max-elevation-56[platform=android]': { maxElevation: 112 }
'.max-elevation-60[platform=android]': { maxElevation: 120 }
'.max-elevation-64[platform=android]': { maxElevation: 128 }
'.max-elevation-72[platform=android]': { maxElevation: 144 }
'.max-elevation-80[platform=android]': { maxElevation: 160 }
'.max-elevation-96[platform=android]': { maxElevation: 192 }
'.max-elevation-px[platform=android]': { maxElevation: '1px' }
'.max-elevation-0.5[platform=android]': { maxElevation: 1 }
'.max-elevation-1.5[platform=android]': { maxElevation: 3 }
'.max-elevation-2.5[platform=android]': { maxElevation: 5 }
'.max-elevation-3.5[platform=android]': { maxElevation: 7 }

use-compat-padding and dont-use-compat-padding

// Component(s): Ti.UI.Android.CardView
// Property(ies): useCompatPadding - Android Only
'.use-compat-padding[platform=android]': { useCompatPadding: true }
'.dont-use-compat-padding[platform=android]': { useCompatPadding: false }

prevent-corner-overlap and dont-prevent-corner-overlap

// Component(s): Ti.UI.Android.CardView
// Property(ies): preventCornerOverlap - Android Only
'.prevent-corner-overlap[platform=android]': { preventCornerOverlap: true }
'.dont-prevent-corner-overlap[platform=android]': { preventCornerOverlap: false }

shadow-{size} for Android are set with elevation property

// Component(s): Ti.UI.Android.CardView, Ti.UI.Animation, Ti.UI.View
// Property(ies): elevation - Box Shadow Effect in Tailwind - Android Only
'.shadow-xs[platform=android]': { elevation: 4 }
'.shadow-sm[platform=android]': { elevation: 8 }
'.shadow[platform=android]': { elevation: 16 }
'.shadow-md[platform=android]': { elevation: 24 }
'.shadow-lg[platform=android]': { elevation: 26 }
'.shadow-xl[platform=android]': { elevation: 34 }
'.shadow-2xl[platform=android]': { elevation: 38 }
'.shadow-inner[platform=android]': { elevation: 0 }
'.shadow-outline[platform=android]': { elevation: 16 }
'.shadow-none[platform=android]': { elevation: 0 }

Refactored shadow-{size} and shadow-{color} classes are now iOS only

shadow-{size} for iOS are set with viewShadowOffset, viewShadowRadius, viewShadowColor properties

// Component(s): Ti.UI.View
// Property(ies): viewShadowOffset, viewShadowRadius, viewShadowColor - Box Shadow Effect in Tailwind - iOS Only
'.shadow-xs[platform=ios]': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: 1, viewShadowColor: '#80000000' }
'.shadow-sm[platform=ios]': { viewShadowOffset: { x: 0, y: 1 }, viewShadowRadius: 2, viewShadowColor: '#80000000' }
'.shadow[platform=ios]': { viewShadowOffset: { x: 0, y: 2 }, viewShadowRadius: 4, viewShadowColor: '#80000000' }
'.shadow-md[platform=ios]': { viewShadowOffset: { x: 0, y: 3 }, viewShadowRadius: 6, viewShadowColor: '#80000000' }
'.shadow-lg[platform=ios]': { viewShadowOffset: { x: 0, y: 4 }, viewShadowRadius: 8, viewShadowColor: '#80000000' }
'.shadow-xl[platform=ios]': { viewShadowOffset: { x: 0, y: 6 }, viewShadowRadius: 12, viewShadowColor: '#80000000' }
'.shadow-2xl[platform=ios]': { viewShadowOffset: { x: 0, y: 8 }, viewShadowRadius: 14, viewShadowColor: '#80000000' }
'.shadow-inner[platform=ios]': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: null, viewShadowColor: null }
'.shadow-outline[platform=ios]': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: 4, viewShadowColor: '#80000000' }
'.shadow-none[platform=ios]': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: null, viewShadowColor: null }

shadow-{colors} are for iOS only

// Component(s): Ti.UI.View
// Property(ies): viewShadowColor - Box Shadow Color in Tailwind - iOS Only
'.shadow-transparent[platform=ios]': { viewShadowColor: 'transparent' }
'.shadow-black[platform=ios]': { viewShadowColor: '#000000' }
'.shadow-white[platform=ios]': { viewShadowColor: '#ffffff' }
'.shadow-slate-50[platform=ios]': { viewShadowColor: '#f8fafc' }
'.shadow-slate-100[platform=ios]': { viewShadowColor: '#f1f5f9' }
'.shadow-slate-200[platform=ios]': { viewShadowColor: '#e2e8f0' }
'.shadow-slate-300[platform=ios]': { viewShadowColor: '#cbd5e1' }
'.shadow-slate-400[platform=ios]': { viewShadowColor: '#94a3b8' }
'.shadow-slate-500[platform=ios]': { viewShadowColor: '#64748b' }
// ...