Basic Theme support for Ti Alloy

alloy.jmk.js

/*
	This custom JMK file hacks in some basic "Theme" support for this Alloy project

	You can put .tss files under the app/styles/themes/ directory and they will be auto-injected
	into the main app.tss file (at the end of the file)

	It will also convert plain TSS style rules into "Custom Query Styles" so that the rules
	in each theme file will only apply if that theme is "active" in the app.
	http://docs.appcelerator.com/platform/latest/#!/guide/Alloy_Styles_and_Themes-section-35621526_AlloyStylesandThemes-CustomQueryStyles

	This requires a global method to be defined in your app:
		Alloy.Globals.isTheme(themeName)

	The theme name (taken from the .tss filename) will be inserted as an argument to this method like so:

	# app/styles/themes/light.tss
	BEFORE:
		".container": {
		    backgroundColor: "pink"
		}

	AFTER:
		".container[if=Alloy.Globals.isTheme('light')]": {
		    backgroundColor: "pink"
		}
 */

task('pre:compile', appendThemeStyles);
task('post:compile', removeAppendedThemeStyles);

var THEME_FILE_MARKER = "//// INJECTED THEMES ////";
var rxEndTssStyleTag = /":.*?{/gm;


function appendThemeStyles(config, logger) {
	var fs = require('fs');
	var path = require('path');

	var appStyleFilepath = path.join(config.dir.styles, 'app.tss');
	var themesDirectoryPath = path.join(config.dir.styles, 'themes');

	fs.appendFileSync(appStyleFilepath,  "\n" + THEME_FILE_MARKER + "\n");
	themeFiles = fs.readdirSync(themesDirectoryPath);
	themeFiles.forEach(function(themeFilename) {
		var themeName = themeFilename.replace('.tss', '');
		var themeFilepath = path.join(themesDirectoryPath, themeFilename);

		var themeContents = fs.readFileSync(themeFilepath, { encoding: 'utf8' });
		// inject the TSS Custom Query filter on all TSS styles in this file, based on theme name
		themeContents = themeContents.replace(rxEndTssStyleTag, "[if=Alloy.Globals.isTheme('" + themeName + "')]\": {");

		var fileHeader = "// Inserted by alloy.jmk from file: " + themeFilename + "\n";
		var fileFooter = "\n";
		fs.appendFileSync(appStyleFilepath, fileHeader + themeContents + fileFooter);
	});

	// write the modified app.tss to a separate file (for debugging reference)
	fs.writeFileSync(appStyleFilepath.replace('app.tss', 'app.tss.log'), fs.readFileSync(appStyleFilepath));
}

function removeAppendedThemeStyles(config, logger) {
	var fs = require('fs');
	var path = require('path');

	var appStyleFilepath = path.join(config.dir.styles, 'app.tss');

	var styleContents = fs.readFileSync(appStyleFilepath, { encoding: 'utf8' });

	var truncateAtIndex = styleContents.indexOf(THEME_FILE_MARKER);
	if(truncateAtIndex > 0) {
		fs.truncateSync(appStyleFilepath, truncateAtIndex);
	}
}