UNPKG

purgetss

Version:

A package that simplifies mobile app creation for Titanium developers.

580 lines (517 loc) 21.5 kB
# What's new in v5.2.1 - [What's new in v5.2.1](#whats-new-in-v521) - [New Features](#new-features) - [Purge Themes](#purge-themes) - [Purge Widgets](#purge-widgets) - [Missing Classes](#missing-classes) - [New `definitions.css` file](#new-definitionscss-file) - [“IntelliSense for CSS class names in HTML” VSCode extension](#intellisense-for-css-class-names-in-html-vscode-extension) - [Bug Fixes](#bug-fixes) - [Local installation](#local-installation) - [TableView and ListView properties](#tableview-and-listview-properties) - [allowsMultipleSelectionDuringEditing](#allowsmultipleselectionduringediting) - [allowsMultipleSelectionInteraction](#allowsmultipleselectioninteraction) - [allowsSelection](#allowsselection) - [allowsSelectionDuringEditing](#allowsselectionduringediting) - [canScroll](#canscroll) - [caseInsensitiveSearch](#caseinsensitivesearch) - [defaultItemTemplate](#defaultitemtemplate) - [dimBackgroundForSearch](#dimbackgroundforsearch) - [editing](#editing) - [fastScroll](#fastscroll) - [filterAnchored](#filteranchored) - [filterAttribute](#filterattribute) - [filterCaseInsensitive](#filtercaseinsensitive) - [footerDividersEnabled](#footerdividersenabled) - [headerDividersEnabled](#headerdividersenabled) - [hideSearchOnSelection](#hidesearchonselection) - [maxRowHeight](#maxrowheight) - [minRowHeight](#minrowheight) - [moveable](#moveable) - [moving](#moving) - [overScrollMode](#overscrollmode) - [pruneSectionsOnEdit](#prunesectionsonedit) - [resultsBackgroundColor](#resultsbackgroundcolor) - [resultsSeparatorColor](#resultsseparatorcolor) - [resultsSeparatorStyle](#resultsseparatorstyle) - [rowHeight](#rowheight) - [currentPageIndicatorColor](#currentpageindicatorcolor) - [searchAsChild](#searchaschild) - [searchHidden](#searchhidden) - [separatorColor](#separatorcolor) - [separatorHeight](#separatorheight) - [showSelectionCheck](#showselectioncheck) - [showVerticalScrollIndicator](#showverticalscrollindicator) - [willScrollOnStatusTap](#willscrollonstatustap) ## New Features ### Purge Themes Now **Purge TSS** 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, **Purge TSS** will do it for you, on every run. ### Purge Widgets Now **Purge TSS** 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: ```javascript // ./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`: ```javascript // ./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`. ```css // 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 <img src="https://raw.githubusercontent.com/macCesar/purgeTSS/master/assets/images/class-completion-2.gif" alt="Class Completion using IntelliSense for CSS class names in HTML"> If you use **[Visual Studio Code](https://code.visualstudio.com)**, we recommend you to install the **[IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)** 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`: ```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": "**/node_modules/**,purgetss/fonts/**/*.{css,html}", } ``` ## Bug Fixes ### Local installation Fixed an issue when running **Purge TSS** locally. **It is recommended to install Purge TSS as a global module** ## TableView and ListView properties We've added most of the properties for TableView and ListView objects. ### allowsMultipleSelectionDuringEditing ```css // 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 ```css // 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 ```css // 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 ```css // 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 ```css // Component(s): Ti.UI.ListView // Property(ies): canScroll '.can-scroll': { canScroll: true } '.cant-scroll': { canScroll: false } ``` ### caseInsensitiveSearch ```css // Component(s): Ti.UI.ListView // Property(ies): caseInsensitiveSearch '.case-sensitive-search': { caseInsensitiveSearch: false } '.case-insensitive-search': { caseInsensitiveSearch: true } ``` ### defaultItemTemplate ```css // 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 ```css // 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 ```css // Component(s): Ti.UI.ListView, Ti.UI.TableView // Property(ies): editing - iOS Only '.editing': { editing: true } '.no-editing': { editing: true } ``` ### fastScroll ```css // Component(s): Ti.UI.ListView // Property(ies): fastScroll - Android Only '.fast-scroll[platform=android]': { fastScroll: true } '.slow-scroll[platform=android]': { fastScroll: false } ``` ### filterAnchored ```css // Component(s): Ti.UI.TableView // Property(ies): filterAnchored '.filter-anchored': { filterAnchored: true } '.dont-filter-anchored': { filterAnchored: false } ``` ### filterAttribute ```css // Component(s): Ti.UI.TableView // Property(ies): filterAttribute '.filter-attribute': { filterAttribute: true } '.dont-filter-attribute': { filterAttribute: false } ``` ### filterCaseInsensitive ```css // Component(s): Ti.UI.TableView // Property(ies): filterCaseInsensitive '.filter-case-sensitive': { filterCaseInsensitive: false } '.filter-case-insensitive': { filterCaseInsensitive: true } ``` ### footerDividersEnabled ```css // 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 ```css // 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 ```css // 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 ```css // Component(s): Ti.UI.TableView // Property(ies): maxRowHeight - iOS Only '.max-row-h-0[platform=ios]': { maxRowHeight: 0 } '.max-row-h-1[platform=ios]': { maxRowHeight: 4 } '.max-row-h-2[platform=ios]': { maxRowHeight: 8 } '.max-row-h-3[platform=ios]': { maxRowHeight: 12 } '.max-row-h-4[platform=ios]': { maxRowHeight: 16 } '.max-row-h-5[platform=ios]': { maxRowHeight: 20 } '.max-row-h-6[platform=ios]': { maxRowHeight: 24 } '.max-row-h-7[platform=ios]': { maxRowHeight: 28 } '.max-row-h-8[platform=ios]': { maxRowHeight: 32 } '.max-row-h-9[platform=ios]': { maxRowHeight: 36 } '.max-row-h-10[platform=ios]': { maxRowHeight: 40 } '.max-row-h-11[platform=ios]': { maxRowHeight: 44 } '.max-row-h-12[platform=ios]': { maxRowHeight: 48 } '.max-row-h-14[platform=ios]': { maxRowHeight: 56 } '.max-row-h-16[platform=ios]': { maxRowHeight: 64 } '.max-row-h-20[platform=ios]': { maxRowHeight: 80 } '.max-row-h-24[platform=ios]': { maxRowHeight: 96 } '.max-row-h-28[platform=ios]': { maxRowHeight: 112 } '.max-row-h-32[platform=ios]': { maxRowHeight: 128 } '.max-row-h-36[platform=ios]': { maxRowHeight: 144 } '.max-row-h-40[platform=ios]': { maxRowHeight: 160 } '.max-row-h-44[platform=ios]': { maxRowHeight: 176 } '.max-row-h-48[platform=ios]': { maxRowHeight: 192 } '.max-row-h-52[platform=ios]': { maxRowHeight: 208 } '.max-row-h-56[platform=ios]': { maxRowHeight: 224 } '.max-row-h-60[platform=ios]': { maxRowHeight: 240 } '.max-row-h-64[platform=ios]': { maxRowHeight: 256 } '.max-row-h-72[platform=ios]': { maxRowHeight: 288 } '.max-row-h-80[platform=ios]': { maxRowHeight: 320 } '.max-row-h-96[platform=ios]': { maxRowHeight: 384 } '.max-row-h-px[platform=ios]': { maxRowHeight: '1px' } '.max-row-h-0.5[platform=ios]': { maxRowHeight: 2 } '.max-row-h-1.5[platform=ios]': { maxRowHeight: 6 } '.max-row-h-2.5[platform=ios]': { maxRowHeight: 10 } '.max-row-h-3.5[platform=ios]': { maxRowHeight: 14 } ``` ### minRowHeight ```css // Component(s): Ti.UI.TableView // Property(ies): minRowHeight - iOS Only '.min-row-h-0[platform=ios]': { minRowHeight: 0 } '.min-row-h-1[platform=ios]': { minRowHeight: 4 } '.min-row-h-2[platform=ios]': { minRowHeight: 8 } '.min-row-h-3[platform=ios]': { minRowHeight: 12 } '.min-row-h-4[platform=ios]': { minRowHeight: 16 } '.min-row-h-5[platform=ios]': { minRowHeight: 20 } '.min-row-h-6[platform=ios]': { minRowHeight: 24 } '.min-row-h-7[platform=ios]': { minRowHeight: 28 } '.min-row-h-8[platform=ios]': { minRowHeight: 32 } '.min-row-h-9[platform=ios]': { minRowHeight: 36 } '.min-row-h-10[platform=ios]': { minRowHeight: 40 } '.min-row-h-11[platform=ios]': { minRowHeight: 44 } '.min-row-h-12[platform=ios]': { minRowHeight: 48 } '.min-row-h-14[platform=ios]': { minRowHeight: 56 } '.min-row-h-16[platform=ios]': { minRowHeight: 64 } '.min-row-h-20[platform=ios]': { minRowHeight: 80 } '.min-row-h-24[platform=ios]': { minRowHeight: 96 } '.min-row-h-28[platform=ios]': { minRowHeight: 112 } '.min-row-h-32[platform=ios]': { minRowHeight: 128 } '.min-row-h-36[platform=ios]': { minRowHeight: 144 } '.min-row-h-40[platform=ios]': { minRowHeight: 160 } '.min-row-h-44[platform=ios]': { minRowHeight: 176 } '.min-row-h-48[platform=ios]': { minRowHeight: 192 } '.min-row-h-52[platform=ios]': { minRowHeight: 208 } '.min-row-h-56[platform=ios]': { minRowHeight: 224 } '.min-row-h-60[platform=ios]': { minRowHeight: 240 } '.min-row-h-64[platform=ios]': { minRowHeight: 256 } '.min-row-h-72[platform=ios]': { minRowHeight: 288 } '.min-row-h-80[platform=ios]': { minRowHeight: 320 } '.min-row-h-96[platform=ios]': { minRowHeight: 384 } '.min-row-h-px[platform=ios]': { minRowHeight: '1px' } '.min-row-h-0.5[platform=ios]': { minRowHeight: 2 } '.min-row-h-1.5[platform=ios]': { minRowHeight: 6 } '.min-row-h-2.5[platform=ios]': { minRowHeight: 10 } '.min-row-h-3.5[platform=ios]': { minRowHeight: 14 } ``` ### moveable ```css // Component(s): Ti.UI.ListView, Ti.UI.TableView // Property(ies): moveable '.moveable': { moveable: true } '.unmovable': { moveable: false } ``` ### moving ```css // Component(s): Ti.UI.TableView // Property(ies): moving '.moving': { moving: true } ``` ### overScrollMode ```css // Component(s): Ti.UI.ScrollableView, Ti.UI.ScrollView, Ti.UI.TableView, Ti.UI.WebView // Property(ies): overScrollMode - Android Only '.over-scroll-always[platform=android]': { overScrollMode: Ti.UI.Android.OVER_SCROLL_ALWAYS } '.over-scroll-if-content-scrolls[platform=android]': { overScrollMode: Ti.UI.Android.OVER_SCROLL_IF_CONTENT_SCROLLS } '.over-scroll-never[platform=android]': { overScrollMode: Ti.UI.Android.OVER_SCROLL_NEVER } ``` ### pruneSectionsOnEdit ```css // Component(s): Ti.UI.ListView // Property(ies): pruneSectionsOnEdit - iOS Only '.prune-sections-on-edit[platform=ios]': { pruneSectionsOnEdit: true } '.dont-prune-sections-on-edit[platform=ios]': { pruneSectionsOnEdit: false } ``` ### resultsBackgroundColor ```css // Component(s): Ti.UI.ListView // Property(ies): resultsBackgroundColor - iOS Only '.results-bg-transparent[platform=ios]': { resultsBackgroundColor: 'transparent' } '.results-bg-black[platform=ios]': { resultsBackgroundColor: '#000000' } '.results-bg-white[platform=ios]': { resultsBackgroundColor: '#ffffff' } '.results-bg-slate-50[platform=ios]': { resultsBackgroundColor: '#f8fafc' } '.results-bg-slate-100[platform=ios]': { resultsBackgroundColor: '#f1f5f9' } // ... ``` ### resultsSeparatorColor ```css // Component(s): Ti.UI.ListView // Property(ies): resultsSeparatorColor '.results-separator-transparent': { resultsSeparatorColor: 'transparent' } '.results-separator-black': { resultsSeparatorColor: '#000000' } '.results-separator-white': { resultsSeparatorColor: '#ffffff' } '.results-separator-slate-50': { resultsSeparatorColor: '#f8fafc' } '.results-separator-slate-100': { resultsSeparatorColor: '#f1f5f9' } // ... ``` ### resultsSeparatorStyle ```css // Component(s): Ti.UI.ListView, Ti.UI.TableView // Property(ies): resultsSeparatorStyle - iOS Only '.results-separator-style-none[platform=ios]': { resultsSeparatorStyle: Ti.UI.TABLE_VIEW_SEPARATOR_STYLE_NONE } '.results-separator-style-single-line[platform=ios]': { resultsSeparatorStyle: Ti.UI.TABLE_VIEW_SEPARATOR_STYLE_SINGLE_LINE } ``` ### rowHeight ```css // Component(s): Ti.UI.TableView // Property(ies): rowHeight '.row-h-0': { rowHeight: 0 } '.row-h-1': { rowHeight: 4 } '.row-h-2': { rowHeight: 8 } '.row-h-3': { rowHeight: 12 } '.row-h-4': { rowHeight: 16 } '.row-h-5': { rowHeight: 20 } '.row-h-6': { rowHeight: 24 } '.row-h-7': { rowHeight: 28 } '.row-h-8': { rowHeight: 32 } '.row-h-9': { rowHeight: 36 } '.row-h-10': { rowHeight: 40 } '.row-h-11': { rowHeight: 44 } '.row-h-12': { rowHeight: 48 } '.row-h-14': { rowHeight: 56 } '.row-h-16': { rowHeight: 64 } '.row-h-20': { rowHeight: 80 } '.row-h-24': { rowHeight: 96 } '.row-h-28': { rowHeight: 112 } '.row-h-32': { rowHeight: 128 } '.row-h-36': { rowHeight: 144 } '.row-h-40': { rowHeight: 160 } '.row-h-44': { rowHeight: 176 } '.row-h-48': { rowHeight: 192 } '.row-h-52': { rowHeight: 208 } '.row-h-56': { rowHeight: 224 } '.row-h-60': { rowHeight: 240 } '.row-h-64': { rowHeight: 256 } '.row-h-72': { rowHeight: 288 } '.row-h-80': { rowHeight: 320 } '.row-h-96': { rowHeight: 384 } '.row-h-px': { rowHeight: '1px' } '.row-h-0.5': { rowHeight: 2 } '.row-h-1.5': { rowHeight: 6 } '.row-h-2.5': { rowHeight: 10 } '.row-h-3.5': { rowHeight: 14 } ``` ### currentPageIndicatorColor ```css // Component(s): Ti.UI.ScrollableView // Property(ies): currentPageIndicatorColor - iOS Only '.current-page-transparent': { currentPageIndicatorColor: 'transparent' } '.current-page-black': { currentPageIndicatorColor: '#000000' } '.current-page-white': { currentPageIndicatorColor: '#ffffff' } '.current-page-slate-50': { currentPageIndicatorColor: '#f8fafc' } '.current-page-slate-100': { currentPageIndicatorColor: '#f1f5f9' } // ... ``` ### searchAsChild ```css // Component(s): Ti.UI.TableView // Property(ies): searchAsChild - Android Only '.search-as-child[platform=android]': { searchAsChild: true } '.dont-search-as-child[platform=android]': { searchAsChild: false } ``` ### searchHidden ```css // Component(s): Ti.UI.TableView // Property(ies): searchHidden - iOS Only '.search-hidden[platform=ios]': { searchHidden: true } '.search-visible[platform=ios]': { searchHidden: false } ``` ### separatorColor ```css // Component(s): Ti.UI.ListView // Property(ies): separatorColor - iOS Only '.separator-transparent[platform=ios]': { separatorColor: 'transparent' } '.separator-black[platform=ios]': { separatorColor: '#000000' } '.separator-white[platform=ios]': { separatorColor: '#ffffff' } '.separator-slate-50[platform=ios]': { separatorColor: '#f8fafc' } '.separator-slate-100[platform=ios]': { separatorColor: '#f1f5f9' } // ... ``` ### separatorHeight ```css // Component(s): Ti.UI.ListView // Property(ies): separatorHeight - Android Only '.separator-h-0[platform=android]': { separatorHeight: 0 } '.separator-h-1[platform=android]': { separatorHeight: 4 } '.separator-h-2[platform=android]': { separatorHeight: 8 } '.separator-h-3[platform=android]': { separatorHeight: 12 } '.separator-h-4[platform=android]': { separatorHeight: 16 } '.separator-h-5[platform=android]': { separatorHeight: 20 } '.separator-h-6[platform=android]': { separatorHeight: 24 } '.separator-h-7[platform=android]': { separatorHeight: 28 } '.separator-h-8[platform=android]': { separatorHeight: 32 } '.separator-h-9[platform=android]': { separatorHeight: 36 } '.separator-h-10[platform=android]': { separatorHeight: 40 } '.separator-h-11[platform=android]': { separatorHeight: 44 } '.separator-h-12[platform=android]': { separatorHeight: 48 } '.separator-h-14[platform=android]': { separatorHeight: 56 } '.separator-h-16[platform=android]': { separatorHeight: 64 } '.separator-h-20[platform=android]': { separatorHeight: 80 } '.separator-h-24[platform=android]': { separatorHeight: 96 } '.separator-h-28[platform=android]': { separatorHeight: 112 } '.separator-h-32[platform=android]': { separatorHeight: 128 } '.separator-h-36[platform=android]': { separatorHeight: 144 } '.separator-h-40[platform=android]': { separatorHeight: 160 } '.separator-h-44[platform=android]': { separatorHeight: 176 } '.separator-h-48[platform=android]': { separatorHeight: 192 } '.separator-h-52[platform=android]': { separatorHeight: 208 } '.separator-h-56[platform=android]': { separatorHeight: 224 } '.separator-h-60[platform=android]': { separatorHeight: 240 } '.separator-h-64[platform=android]': { separatorHeight: 256 } '.separator-h-72[platform=android]': { separatorHeight: 288 } '.separator-h-80[platform=android]': { separatorHeight: 320 } '.separator-h-96[platform=android]': { separatorHeight: 384 } '.separator-h-px[platform=android]': { separatorHeight: '1px' } '.separator-h-0.5[platform=android]': { separatorHeight: 2 } '.separator-h-1.5[platform=android]': { separatorHeight: 6 } '.separator-h-2.5[platform=android]': { separatorHeight: 10 } '.separator-h-3.5[platform=android]': { separatorHeight: 14 } ``` ### showSelectionCheck ```css // Component(s): Ti.UI.ListView, Ti.UI.TableView // Property(ies): showSelectionCheck - Android Only '.show-selection-check[platform=android]': { showSelectionCheck: true } '.dont-show-selection-check[platform=android]': { showSelectionCheck: false } ``` ### showVerticalScrollIndicator ```css // Component(s): Ti.UI.ListView, Ti.UI.TableView // Property(ies): showVerticalScrollIndicator '.show-vertical-scrolling-indicator': { showVerticalScrollIndicator: true } '.dont-show-vertical-scrolling-indicator': { showVerticalScrollIndicator: false } ``` ### willScrollOnStatusTap ```css // Component(s): Ti.UI.ListView // Property(ies): willScrollOnStatusTap - iOS Only '.will-scroll-on-status-tap[platform=ios]': { willScrollOnStatusTap: true } '.will-not-scroll-on-status-tap[platform=ios]': { willScrollOnStatusTap: false } ```