Skip to content

Instantly share code, notes, and snippets.

@FokkeZB

FokkeZB/IMPORT.md

Last active May 24, 2023 21:24
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save FokkeZB/6011624 to your computer and use it in GitHub Desktop.
Save FokkeZB/6011624 to your computer and use it in GitHub Desktop.
Download ZIP
Add support for @import to Alloy styles
Raw
alloy.jmk
function explodeImport(event, logger) {
var path = require('path'),
wrench = require('wrench'),
fs = require('fs');
wrench.readdirSyncRecursive(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,
importRelative,
importAbsolute,
importContent;
while (match = /^@import ["'](.+)["'];?$/gim.exec(fileContent)) {
importRelative = match[1];
if (importRelative.indexOf(path.sep) !== -1) {
importAbsolute = path.join(dir.project, match[1]);
} else {
importAbsolute = path.join(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).toString();
fileContent = fileContent.replace(match[0], '//' + match[0] + "\n" + importContent + "\n//@import");
}
fs.writeFileSync(fileAbsolute, fileContent);
});
}
function implodeImport(event, logger) {
var path = require('path'),
wrench = require('wrench'),
fs = require('fs');
wrench.readdirSyncRecursive(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);
});
Raw
app.tss
@import "reset.tss";
"Window": {
backgroundColor: '#000'; // I want my windows black!
}
Raw
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
Raw
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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment