Add support for @import to Alloy styles

alloy.jmk

function explodeImport(event, logger) {
	const path = require('path');
	const fs = require('fs');
	const walkSync = require('walk-sync');

	walkSync(event.dir.project).forEach(function(fileRelative) {

		if (!fileRelative.match(/\.tss$/)) {
			return;
		}
		
		var fileAbsolute = path.join(event.dir.project, fileRelative),
			fileContent = fs.readFileSync(fileAbsolute, 'utf8'),
			match,
			importRelative,
			importAbsolute,
			importContent;
		
		while (match = /^@import ["'](.+)["'];?$/gim.exec(fileContent)) {
			importRelative = match[1];
			importAbsolute = path.resolve(path.dirname(fileAbsolute), match[1]);
			if (!fs.existsSync(importAbsolute)) {
				throw new Error('Cannot find ' + importAbsolute + ' to import into ' + fileAbsolute);
			}
			
			logger.debug('Importing ' + importAbsolute + ' for ' + fileAbsolute);
			
			importContent = fs.readFileSync(importAbsolute, 'utf8');
			fileContent = fileContent.replace(match[0], '//' + match[0] + "\n" + importContent + "\n//@import");
		}
		
		fs.writeFileSync(fileAbsolute, fileContent);
	});
}

function implodeImport(event, logger) {
	const path = require('path');
	const fs = require('fs');
	const walkSync = require('walk-sync');

	walkSync(event.dir.project).forEach(function(fileRelative) {

		if (!fileRelative.match(/\.tss$/)) {
			return;
		}
		
		var fileAbsolute = path.join(event.dir.project, fileRelative),
			fileContent = fs.readFileSync(fileAbsolute).toString(),
			match;

		while (match = /^\/\/(@import ["'].+["'];?)[\s\S]+\/\/@import/gim.exec(fileContent)) {
			fileContent = fileContent.replace(match[0], match[1]);
		}
		
		fs.writeFileSync(fileAbsolute, fileContent);
	});
}

task("pre:compile", function(event, logger) {
	explodeImport(event, logger);
}); 

task("post:compile", function(event, logger) {
	implodeImport(event, logger);
}); 

app.tss

@import "reset.tss";

"Window": {
  backgroundColor: '#000' // I want my windows black!
}

IMPORT.md

@import TSS for Alloy

NOTE: This is out-dated, I suggest using https://github.com/dbankier/ltss instead.

This alloy.jmk adds support for using CSS-like @import "file.tss"; statements in Alloy TSS styles.

The idea for this came when discussing adding the option of including a CSS-like reset stylesheet in Alloy to make up for platform differences in (background)color, but also some good practices.

I think one of the key issues in this discussion is that there is no such thing as the base style for an app. iOS fans would like to reset to iOS-like styles, Android fans like to reset to theirs, flat UI fanatics would like everything minimalized and Bootstrap adepts will ask for a huge library of styles.

So in the end, if there is going to be such a thing as a reset style, there are going to be more. And then I think Alloy would be better of not to take a stand in the discussion but just offer a easy way to import any community-provided reset-TSS in their apps (app.tss) using the familiar @import statement.

To do

• Support importing remote TSS straight from URL (e.g. git or gist)
• Support recursive import

reset.tss

// @see https://gist.github.com/tonylukasavage/6009423

'Label[platform=android]': {
    color: '#000' // all platforms except Android default to black 
}

'Window': {
    backgroundColor: '#fff' // white background instead of default transparent
}

'Window[platform=android]': {
    modal: false // make android windows all heavyweight
}

'TextField': {
    borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED // common default style
}