purgetss 7.5.2 → 7.5.3

package/README.md

@@ -240,6 +240,67 @@ Fallback defaults when not set: `swap`/`reorder`/`snapTo` → 200ms; `shake` →
 
 See the full documentation at [purgetss.com/docs/animation-module/introduction](https://purgetss.com/docs/animation-module/introduction).
 
+### Appearance management
+
+Switch between Light, Dark, and System modes with automatic persistence:
+
+```js
+const { Appearance } = require('purgetss.ui')
+
+// Call once at app startup (e.g., in index.js before opening the first window)
+Appearance.init()
+```
+
+| Method      | Description                                                  |
+| ----------- | ------------------------------------------------------------ |
+| `init()`    | Restore the saved mode from `Ti.App.Properties`              |
+| `get()`     | Returns the current mode string                              |
+| `set(mode)` | Apply and persist a mode: `'system'`, `'light'`, or `'dark'` |
+| `toggle()`  | Switch between `'light'` and `'dark'`                        |
+
+Use it from any controller to respond to user actions:
+
+```js
+const { Appearance } = require('purgetss.ui')
+
+function selectDark() { Appearance.set('dark') }
+function selectLight() { Appearance.set('light') }
+function selectSystem() { Appearance.set('system') }
+```
+
+Requires `semantic.colors.json` in `app/assets/` for views to respond to mode changes. See the [Titanium docs on semantic colors](https://titaniumsdk.com/guide/Titanium_SDK/Titanium_SDK_How-tos/User_Interface_Deep_Dives/iOS_Dark_Mode.html) for the file format.
+
+### Default font families
+
+PurgeTSS generates `font-sans`, `font-serif`, and `font-mono` classes automatically with platform-appropriate values:
+
+| Class        | iOS                | Android       |
+| ------------ | ------------------ | ------------- |
+| `font-sans`  | `Helvetica Neue`   | `sans-serif`  |
+| `font-serif` | `Georgia`          | `serif`       |
+| `font-mono`  | `monospace`        | `monospace`   |
+
+Override or add families in `config.cjs`:
+
+```js
+// theme.extend.fontFamily → adds to defaults
+extend: {
+  fontFamily: {
+    display: 'AlfaSlabOne-Regular',
+    body: 'BarlowSemiCondensed-Regular'
+  }
+}
+
+// theme.fontFamily → replaces defaults entirely
+theme: {
+  fontFamily: {
+    sans: 'System',
+    mono: 'Courier',
+    display: 'AlfaSlabOne-Regular'
+  }
+}
+```
+
 ---
 
 ## Customizing default components

package/dist/purgetss.ui.js

@@ -1,4 +1,4 @@
-// PurgeTSS v7.5.2
+// PurgeTSS v7.5.3
 // Created by César Estrada
 // https://purgetss.com
 
@@ -906,3 +906,45 @@ function saveComponent({ source, directory = Ti.Filesystem.tempDirectory }) {
 exports.saveComponent = saveComponent
 
 exports.createAnimation = (args) => new Animation(args)
+
+// --- Appearance Management (Light/Dark/System) ---
+function Appearance() {
+  const PROP_KEY = 'userInterfaceStyle'
+  const STYLES = {
+    dark: Ti.UI.USER_INTERFACE_STYLE_DARK,
+    light: Ti.UI.USER_INTERFACE_STYLE_LIGHT,
+    system: Ti.UI.USER_INTERFACE_STYLE_UNSPECIFIED
+  }
+
+  let currentMode = 'system'
+
+  function applyMode(mode) {
+    currentMode = mode
+    Ti.UI.overrideUserInterfaceStyle = STYLES[mode]
+    Ti.App.Properties.setInt(PROP_KEY, STYLES[mode])
+  }
+
+  return {
+    init() {
+      const saved = Ti.App.Properties.getInt(PROP_KEY, STYLES.system)
+      currentMode = Object.keys(STYLES).find(key => STYLES[key] === saved) || 'system'
+      Ti.UI.overrideUserInterfaceStyle = saved
+    },
+
+    set(mode) {
+      if (!STYLES.hasOwnProperty(mode)) return
+      applyMode(mode)
+    },
+
+    get() {
+      return currentMode
+    },
+
+    toggle() {
+      const next = (currentMode === 'dark') ? 'light' : 'dark'
+      applyMode(next)
+    }
+  }
+}
+
+exports.Appearance = Appearance()

package/dist/utilities.tss

@@ -2250,9 +2250,6 @@
 '.rounded-full-2.5': { width: 10, height: 10, borderRadius: 5 }
 '.rounded-full-3.5': { width: 14, height: 14, borderRadius: 7 }
 
-// Property(ies): fontFamily
-// Component(s): Ti.UI.ActivityIndicator, Ti.UI.Button, Ti.UI.Label, Ti.UI.ListItem, Ti.UI.Picker, Ti.UI.PickerColumn, Ti.UI.PickerRow, Ti.UI.ProgressBar, Ti.UI.Switch, Ti.UI.TableViewRow, Ti.UI.TextArea, Ti.UI.TextField
-
 // Property(ies): fontSize
 // Component(s): Ti.UI.ActivityIndicator, Ti.UI.Button, Ti.UI.Label, Ti.UI.ListItem, Ti.UI.Picker, Ti.UI.PickerColumn, Ti.UI.PickerRow, Ti.UI.ProgressBar, Ti.UI.Switch, Ti.UI.TableViewRow, Ti.UI.TextArea, Ti.UI.TextField
 '.text-xs': { font: { fontSize: 12 } }
@@ -2281,6 +2278,14 @@
 '.font-extrabold': { font: { fontWeight: 'bold' } }
 '.font-black': { font: { fontWeight: 'bold' } }
 
+// Property(ies): fontFamily
+// Component(s): Ti.UI.ActivityIndicator, Ti.UI.Button, Ti.UI.Label, Ti.UI.ListItem, Ti.UI.Picker, Ti.UI.PickerColumn, Ti.UI.PickerRow, Ti.UI.ProgressBar, Ti.UI.Switch, Ti.UI.TableViewRow, Ti.UI.TextArea, Ti.UI.TextField
+'.font-mono': { font: { fontFamily: 'monospace' } }
+'.font-sans[platform=ios]': { font: { fontFamily: 'Helvetica Neue' } }
+'.font-serif[platform=ios]': { font: { fontFamily: 'Georgia' } }
+'.font-sans[platform=android]': { font: { fontFamily: 'sans-serif' } }
+'.font-serif[platform=android]': { font: { fontFamily: 'serif' } }
+
 // Property(ies): top, right, bottom, left - Gap for Grid System
 // Component(s): Ti.UI.ActivityIndicator, Ti.UI.Animation, Ti.UI.View, Ti.UI.Window
 '.gap-0': { top: 0, right: 0, bottom: 0, left: 0 }

package/experimental/completions2.js

@@ -247,9 +247,9 @@ function processCompoundClasses({ ..._base }) {
   // ! Configurables
   compoundClasses += generateGlossary('borderRadius-alternative', helpers.borderRadius(_base.borderRadius))
   compoundClasses += generateGlossary('borderRadius-full', helpers.borderRadiusFull(_base.borderRadius))
-  compoundClasses += generateGlossary('fontFamily', helpers.fontFamily(_base.fontFamily))
   compoundClasses += generateGlossary('fontSize', helpers.fontSize(_base.fontSize))
   compoundClasses += generateGlossary('fontWeight', helpers.fontWeight(_base.fontWeight))
+  compoundClasses += generateGlossary('fontFamily', helpers.fontFamily(_base.fontFamily))
   compoundClasses += generateGlossary('margin-alternative', helpers.gap(_base.margin))
   compoundClasses += generateGlossary('minimumFontSize', helpers.minimumFontSize(_base.fontSize))
   compoundClasses += generateGlossary('padding-alternative', helpers.padding(_base.padding))

package/lib/templates/purgetss.ui.js.cjs

@@ -905,3 +905,45 @@ function saveComponent({ source, directory = Ti.Filesystem.tempDirectory }) {
 exports.saveComponent = saveComponent
 
 exports.createAnimation = (args) => new Animation(args)
+
+// --- Appearance Management (Light/Dark/System) ---
+function Appearance() {
+  const PROP_KEY = 'userInterfaceStyle'
+  const STYLES = {
+    dark: Ti.UI.USER_INTERFACE_STYLE_DARK,
+    light: Ti.UI.USER_INTERFACE_STYLE_LIGHT,
+    system: Ti.UI.USER_INTERFACE_STYLE_UNSPECIFIED
+  }
+
+  let currentMode = 'system'
+
+  function applyMode(mode) {
+    currentMode = mode
+    Ti.UI.overrideUserInterfaceStyle = STYLES[mode]
+    Ti.App.Properties.setInt(PROP_KEY, STYLES[mode])
+  }
+
+  return {
+    init() {
+      const saved = Ti.App.Properties.getInt(PROP_KEY, STYLES.system)
+      currentMode = Object.keys(STYLES).find(key => STYLES[key] === saved) || 'system'
+      Ti.UI.overrideUserInterfaceStyle = saved
+    },
+
+    set(mode) {
+      if (!STYLES.hasOwnProperty(mode)) return
+      applyMode(mode)
+    },
+
+    get() {
+      return currentMode
+    },
+
+    toggle() {
+      const next = (currentMode === 'dark') ? 'light' : 'dark'
+      applyMode(next)
+    }
+  }
+}
+
+exports.Appearance = Appearance()

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "purgetss",
-  "version": "7.5.2",
+  "version": "7.5.3",
   "main": "src/index.js",
   "bin": {
     "purgetss": "bin/purgetss"

package/src/cli/commands/purge.js

@@ -191,7 +191,15 @@ function validateXML(xmlText, filePath) {
 function findSuspectLine(lines) {
   for (let i = 0; i < lines.length; i++) {
     const trimmed = lines[i].trim()
-    if (!trimmed || trimmed.startsWith('<!--')) continue
+    if (!trimmed) continue
+
+    // "--" inside XML comments (illegal in XML spec)
+    if (trimmed.includes('<!--')) {
+      const commentBody = trimmed.replace(/<!--/, '').replace(/-->.*$/, '')
+      if (/--/.test(commentBody)) return i + 1
+    }
+
+    if (trimmed.startsWith('<!--')) continue
 
     // Opening tag without tag name: "< class=..."
     if (/^<\s+\w+=/.test(trimmed)) return i + 1
@@ -235,8 +243,26 @@ function preValidateXML(xmlText, filePath) {
     const line = lines[i]
     const trimmed = line.trim()
 
-    // Skip empty lines and comments
-    if (!trimmed || trimmed.startsWith('<!--') || trimmed.startsWith('<Alloy')) {
+    // Skip empty lines and Alloy root tag
+    if (!trimmed || trimmed.startsWith('<Alloy')) {
+      continue
+    }
+
+    // Check for "--" inside XML comments (illegal in XML spec)
+    // e.g. <!-- Section: --modules Option --> is invalid because of the "--" before "modules"
+    if (trimmed.includes('<!--')) {
+      const commentBody = trimmed.replace(/<!--/, '').replace(/-->.*$/, '')
+      if (/--/.test(commentBody)) {
+        const dashMatch = commentBody.match(/--(\S*)/)
+        const offender = dashMatch ? `--${dashMatch[1]}` : '--'
+        throwPreValidationError({
+          relativePath,
+          lineNumber: i + 1,
+          lineContent: trimmed,
+          message: `XML comment contains illegal "--" sequence ("${offender}")`,
+          fix: `Replace "--" with "—" (em-dash) or reword the comment to avoid double dashes`
+        })
+      }
       continue
     }
 

package/src/core/builders/tailwind-helpers.js

@@ -383,7 +383,7 @@ export function combineAllValues(base, defaultTheme) {
   allValues.contentWidth = combineKeys(configFile.theme, base.width, 'contentWidth')
   allValues.countDownDuration = combineKeys(configFile.theme, base.spacing, 'countDownDuration')
   allValues.elevation = combineKeys(configFile.theme, base.spacing, 'elevation')
-  allValues.fontFamily = combineKeys(configFile.theme, defaultTheme.fontFamily, 'fontFamily')
+  allValues.fontFamily = combineKeys(configFile.theme, {}, 'fontFamily')
   allValues.fontSize = combineKeys(configFile.theme, base.fontSize, 'fontSize')
   allValues.fontWeight = combineKeys(configFile.theme, defaultTheme.fontWeight, 'fontWeight')
   allValues.gap = combineKeys(configFile.theme, base.spacing, 'gap')

package/src/shared/helpers/typography.js

@@ -26,18 +26,53 @@ function removeFractions(modifiersAndValues, extras = []) {
 
 /**
  * Font family property for text components
+ *
+ * Built-in platform defaults:
+ *   - font-sans → Android: 'sans-serif', iOS: 'Helvetica Neue'
+ *   - font-serif → Android: 'serif', iOS: 'Georgia'
+ *   - font-mono → 'monospace' (both platforms)
+ *
+ * User values from config.cjs override defaults cross-platform.
+ *
  * @param {Object} modifiersAndValues - Modifier and value pairs
  * @returns {string} Generated styles
  */
 export function fontFamily(modifiersAndValues) {
+  const platformDefaults = {
+    sans: { ios: 'Helvetica Neue', android: 'sans-serif' },
+    serif: { ios: 'Georgia', android: 'serif' }
+  }
+
+  const crossPlatformDefaults = { mono: 'monospace' }
+
+  const defaults = { ...modifiersAndValues }
+  const ios = {}
+  const android = {}
+
+  _.each(crossPlatformDefaults, (value, key) => {
+    if (!(key in defaults)) {
+      defaults[key] = value
+    }
+  })
+
+  _.each(platformDefaults, (platforms, key) => {
+    if (!(key in defaults)) {
+      ios[key] = platforms.ios
+      android[key] = platforms.android
+    }
+  })
+
+  const selectorsAndValues = {}
+  if (!_.isEmpty(defaults)) selectorsAndValues.default = defaults
+  if (!_.isEmpty(ios)) selectorsAndValues.ios = ios
+  if (!_.isEmpty(android)) selectorsAndValues.android = android
+
   return processProperties({
     prop: 'fontFamily',
     modules: 'Ti.UI.ActivityIndicator, Ti.UI.Button, Ti.UI.Label, Ti.UI.ListItem, Ti.UI.Picker, Ti.UI.PickerColumn, Ti.UI.PickerRow, Ti.UI.ProgressBar, Ti.UI.Switch, Ti.UI.TableViewRow, Ti.UI.TextArea, Ti.UI.TextField'
   }, {
     font: '{ font: { fontFamily: {value} } }'
-  }, {
-    default: modifiersAndValues
-  })
+  }, selectorsAndValues)
 }
 
 /**