diff --git a/Alloy/commands/compile/styler.js b/Alloy/commands/compile/styler.js index d27d5bda6..cd1254431 100644 --- a/Alloy/commands/compile/styler.js +++ b/Alloy/commands/compile/styler.js @@ -195,63 +195,89 @@ exports.sortStyles = function(style, opts) { var sortedStyles = []; opts = opts || {}; + function splitSelectors(key) { + const result = []; + let current = ''; + let depth = 0; + + for (let i = 0, len = key.length; i < len; i++) { + const char = key[i]; + + if (char === '[') { + depth++; + } else if (char === ']') { + depth--; + } else if (char === ',' && depth === 0) { + if (current) result.push(current.trim()); + current = ''; + continue; + } + + current += char; + } + + if (current) result.push(current.trim()); + return result; + } + if (_.isObject(style) && !_.isEmpty(style)) { for (var key in style) { - var obj = {}; - var priority = styleOrderCounter++ * VALUES.ORDER; - var match = key.match(STYLE_REGEX); - if (match === null) { - U.die('Invalid style specifier "' + key + '"'); - } - var newKey = match[2]; - - // skip any invalid style entries - if (newKey === 'undefined' && !match[1]) { continue; } - - // get the style key type - switch (match[1]) { - case '#': - obj.isId = true; - priority += VALUES.ID; - break; - case '.': - obj.isClass = true; - priority += VALUES.CLASS; - break; - default: - if (match[2]) { - obj.isApi = true; - priority += VALUES.API; - } - break; - } + var keys = splitSelectors(key); + _.each(keys, function(singleKey) { + var obj = {}; + var priority = styleOrderCounter++ * VALUES.ORDER; + var match = singleKey.match(STYLE_REGEX); + if (match === null) { + U.die('Invalid style specifier "' + singleKey + '"'); + } + var newKey = match[2]; + + if (newKey === 'undefined' && !match[1]) { return; } + + switch (match[1]) { + case '#': + obj.isId = true; + priority += VALUES.ID; + break; + case '.': + obj.isClass = true; + priority += VALUES.CLASS; + break; + default: + if (match[2]) { + obj.isApi = true; + priority += VALUES.API; + } + break; + } - if (match[3]) { - obj.queries = {}; - _.each(match[3].replace(/\s*,\s*/g, ',').split(/\s+/), function(query) { - var parts = query.split('='); - var q = U.trim(parts[0]); - var v = U.trim(parts[1]); - if (q === 'platform') { - priority += VALUES.PLATFORM + VALUES.SUM; - v = v.split(','); - } else if (q === 'formFactor') { - priority += VALUES.FORMFACTOR + VALUES.SUM; - } else if (q === 'if') { - priority += VALUES.TSSIF + VALUES.SUM; - } else { - priority += VALUES.SUM; - } - obj.queries[q] = v; - }); - } + if (match[3]) { + obj.queries = {}; + _.each(match[3].replace(/\s*,\s*/g, ',').split(/\s+/), function(query) { + var parts = query.split('='); + var q = U.trim(parts[0]); + var v = U.trim(parts[1]); + if (q === 'platform') { + priority += VALUES.PLATFORM + VALUES.SUM; + v = v.split(','); + } else if (q === 'formFactor') { + priority += VALUES.FORMFACTOR + VALUES.SUM; + } else if (q === 'if') { + priority += VALUES.TSSIF + VALUES.SUM; + } else { + priority += VALUES.SUM; + } + obj.queries[q] = v; + }); + } - _.extend(obj, { - priority: priority + (opts.platform ? VALUES.PLATFORM : 0) + (opts.theme ? VALUES.THEME : 0), - key: newKey, - style: style[key] + _.extend(obj, { + priority: priority + (opts.platform ? VALUES.PLATFORM : 0) + (opts.theme ? VALUES.THEME : 0), + key: newKey, + style: style[key] + }); + sortedStyles.push(obj); }); - sortedStyles.push(obj); } }