Skip to content

feat: allow comma separated class selectors #1444

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
m1ga wants to merge 5 commits into
base: main
Choose a base branch
from
Open

feat: allow comma separated class selectors #1444

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e7945e8
feat: allow comma separated class selectors
m1ga Apr 12, 2026
d7e8294
dont split in []
m1ga Apr 12, 2026
2910a5c
dont split in []
m1ga Apr 12, 2026
6c84e39
use slit method instead of regex
m1ga Apr 12, 2026
81bcf86
use slit method instead of regex
m1ga Apr 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 78 additions & 52 deletions Alloy/commands/compile/styler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down
Loading