purgetss 7.2.7 → 7.3.1

package/README.md

@@ -10,80 +10,70 @@
 
 </div>
 
-**PurgeTSS** is a toolkit designed to enhance the development of mobile applications using the **[Titanium framework](https://titaniumsdk.com)**. It introduces several key features to streamline the app development process, making it simpler and more efficient for developers.
+**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.
 
-It offers a range of tools such as customizable utility classes, support for icon fonts, a user-friendly Animation module, a straightforward grid system, and the added convenience of the `shades` command for crafting personalized colors.
+It includes utility classes, icon font support, an Animation module, a simple grid system, and the `shades` command for generating custom colors.
 
-With **PurgeTSS**, creating visually appealing and dynamic mobile apps becomes more accessible and efficient.
+If you build UI-heavy screens, PurgeTSS helps you move faster without hand-writing long TSS files.
 
 ---
 
-## What's New in v7.2.x
+## What's New in v7.3.x
 
-**FontAwesome 7 & Major Optimization**: **PurgeTSS v7.2** introduces full support for **FontAwesome 7**, including the new CSS custom properties format. This version also features a significant reduction in installation size and a complete internal restructuring for better performance and maintainability.
+**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.
 
-### ⚠️ Breaking Changes
+### Breaking changes
 
-- **Node.js 20+** required (due to `inquirer` v13 upgrade)
-- **Removed deprecated commands**:
-  - `copy-fonts` (use `icon-library` instead)
-  - `build-legacy` (legacy Tailwind build removed)
-- **Complete legacy mode removal**:
-  - All legacy-related code and conditional checks eliminated
-  - Legacy mode no longer supported anywhere in the codebase
+- **File rename**: Output file is now `utilities.tss` instead of `tailwind.tss`
+  - Generated file: `purgetss/styles/utilities.tss` (was `purgetss/styles/tailwind.tss`)
+  - Distribution file: `dist/utilities.tss` (was `dist/tailwind.tss`)
 
-### ✅ Major Improvements
+### Major improvements
 
-- **FontAwesome 7 Support**: Full compatibility with FontAwesome 7's new CSS custom properties (`--fa:`) format, while maintaining backward compatibility with version 6.
-- **Reduced Installation Size**: Installation size has been reduced by approximately **45MB** by moving non-essential assets to development dependencies.
-- **Improved Unicode Extraction**: Enhanced support for various Unicode formats, including short hex codes, ASCII symbols, and direct character mappings.
-- **Optimized Internal Structure**: Entire codebase restructured into specialized modules for improved readability and faster execution.
-- **Enhanced CLI Experience**: Reorganized commands into logical categories with improved error handling and intelligent command suggestions.
-- **Titanium SDK 13.1 Support**: Updated definitions to support new properties in Titanium SDK 13.1.0.GA while maintaining full compatibility with previous SDK versions.
-- **New Utility Classes**: Added support for properties like `navBarColor`, `forceBottomPosition`, and `multipleWindows` (available in latest SDKs).
+- **XML syntax validation**: Catches common Alloy XML malformations before processing
+  - Detects missing opening `<` brackets (e.g., `Label id=` instead of `<Label id=`)
+  - Shows detailed error messages with line numbers, context preview, and fix suggestions
+  - Saves debugging time by catching errors early in the build process
 
-### 🔄 Command Improvements
+- **Classic Titanium compatibility**: `deviceInfo()` function now works in both Alloy and Classic projects
+  - Removed dependency on `Alloy.isTablet`/`Alloy.isHandheld`
+  - Uses platform-based detection instead
 
-- **`build-fonts` simplified**:
-  - Automatically detects and handles both FontAwesome 6 and 7 formats.
-  - The `-f` flag now controls both font class names AND icon prefixes using filenames.
-- **`tailwind init`**: Removed redundant flags for a cleaner initialization process.
-- **`shades` command**: Improved precision in generating custom color shades.
-- **CLI Categories**: Commands are now grouped by purpose: Setup, Development, Assets, Utilities, and Maintenance.
+### Migration guide
 
-### 🔧 Migration Guide
+If you have references to `tailwind.tss` in your project, update them to `utilities.tss`:
 
-For most users, upgrading is seamless:
 ```bash
-npm install -g purgetss@latest
+# Update any custom scripts or paths
+# From: purgetss/styles/tailwind.tss
+# To:   purgetss/styles/utilities.tss
 ```
 
-**Key changes to note:**
-- **Node.js 20 or higher** is now required.
-- **FontAwesome 7**: If you use FA7, PurgeTSS will automatically handle the new `--fa:` properties.
-- **VS Code Extension**: We now recommend using `KevinYouu.tailwind-raw-reorder-tw4` for better compatibility with modern Tailwind versions and XML reordering.
-- **Clean reinstall**: If you experience issues, try a clean reinstall: `npm uninstall -g purgetss && npm install -g purgetss`.
+For most users, upgrading is straightforward:
+```bash
+npm install -g purgetss@latest
+```
 
 ---
 
 Here are its main functionalities:
 
-- **Tailwind-like Utility Classes**: **PurgeTSS** offers over 21,000 utility classes similar to Tailwind CSS, providing a vast array of styling options for your projects.
-- **Efficient Style Management**: It parses all your XML files to create a clean `app.tss` file, containing only the classes actually used in your project. This helps in reducing file size and improving performance.
-- **Customization and JIT Classes**: Developers can customize default classes via a simple configuration file. It also supports just-in-time (JIT) classes, allowing the creation of arbitrary values within views for tailored styling.
-- **Icon Fonts Integration**: **PurgeTSS** facilitates the use of popular icon fonts such as *Font Awesome*, *Material Icons*, *Material Symbols*, and *Framework7-Icons* in Buttons and Labels.
-- **fonts.tss Generation**: The `build-fonts` command creates a `fonts.tss` file with class definitions and fontFamily selectors for various font types. It supports both regular fonts and icon fonts, with simplified options for using filenames as class names and icon prefixes.
-- **Shades Command**: The toolkit includes a `shades` command that enables developers to generate custom color shades from a specified hex color, eliminating the need for external tools.
-- **Animation Module**: **PurgeTSS** comes with an Animation module to apply basic 2D Matrix animations or transformations to elements or arrays of elements.
-- **Grid System**: It includes a simple yet effective two-dimensional grid system to align and distribute elements within views.
+- **Utility-First Classes**: PurgeTSS ships with 21,000+ utility classes, so you get a lot of styling options out of the box.
+- **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.
+- **Customization and JIT classes**: You can customize default classes via a config file and use JIT classes for arbitrary values inside views.
+- **Icon fonts integration**: Use icon fonts such as Font Awesome, Material Icons, Material Symbols, and Framework7-Icons in Buttons and Labels.
+- **`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.
+- **Animation module**: Apply basic 2D matrix animations or transformations to elements or arrays of elements.
+- **Grid system**: A two-dimensional grid system to align and distribute elements within views.
 
-Overall, *PurgeTSS* aims to simplify the mobile app development process, offering tools and features that enhance productivity and creativity in designing user interfaces.
+In short, PurgeTSS keeps styling consistent and removes a lot of repetitive UI setup work.
 
 ### Visit the official documentation site at [purgetss.com](https://purgetss.com) to learn more.
 
 ## Requirements
 
-- **Titanium SDK** (Compatible with all versions; 13.1.0.GA recommended for full property support)
+- **Titanium SDK** (Compatible with all versions; 13.1.1.GA recommended for full property support)
 - **Alloy Framework** (for most commands)
 - **Node.js 20+** (required for the CLI tool)
 

package/bin/purgetss

@@ -115,7 +115,7 @@ program.helpInformation = function () {
     output.push(`  ${chalk.cyan('install-dependencies|id')}         Install ${chalk.green('ESLint')} and ${chalk.green('Tailwind CSS')}`)
     output.push('')
     output.push(`  ${chalk.green('Daily Development:')}`)
-    output.push(`  ${chalk.cyan('build|b')} ${chalk.gray('[options]')}               Generate ${chalk.yellow('tailwind.tss')} file`)
+    output.push(`  ${chalk.cyan('build|b')} ${chalk.gray('[options]')}               Generate ${chalk.yellow('utilities.tss')} file`)
     output.push(`  ${chalk.cyan('watch|w')} ${chalk.gray('[options]')}               Auto-run ${chalk.green('PurgeTSS')} on project compilation`)
     output.push(`  ${chalk.cyan('module|m')}                        Copy ${chalk.yellow('purgetss.ui.js')} module to your ${chalk.yellow('lib')} folder`)
     output.push('')
@@ -254,8 +254,8 @@ program
 program
   .command('build')
   .alias('b')
-  .description(`Generate ${chalk.yellow('tailwind.tss')} file`)
-  .addHelpText('after', `\nGenerates ${chalk.yellow('tailwind.tss')} file based on attributes in ${chalk.yellow('./purgetss/config.cjs')}\nAlso generates custom ${chalk.yellow('fontawesome.tss')} file if FontAwesome Beta/Pro is installed`)
+  .description(`Generate ${chalk.yellow('utilities.tss')} file`)
+  .addHelpText('after', `\nGenerates ${chalk.yellow('utilities.tss')} file based on attributes in ${chalk.yellow('./purgetss/config.cjs')}\nAlso generates custom ${chalk.yellow('fontawesome.tss')} file if FontAwesome Beta/Pro is installed`)
   .option('--glossary', 'Create a glossary folder with all generated classes')
   .action(async (options) => {
     try {
@@ -378,7 +378,7 @@ program
   .option('-s, --single', 'Generate a single color definition')
   .option('-l, --log', 'Log shades instead of saving them')
   .option('-j, --json', `Log shades in ${chalk.yellow('app/config.json')} format`)
-  .option('-t, --tailwind', `Log shades in ${chalk.yellow('tailwind.config.js')} format`)
+  .option('-t, --tailwind', `Log shades in ${chalk.yellow('utilities.tss.config.js')} format`)
   .action(async (hexcode, name, options) => {
     try {
       const result = await shades({ hexcode, name }, options)

package/dist/fontawesome.tss

@@ -7,16 +7,16 @@
 '.fa':{ font: { fontFamily: 'FontAwesome7Free-Solid' } }
 '.fas': { font: { fontFamily: 'FontAwesome7Free-Solid' } }
 '.far': { font: { fontFamily: 'FontAwesome7Free-Regular' } }
-'.fab': { font: { fontFamily: 'FontAwesome6Brands-Regular' } }
+'.fab': { font: { fontFamily: 'FontAwesome7Brands-Regular' } }
 
 '.fa-solid': { font: { fontFamily: 'FontAwesome7Free-Solid' } }
 '.fa-regular': { font: { fontFamily: 'FontAwesome7Free-Regular' } }
-'.fa-brands': { font: { fontFamily: 'FontAwesome6Brands-Regular' } }
+'.fa-brands': { font: { fontFamily: 'FontAwesome7Brands-Regular' } }
 
 '.fontawesome': { font: { fontFamily: 'FontAwesome7Free-Solid' } }
 '.fontawesome-solid': { font: { fontFamily: 'FontAwesome7Free-Solid' } }
 '.fontawesome-regular': { font: { fontFamily: 'FontAwesome7Free-Regular' } }
-'.fontawesome-brands': { font: { fontFamily: 'FontAwesome6Brands-Regular' } }
+'.fontawesome-brands': { font: { fontFamily: 'FontAwesome7Brands-Regular' } }
 
 // Font Sizes
 '.fa-lg': { font: { fontSize: 21 } }

package/dist/purgetss.ui.js

@@ -1,4 +1,4 @@
-// PurgeTSS v7.2.7
+// PurgeTSS v7.3.0
 // Created by César Estrada
 // https://purgetss.com
 
@@ -388,19 +388,24 @@ function deviceInfo() {
   console.warn('------------------- DEVICE INFO -------------------')
   const platform = Ti.Platform
   const displayCaps = platform.displayCaps
+
+  // Classic-compatible detection (no Alloy dependency)
+  const isTablet = platform.osname === 'ipad'
+  const isHandheld = ['iphone', 'android'].includes(platform.osname) && !isTablet
+
   console.warn(`
   version: ${platform.version}
   name: ${platform.name}
-  username: ${platform.username}
+  isTablet: ${isTablet}
+  isHandheld: ${isHandheld}
+  model: ${platform.model}
   locale: ${platform.locale}
   osname: ${platform.osname}
   ostype: ${platform.ostype}
-  model: ${platform.model}
+  username: ${platform.username}
   manufacturer: ${platform.manufacturer}
   architecture: ${platform.architecture}
   availableMemory: ${platform.availableMemory}
-  isTablet: ${Alloy.isTablet}
-  isHandheld: ${Alloy.isHandheld}
   Ti.Platform.displayCaps.dpi: ${displayCaps.dpi}
   Ti.Platform.displayCaps.density: ${displayCaps.density}
   Ti.Platform.displayCaps.platformWidth: ${displayCaps.platformWidth}

package/dist/{tailwind.tss → utilities.tss}

@@ -1,7 +1,4 @@
-// Based on Tailwind CSS v3.4.11: A utility-first CSS framework for rapidly building custom designs. ( https://tailwindcss.com )
-// Created by Adam Wathan ( https://twitter.com/adamwathan ).
-
-// Tailwind-like styles
+// Utility classes for Titanium
 // Generated with PurgeTSS
 // https://purgetss.com
 // default config.js file
@@ -1468,7 +1465,7 @@
 '.drag-apply': { draggingType: 'apply' }
 '.drag-animate': { draggingType: 'animate' }
 
-// Property(ies): shadowOffset, shadowRadius, shadowColor - Drop Shadow in Tailwind
+// Property(ies): shadowOffset, shadowRadius, shadowColor
 // Component(s): Ti.UI.Button, Ti.UI.Label
 '.drop-shadow-xs': { shadowOffset: { x: 0, y: 0 }, shadowRadius: 1, shadowColor: '#80000000' }
 '.drop-shadow-sm': { shadowOffset: { x: 0, y: 1 }, shadowRadius: 2, shadowColor: '#80000000' }
@@ -1676,7 +1673,7 @@
 
 // Ti.Media
 // Property(ies): scalingMode - ( Alternative )
-// Description: Background Size for compatibility with Tailwind classes
+// Description: Background Size for compatibility
 // Component(s): Ti.UI.ImageView
 '.bg-auto': { scalingMode: Ti.Media.IMAGE_SCALING_AUTO }
 '.bg-fill': { scalingMode: Ti.Media.IMAGE_SCALING_FILL }
@@ -1685,7 +1682,7 @@
 '.bg-contain': { scalingMode: Ti.Media.IMAGE_SCALING_ASPECT_FIT }
 
 // Property(ies): scalingMode - ( Alternative )
-// Description: Object Fit for compatibility with Tailwind classes
+// Description: Object Fit for compatibility
 // Component(s): Ti.UI.ImageView
 '.object-auto': { scalingMode: Ti.Media.IMAGE_SCALING_AUTO }
 '.object-fill': { scalingMode: Ti.Media.IMAGE_SCALING_FILL }
@@ -1715,7 +1712,7 @@
 '.pointer-events-auto': { touchEnabled: true }
 '.pointer-events-none': { touchEnabled: false }
 
-// Property(ies): iOS: viewShadowOffset, viewShadowRadius, viewShadowColor, Android: elevation - Box Shadow Effect in Tailwind
+// Property(ies): iOS: viewShadowOffset, viewShadowRadius, viewShadowColor, Android: elevation
 // Component(s): iOS: Ti.UI.View, Android: Ti.UI.Android.CardView, Ti.UI.Animation, Ti.UI.View
 '.shadow-xs': { viewShadowOffset: { x: 0, y: 0 }, viewShadowRadius: 1, viewShadowColor: '#80000000', elevation: 4 }
 '.shadow-sm': { viewShadowOffset: { x: 0, y: 1 }, viewShadowRadius: 2, viewShadowColor: '#80000000', elevation: 8 }

package/experimental/completions2.js

@@ -43,7 +43,7 @@ if (configOptions) {
   configOptions.widgets = configOptions.widgets ?? false
 }
 
-function autoBuildTailwindTSS(options = {}) {
+function autoBuildUtilitiesTSS(options = {}) {
   // Refresh config at the start of the function to ensure it's up-to-date
   configFile = getConfigFile()
   configFile.purge = configFile.purge ?? { mode: 'all' }
@@ -59,8 +59,7 @@ function autoBuildTailwindTSS(options = {}) {
   }
 
   saveGlossary = options.glossary ?? false
-  let tailwindStyles = fs.readFileSync(path.resolve(__dirname, '../lib/templates/tailwind/template.tss'), 'utf8')
-  tailwindStyles += fs.readFileSync(path.resolve(__dirname, '../lib/templates/tailwind/custom-template.tss'), 'utf8')
+  let tailwindStyles = fs.readFileSync(path.resolve(__dirname, '../lib/templates/tailwind/custom-template.tss'), 'utf8')
   tailwindStyles += (fs.existsSync(projectsConfigJS)) ? `// config.js file updated on: ${getFileUpdatedDate(projectsConfigJS)}\n` : '// default config.js file\n'
 
   const baseValues = combineDefaultThemeWithConfigFile()
@@ -76,14 +75,14 @@ function autoBuildTailwindTSS(options = {}) {
 
   if (fs.existsSync(projectsConfigJS)) {
     makeSureFolderExists(cwd + '/purgetss/styles/')
-    saveFile(cwd + '/purgetss/styles/tailwind.tss', tailwindStyles)
-    logger.file('./purgetss/styles/tailwind.tss')
+    saveFile(cwd + '/purgetss/styles/utilities.tss', tailwindStyles)
+    logger.file('./purgetss/styles/utilities.tss')
   } else {
-    saveFile(path.resolve(__dirname, '../dist/tailwind.tss'), tailwindStyles)
-    logger.file('./dist/tailwind.tss')
+    saveFile(path.resolve(__dirname, '../dist/utilities.tss'), tailwindStyles)
+    logger.file('./dist/utilities.tss')
   }
 }
-export { autoBuildTailwindTSS }
+export { autoBuildUtilitiesTSS }
 
 function processCustomClasses() {
   let tailwindStyles = ''

package/lib/templates/create/index.js

@@ -0,0 +1,5 @@
+$.index.addEventListener('open', () => {
+  Ti.API.info('PurgeTSS: Index window opened')
+})
+
+$.index.open()

package/lib/templates/create/index.xml

@@ -0,0 +1,68 @@
+<Alloy>
+  <Window class="extend-safe-area-false bg-gradient-to-b from-purple-700 to-blue-800">
+    <ScrollView class="vertical mx-4">
+      <!-- Header -->
+      <Label class="text-center text-3xl font-bold text-white">Welcome to PurgeTSS</Label>
+      <Label class="text-center text-sm text-white">Tailwind-inspired utility classes for Titanium/Alloy</Label>
+
+      <!-- Typography Examples -->
+      <Label class="mt-4 text-center text-xl font-semibold text-white">Typography</Label>
+
+      <Label class="m-2 h-auto text-center text-lg font-bold text-purple-400">Heading Text</Label>
+      <Label class="mx-2 text-center text-sm text-gray-300">Body text with normal weight</Label>
+      <Label class="m-2 h-auto text-center text-xs italic text-green-400">Small italic text</Label>
+
+      <!-- Color Examples -->
+      <Label class="mt-4 text-center text-xl font-semibold text-white">Colors</Label>
+
+      <View class="horizontal my-2">
+        <View class="wh-12 m-1 rounded bg-red-500" />
+        <View class="wh-12 m-1 rounded bg-orange-500" />
+        <View class="wh-12 m-1 rounded bg-amber-500" />
+        <View class="wh-12 m-1 rounded bg-yellow-500" />
+        <View class="wh-12 m-1 rounded bg-lime-500" />
+        <View class="wh-12 m-1 rounded bg-green-500" />
+        <View class="wh-12 m-1 rounded bg-emerald-500" />
+        <View class="wh-12 m-1 rounded bg-teal-500" />
+        <View class="wh-12 m-1 rounded bg-cyan-500" />
+        <View class="wh-12 m-1 rounded bg-sky-500" />
+        <View class="wh-12 m-1 rounded bg-blue-500" />
+        <View class="wh-12 m-1 rounded bg-indigo-500" />
+        <View class="wh-12 m-1 rounded bg-violet-500" />
+        <View class="wh-12 m-1 rounded bg-purple-500" />
+        <View class="wh-12 m-1 rounded bg-fuchsia-500" />
+        <View class="wh-12 m-1 rounded bg-pink-500" />
+        <View class="wh-12 m-1 rounded bg-rose-500" />
+        <View class="wh-12 bg-brand-500 m-1 rounded" />
+      </View>
+
+      <!-- Layout Examples -->
+      <Label class="mt-4 text-center text-xl font-semibold text-white">Layouts</Label>
+
+      <Label class="mt-2 text-center text-xs text-gray-400">Horizontal layout</Label>
+      <View class="horizontal">
+        <View class="wh-12 m-1 rounded bg-red-500" />
+        <View class="wh-12 m-1 rounded bg-green-500" />
+        <View class="wh-12 m-1 rounded bg-blue-500" />
+      </View>
+
+      <Label class="mt-2 text-center text-xs text-gray-400">Vertical layout</Label>
+      <View class="vertical mb-2">
+        <View class="wh-12 m-1 rounded bg-yellow-500" />
+        <View class="wh-12 m-1 rounded bg-pink-500" />
+      </View>
+
+      <!-- Border & Radius Examples -->
+      <Label class="mt-4 text-center text-xl font-semibold text-white">Borders & Radius</Label>
+
+      <View class="horizontal mt-2">
+        <View class="wh-14 m-1 rounded border-2 border-white bg-black/30" />
+        <View class="rounded-full-14 m-1 border-2 border-blue-500 bg-black/30" />
+        <View class="wh-14 m-1 rounded-lg border-2 border-purple-500 bg-black/30" />
+      </View>
+
+      <!-- CTA Button -->
+      <Label class="mt-2 text-center text-xs text-blue-50">Open app/views/index.xml to customize this screen</Label>
+    </ScrollView>
+  </Window>
+</Alloy>

package/lib/templates/fontawesome/beta-reset.tss

@@ -4,20 +4,20 @@
 '.fas': { font: { fontFamily: 'FontAwesome6Pro-Solid' } }
 '.fal': { font: { fontFamily: 'FontAwesome6Pro-Light' } }
 '.far': { font: { fontFamily: 'FontAwesome6Pro-Regular' } }
-'.fab': { font: { fontFamily: 'FontAwesome6Brands-Regular' } }
+'.fab': { font: { fontFamily: 'FontAwesome7Brands-Regular' } }
 
 '.fa-thin': { font: { fontFamily: 'FontAwesome6Pro-Thin' } }
 '.fa-solid': { font: { fontFamily: 'FontAwesome6Pro-Solid' } }
 '.fa-light': { font: { fontFamily: 'FontAwesome6Pro-Light' } }
 '.fa-regular': { font: { fontFamily: 'FontAwesome6Pro-Regular' } }
-'.fa-brands': { font: { fontFamily: 'FontAwesome6Brands-Regular' } }
+'.fa-brands': { font: { fontFamily: 'FontAwesome7Brands-Regular' } }
 
 '.fontawesome': { font: { fontFamily: 'FontAwesome6Pro-Solid' } }
 '.fontawesome-thin': { font: { fontFamily: 'FontAwesome6Pro-Thin' } }
 '.fontawesome-solid': { font: { fontFamily: 'FontAwesome6Pro-Solid' } }
 '.fontawesome-light': { font: { fontFamily: 'FontAwesome6Pro-Light' } }
 '.fontawesome-regular': { font: { fontFamily: 'FontAwesome6Pro-Regular' } }
-'.fontawesome-brands': { font: { fontFamily: 'FontAwesome6Brands-Regular' } }
+'.fontawesome-brands': { font: { fontFamily: 'FontAwesome7Brands-Regular' } }
 
 // Font Sizes
 '.fa-1x': { font: { fontSize: 16 } }

package/lib/templates/fontawesome/free-reset.tss

@@ -2,16 +2,16 @@
 '.fa':{ font: { fontFamily: 'FontAwesome7Free-Solid' } }
 '.fas': { font: { fontFamily: 'FontAwesome7Free-Solid' } }
 '.far': { font: { fontFamily: 'FontAwesome7Free-Regular' } }
-'.fab': { font: { fontFamily: 'FontAwesome6Brands-Regular' } }
+'.fab': { font: { fontFamily: 'FontAwesome7Brands-Regular' } }
 
 '.fa-solid': { font: { fontFamily: 'FontAwesome7Free-Solid' } }
 '.fa-regular': { font: { fontFamily: 'FontAwesome7Free-Regular' } }
-'.fa-brands': { font: { fontFamily: 'FontAwesome6Brands-Regular' } }
+'.fa-brands': { font: { fontFamily: 'FontAwesome7Brands-Regular' } }
 
 '.fontawesome': { font: { fontFamily: 'FontAwesome7Free-Solid' } }
 '.fontawesome-solid': { font: { fontFamily: 'FontAwesome7Free-Solid' } }
 '.fontawesome-regular': { font: { fontFamily: 'FontAwesome7Free-Regular' } }
-'.fontawesome-brands': { font: { fontFamily: 'FontAwesome6Brands-Regular' } }
+'.fontawesome-brands': { font: { fontFamily: 'FontAwesome7Brands-Regular' } }
 
 // Font Sizes
 '.fa-lg': { font: { fontSize: 21 } }

package/lib/templates/fontawesome/pro-reset.tss

@@ -4,20 +4,20 @@
 '.fas': { font: { fontFamily: 'FontAwesome6Pro-Solid' } }
 '.fal': { font: { fontFamily: 'FontAwesome6Pro-Light' } }
 '.far': { font: { fontFamily: 'FontAwesome6Pro-Regular' } }
-'.fab': { font: { fontFamily: 'FontAwesome6Brands-Regular' } }
+'.fab': { font: { fontFamily: 'FontAwesome7Brands-Regular' } }
 
 '.fa-thin': { font: { fontFamily: 'FontAwesome6Pro-Thin' } }
 '.fa-solid': { font: { fontFamily: 'FontAwesome6Pro-Solid' } }
 '.fa-light': { font: { fontFamily: 'FontAwesome6Pro-Light' } }
 '.fa-regular': { font: { fontFamily: 'FontAwesome6Pro-Regular' } }
-'.fa-brands': { font: { fontFamily: 'FontAwesome6Brands-Regular' } }
+'.fa-brands': { font: { fontFamily: 'FontAwesome7Brands-Regular' } }
 
 '.fontawesome': { font: { fontFamily: 'FontAwesome6Pro-Solid' } }
 '.fontawesome-thin': { font: { fontFamily: 'FontAwesome6Pro-Thin' } }
 '.fontawesome-solid': { font: { fontFamily: 'FontAwesome6Pro-Solid' } }
 '.fontawesome-light': { font: { fontFamily: 'FontAwesome6Pro-Light' } }
 '.fontawesome-regular': { font: { fontFamily: 'FontAwesome6Pro-Regular' } }
-'.fontawesome-brands': { font: { fontFamily: 'FontAwesome6Brands-Regular' } }
+'.fontawesome-brands': { font: { fontFamily: 'FontAwesome7Brands-Regular' } }
 
 // Font Sizes
 '.fa-lg': { font: { fontSize: 21 } }

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

@@ -387,19 +387,24 @@ function deviceInfo() {
   console.warn('------------------- DEVICE INFO -------------------')
   const platform = Ti.Platform
   const displayCaps = platform.displayCaps
+
+  // Classic-compatible detection (no Alloy dependency)
+  const isTablet = platform.osname === 'ipad'
+  const isHandheld = ['iphone', 'android'].includes(platform.osname) && !isTablet
+
   console.warn(`
   version: ${platform.version}
   name: ${platform.name}
-  username: ${platform.username}
+  isTablet: ${isTablet}
+  isHandheld: ${isHandheld}
+  model: ${platform.model}
   locale: ${platform.locale}
   osname: ${platform.osname}
   ostype: ${platform.ostype}
-  model: ${platform.model}
+  username: ${platform.username}
   manufacturer: ${platform.manufacturer}
   architecture: ${platform.architecture}
   availableMemory: ${platform.availableMemory}
-  isTablet: ${Alloy.isTablet}
-  isHandheld: ${Alloy.isHandheld}
   Ti.Platform.displayCaps.dpi: ${displayCaps.dpi}
   Ti.Platform.displayCaps.density: ${displayCaps.density}
   Ti.Platform.displayCaps.platformWidth: ${displayCaps.platformWidth}

package/lib/templates/tailwind/custom-template.tss

@@ -1,4 +1,3 @@
-
-// Tailwind-like styles
+// Utility classes for Titanium
 // Generated with PurgeTSS
 // https://purgetss.com

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "purgetss",
-  "version": "7.2.7",
+  "version": "7.3.1",
   "main": "src/index.js",
   "bin": {
     "purgetss": "bin/purgetss"
@@ -57,7 +57,7 @@
   "keywords": [
     "Appcelerator",
     "Titanium",
-    "tailwind.tss",
+    "utilities.tss",
     "fontawesome.tss",
     "cli"
   ],

package/src/cli/commands/create.js

@@ -27,7 +27,7 @@ import { start, finish } from '../utils/cli-helpers.js'
  */
 function robustDelete(folderPath, callback) {
   const deleteCommand = `chown -R $USER "${folderPath}" 2>/dev/null; rm -rf "${folderPath}"`
-  
+
   exec(deleteCommand, (error) => {
     if (error) {
       // Retry once after a brief delay for stubborn node_modules
@@ -64,6 +64,31 @@ function createProject(workspace, argsName, projectID, options) {
   execSync(`ti create -n ${projectName} -t app -p all --alloy --no-prompt --id ${projectID}`)
   execSync(`cd ${projectDirectory} && purgetss w && purgetss b`)
 
+  // Remove default index.tss file (not needed with PurgeTSS - app.tss is auto-generated)
+  // Use argsName instead of projectName because projectName includes quotes for shell commands
+  const indexTssPath = `${workspace}/${argsName}/app/styles/index.tss`
+
+  if (fs.existsSync(indexTssPath)) {
+    try {
+      fs.unlinkSync(indexTssPath)
+    } catch (error) {
+      logger.error(`Failed to remove index.tss: ${error.message}`)
+    }
+  }
+
+  // Copy PurgeTSS welcome screen (index.xml and index.js)
+  const templatesDir = path.resolve(projectRoot, 'lib/templates/create')
+  const viewsDir = `${workspace}/${argsName}/app/views`
+  const controllersDir = `${workspace}/${argsName}/app/controllers`
+
+  try {
+    fs.copyFileSync(`${templatesDir}/index.xml`, `${viewsDir}/index.xml`)
+    fs.copyFileSync(`${templatesDir}/index.js`, `${controllersDir}/index.js`)
+    logger.info('PurgeTSS welcome screen installed')
+  } catch (error) {
+    logger.error(`Failed to copy PurgeTSS templates: ${error.message}`)
+  }
+
   if (options.vendor) {
     logger.info('Installing Fonts')
     execSync(`cd ${projectDirectory} && purgetss il -m -v=${options.vendor}`)
@@ -148,6 +173,9 @@ export function create(args, options) {
               console.log('')
               logger.warn(chalk.yellow('Project creation has been canceled!'))
             }
+            return null
+          }).catch(error => {
+            logger.error(error)
           })
         }
       } else {
@@ -159,8 +187,8 @@ export function create(args, options) {
       logger.info('You must have', chalk.green('`app.idprefix`'), 'and', chalk.green('`app.workspace`'), 'configured to create a project with', chalk.green('`PurgeTSS`'))
       console.log('')
       logger.info('Please, set them like this:')
-      logger.info(chalk.green('ti config app.idprefix'), chalk.yellow("'com.your.reverse.domain'"))
-      logger.info(chalk.green('ti config app.workspace'), chalk.yellow("'path/to/your/workspace'"))
+      logger.info(chalk.green('ti config app.idprefix'), chalk.yellow(`'com.your.reverse.domain'`))
+      logger.info(chalk.green('ti config app.workspace'), chalk.yellow(`'path/to/your/workspace'`))
     }
   })
 }

package/src/cli/commands/dependencies.js

@@ -59,7 +59,7 @@ export function dependencies(options) {
 
   // Install Tailwind CSS
   logger.info(`Installing ${chalk.green('Tailwind CSS')}`)
-  execSync(`cd "${cwd}" && npm i -D tailwindcss && npx tailwindcss init`)
+  execSync(`cd "${cwd}" && npm i -D tailwindcss@3 && npx tailwindcss init`)
 
   logger.info('The dependencies and config files have been installed successfully!')
 

package/src/cli/commands/init.js

@@ -177,7 +177,7 @@ export function init(options = {}) {
   // Get commands when needed
   const { methodCommand, oppositeCommand } = getCommands()
 
-  // tailwind.tss
+  // utilities.tss
   if (!fs.existsSync(projectsTailwind_TSS)) {
     buildTailwindBasedOnConfigOptions(options)
   }

package/src/cli/commands/purge.js

@@ -123,6 +123,112 @@ function encodeHTML(str) {
   return str.replace(/&/gm, i => code[i])
 }
 
+/**
+ * Validate XML syntax before processing
+ * Returns true if valid, throws error if invalid
+ */
+function validateXML(xmlText, filePath) {
+  // Pre-validate: check for common Alloy XML malformations
+  // preValidateXML will throw a special error that should be caught at a higher level
+  const preValidationError = preValidateXML(xmlText, filePath)
+  if (preValidationError) {
+    throw preValidationError
+  }
+
+  try {
+    convert.xml2json(encodeHTML(xmlText), { compact: true })
+    return true
+  } catch (error) {
+    // Parse line/column from error message
+    const lineMatch = error.message.match(/Line:\s*(\d+)/)
+    const columnMatch = error.message.match(/Column:\s*(\d+)/)
+    const charMatch = error.message.match(/Char:\s*(.+)/)
+
+    let errorMessage = chalk.red(`\n::PurgeTSS:: XML Syntax Error\n`) +
+      chalk.yellow(`File: "${filePath}"\n`)
+
+    if (lineMatch || columnMatch) {
+      const lineNum = lineMatch ? parseInt(lineMatch[1]) : '?'
+      const colNum = columnMatch ? parseInt(columnMatch[1]) : '?'
+      const badChar = charMatch ? charMatch[1] : '?'
+
+      errorMessage += chalk.yellow(`Error near line: ${lineNum}\n\n`)
+
+      // Extract and show context: line before, error line, and line after
+      const lines = xmlText.split('\n')
+      const startLine = Math.max(0, lineNum - 2)
+      const endLine = Math.min(lines.length, lineNum + 2)
+
+      errorMessage += chalk.gray('Context:\n')
+      for (let i = startLine; i < endLine; i++) {
+        const lineNumDisplay = i + 1
+        const isTargetLine = (lineNumDisplay === lineNum)
+        const prefix = isTargetLine ? chalk.red('>>>') : chalk.gray('   ')
+        const lineContent = lines[i] || ''
+
+        errorMessage += `${prefix} ${chalk.gray(String(lineNumDisplay).padStart(3, ' '))}: ${lineContent}\n`
+      }
+      errorMessage += '\n'
+
+      errorMessage += chalk.red(`Error: Unmatched or malformed tag (missing < or >)\n`)
+    } else {
+      errorMessage += chalk.yellow(`Error details: ${error.message}\n`)
+    }
+
+    errorMessage += chalk.gray('\nTip: Check for tags missing opening < or closing >\n')
+
+    throw new Error(errorMessage)
+  }
+}
+
+/**
+ * Pre-validate XML for common Alloy malformations
+ * Returns Error if problem found, null if OK
+ */
+function preValidateXML(xmlText, filePath) {
+  const lines = xmlText.split('\n')
+
+  // Check for tags without opening < (common mistake: Label, View, etc. without <)
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]
+    const trimmed = line.trim()
+
+    // Skip empty lines, comments, and closing tags
+    if (!trimmed || trimmed.startsWith('<!--') || trimmed.startsWith('</') || trimmed.startsWith('<Alloy') || trimmed.startsWith('</')) {
+      continue
+    }
+
+    // Check for line starting with uppercase letter followed by space and common Alloy attributes
+    // Pattern: "Label id=", "View class=","Button onClick=", etc. WITHOUT opening <
+    const tagWithoutOpening = trimmed.match(/^[A-Z][a-zA-Z0-9_]+\s+(id|class|onClick|onOpen|onClose|height|width|backgroundColor|color|font|text|hintText|imageUrl)=/)
+
+    if (tagWithoutOpening) {
+      const tagName = trimmed.split(/\s+|[>=]/)[0]
+      const relativePath = filePath.replace(process.cwd() + '/', '')
+
+      // Create a custom error with details for the caller to handle
+      const error = new Error(`XML Syntax Error in ${relativePath}:${i + 1}`)
+      error.isPreValidationError = true
+      error.filePath = relativePath
+      error.lineNumber = i + 1
+      error.lineContent = line.trim()
+      error.tagName = tagName
+
+      // Print error using logger (still throw, but caller can catch and handle)
+      logger.error('XML Syntax Error')
+      logger.warn(`File: "${relativePath}"`)
+      logger.warn(`Line: ${i + 1}`)
+      logger.warn(`Content: "${line.trim()}"`)
+      logger.warn(`Error: Tag "<${tagName}>" is missing opening "<"`)
+      logger.warn(`Fix: Change "${tagName}" to "<${tagName}>"`)
+
+      throw error
+    }
+  }
+
+  return false
+}
+
 /**
  * Extract classes from file content
  * COPIED exactly from original extractClasses() function
@@ -131,7 +237,7 @@ function extractClasses(currentText, currentFile) {
   try {
     const jsontext = convert.xml2json(encodeHTML(currentText), { compact: true })
 
-    return traverse(JSON.parse(jsontext)).reduce(function(acc, value) {
+    return traverse(JSON.parse(jsontext)).reduce(function (acc, value) {
       if (this.key === 'class' || this.key === 'id') acc.push(value.split(' '))
       return acc
     }, [])
@@ -246,7 +352,17 @@ function getUniqueClasses() {
   const configFile = getConfigFile()
   _.each(viewPaths, viewPath => {
     const file = fs.readFileSync(viewPath, 'utf8')
-    if (file) allClasses.push((configFile.purge.mode === 'all') ? file.match(/[^<>"'`\s]*[^<>"'`\s:]/g) : extractClasses(file, viewPath))
+    if (file) {
+      // Validate XML syntax first, regardless of mode
+      validateXML(file, viewPath)
+
+      // Then extract classes based on mode
+      if (configFile.purge.mode === 'all') {
+        allClasses.push(file.match(/[^<>"'`\s]*[^<>"'`\s:]/g))
+      } else {
+        allClasses.push(extractClasses(file, viewPath))
+      }
+    }
   })
 
   const controllerPaths = getControllerPaths()
@@ -315,7 +431,7 @@ function extractClassesOnly(currentText, currentFile) {
   try {
     const jsontext = convert.xml2json(encodeHTML(currentText), { compact: true })
 
-    return traverse(JSON.parse(jsontext)).reduce(function(acc, value) {
+    return traverse(JSON.parse(jsontext)).reduce(function (acc, value) {
       if (this.key === 'class' || this.key === 'classes' || this.key === 'icon' || this.key === 'activeIcon') acc.push(value.split(' '))
       return acc
     }, [])
@@ -331,7 +447,12 @@ function extractClassesOnly(currentText, currentFile) {
 function getClassesOnlyFromXMLFiles() {
   const allClasses = []
   const viewPaths = getViewPaths()
-  _.each(viewPaths, viewPath => allClasses.push(extractClassesOnly(fs.readFileSync(viewPath, 'utf8'), viewPath)))
+  _.each(viewPaths, viewPath => {
+    const file = fs.readFileSync(viewPath, 'utf8')
+    // Validate XML before processing
+    validateXML(file, viewPath)
+    allClasses.push(extractClassesOnly(file, viewPath))
+  })
 
   const uniqueClasses = []
   _.each(_.uniq(_.flattenDeep(allClasses)).sort(), uniqueClass => {
@@ -455,7 +576,20 @@ export function purgeClasses(options) {
 
     backupOriginalAppTss()
 
-    const uniqueClasses = getUniqueClasses()
+    let uniqueClasses
+
+    try {
+      uniqueClasses = getUniqueClasses()
+    } catch (error) {
+      // Handle pre-validation errors (XML syntax errors detected before parsing)
+      if (error.isPreValidationError) {
+        // Error already printed by preValidateXML, exit cleanly
+        // eslint-disable-next-line n/no-process-exit
+        process.exit(1)
+      }
+      // Re-throw other errors
+      throw error
+    }
 
     let tempPurged = copyResetTemplateAnd_appTSS()
 

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

@@ -8,7 +8,7 @@
 
 // Import functions from their new modular locations
 import * as helpers from '../../shared/helpers.js'
-import { autoBuildTailwindTSS } from '../../../experimental/completions2.js'
+import { autoBuildUtilitiesTSS } from '../../../experimental/completions2.js'
 
 /**
  * Build Tailwind (AUTO mode using experimental completions engine)
@@ -16,7 +16,7 @@ import { autoBuildTailwindTSS } from '../../../experimental/completions2.js'
  */
 export function buildTailwind(options) {
   // Always modern mode in v7.1 - legacy removed completely
-  autoBuildTailwindTSS(options)
+  autoBuildUtilitiesTSS(options)
 }
 
 /**

package/src/core/purger/tailwind-purger.js

@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 /**
  * PurgeTSS v7.1.0 - Core Purger: Tailwind
- * Tailwind CSS purging engine - removes unused Tailwind classes
+ * utilities.tss purging engine - removes unused classes
  *
  * COPIED from src/index.js during refactorization - NO CHANGES to logic.
  *
@@ -42,18 +42,18 @@ function cleanClassNameFn(className) {
  * NO CHANGES to logic, preserving 100% of original functionality
  *
  * @param {Array} uniqueClasses - Array of unique class names found in XML files
- * @returns {string} Purged Tailwind CSS classes as string
+ * @returns {string} Purged utilities.tss classes as string
  */
 export function purgeTailwind(uniqueClasses, debug = false) {
   if (debug) localStart()
 
-  logger.info('Purging', chalk.yellow('Tailwind'), 'styles...')
+  logger.info('Purging', chalk.yellow('utilities.tss'), 'styles...')
 
   let purgedClasses = ''
   let tailwindClasses = fs.readFileSync(projectsTailwind_TSS, 'utf8').split(/\r?\n/)
 
-  if (`// config.js file updated on: ${getFileUpdatedDate(projectsConfigJS)}` !== tailwindClasses[6]) {
-    logger.info(chalk.yellow('config.js'), 'file changed!, rebuilding tailwind.tss...')
+  if (`// config.js file updated on: ${getFileUpdatedDate(projectsConfigJS)}` !== tailwindClasses[3]) {
+    logger.info(chalk.yellow('config.js'), 'file changed!, rebuilding utilities.tss...')
     checkIfColorModule()
     buildTailwindBasedOnConfigOptions()
     createDefinitionsFile()
@@ -211,7 +211,7 @@ export function purgeTailwind(uniqueClasses, debug = false) {
   // Add arbitrary values
   purgedClasses += (arbitraryValues !== '\n// Arbitrary Values\n') ? arbitraryValues : ''
 
-  if (debug) localFinish('Purging ' + chalk.yellow('Tailwind') + ' styles...')
+  if (debug) localFinish('Purging ' + chalk.yellow('utilities.tss') + ' styles...')
 
   return purgedClasses
 }

package/src/dev/builders/tailwind-builder.js

@@ -4,20 +4,20 @@
  * Builds Tailwind CSS files for development/distribution using auto-generation.
  * COPIED from lib/build-tailwind.js - NO CHANGES to logic.
  *
- * Generates: ./dist/tailwind.tss
+ * Generates: ./dist/utilities.tss
  *
  * @since 7.1.0 (refactored from lib/)
  * @author César Estrada
  */
 
-import { autoBuildTailwindTSS } from '../../../experimental/completions2.js'
+import { autoBuildUtilitiesTSS } from '../../../experimental/completions2.js'
 
 /**
  * Main builder function
  * COPIED exactly from original constructor() function
  */
 export function buildTailwind() {
-  autoBuildTailwindTSS()
+  autoBuildUtilitiesTSS()
 }
 
 // Execute if run directly

package/src/index.js

@@ -5,7 +5,7 @@
  * All functionality is accessed through CLI commands:
  *
  * - purgetss              (initialize and purge)
- * - purgetss build        (build tailwind.tss)
+ * - purgetss build        (build utilities.tss)
  * - purgetss build-fonts  (build fonts)
  * - purgetss module       (install UI modules)
  * - purgetss watch        (setup auto-purging)

package/src/shared/constants.js

@@ -37,7 +37,7 @@ export const projectsFontAwesomeJS = `${cwd}/app/lib/fontawesome.js`
 
 export const projectsPurgeTSSFolder = `${cwd}/purgetss`
 export const projectsConfigJS = `${cwd}/purgetss/config.cjs`
-export const projectsTailwind_TSS = `${cwd}/purgetss/styles/tailwind.tss`
+export const projectsTailwind_TSS = `${cwd}/purgetss/styles/utilities.tss`
 export const projectsPurge_TSS_Fonts_Folder = `${cwd}/purgetss/fonts`
 export const projectsPurge_TSS_Styles_Folder = `${cwd}/purgetss/styles`
 export const projectsFA_TSS_File = `${cwd}/purgetss/styles/fontawesome.tss`
@@ -57,7 +57,7 @@ export const srcLibF7 = path.resolve(projectRoot, './dist/framework7icons.js')
 export const srcPurgeTSSLibrary = path.resolve(projectRoot, './dist/purgetss.ui.js')
 
 // TSS Files (generated)
-export const srcTailwindTSS = path.resolve(projectRoot, './dist/tailwind.tss')
+export const srcTailwindTSS = path.resolve(projectRoot, './dist/utilities.tss')
 export const srcFontAwesomeTSSFile = path.resolve(projectRoot, './dist/fontawesome.tss')
 export const srcFramework7FontTSSFile = path.resolve(projectRoot, './dist/framework7icons.tss')
 export const srcMaterialIconsTSSFile = path.resolve(projectRoot, './dist/materialicons.tss')

package/src/shared/helpers/animation.js

@@ -314,7 +314,7 @@ export function viewShadowAndroid() {
  */
 export function viewShadowIos(shadowValue = '#80000000') {
   let convertedStyles = processComments({
-    prop: 'viewShadowOffset, viewShadowRadius, viewShadowColor - Box Shadow Effect in Tailwind - iOS Only',
+    prop: 'viewShadowOffset, viewShadowRadius, viewShadowColor - iOS Only',
     modules: 'Ti.UI.View'
   })
 
@@ -504,7 +504,7 @@ export function activitySharedElementReturnTransition() {
 }
 export function viewShadowV6(shadowValue = '#80000000') {
   let convertedStyles = processComments({
-    prop: 'iOS: viewShadowOffset, viewShadowRadius, viewShadowColor, Android: elevation - Box Shadow Effect in Tailwind',
+    prop: 'iOS: viewShadowOffset, viewShadowRadius, viewShadowColor, Android: elevation',
     modules: 'iOS: Ti.UI.View, Android: Ti.UI.Android.CardView, Ti.UI.Animation, Ti.UI.View'
   })
 

package/src/shared/helpers/media.js

@@ -627,7 +627,7 @@ export function tiMedia(legacy = true) {
   convertedStyles += processProperties({
     prop: 'scalingMode - ( Alternative )',
     modules: 'Ti.UI.ImageView',
-    description: 'Background Size for compatibility with Tailwind classes'
+    description: 'Background Size for compatibility'
   }, {
     bg: '{ scalingMode: {value} }'
   }, {
@@ -643,7 +643,7 @@ export function tiMedia(legacy = true) {
   convertedStyles += processProperties({
     prop: 'scalingMode - ( Alternative )',
     modules: 'Ti.UI.ImageView',
-    description: 'Object Fit for compatibility with Tailwind classes'
+    description: 'Object Fit for compatibility'
   }, {
     object: '{ scalingMode: {value} }'
   }, {

package/src/shared/helpers/ui-properties.js

@@ -433,7 +433,7 @@ export function displayHomeAsUp() {
 export function dropShadow() {
   const shadowValue = '#80000000'
   let convertedStyles = processComments({
-    prop: 'shadowOffset, shadowRadius, shadowColor - Drop Shadow in Tailwind',
+    prop: 'shadowOffset, shadowRadius, shadowColor',
     modules: 'Ti.UI.Button, Ti.UI.Label'
   })
   convertedStyles += `'.drop-shadow-xs': { shadowOffset: { x: 0, y: 0 }, shadowRadius: 1, shadowColor: '${shadowValue}' }\n`