[🚀esl-media-query]: (POC) consider out of the box support for esl-media-query-list syntax recognition

[ala-n]

As for now we have two syntaxes to declare ESLMediaRuleList:

• Tupple : ESLMediaRuleList.parse('value1|value2', '@mq1|@mq2');
• Arrow: ESLMediaRuleList.parse('@mq1 => value1| @mq2 =>value2');

It is requested to have out of the box method to support both notations in case media tuple used as a default method. So ESLMediaRuleList.parse('@mqAlt1 => value1| @mqAlt2 =>value2', '@mq1|@mq2'); or ESLMediaRuleList.parseAuto('@mqAlt1 => value1| @mqAlt2 =>value2', '@mq1|@mq2'); parse first argument as an arrow syntax without default tuple consideration.

--- Discussion Notes ---

• Proposed to use default parse (note: inverse argument list is not a problem)
• In case usage of the current parse is not technically possible, it is recommended to use another naming: parseAny, ... (parseAuto is not clear enough)

--- Usage Example ----

/** Parses adaptive value to optimized {@link ESLMediaRuleList} */
export const parseAdaptiveValue = (value: string, mask: string): ESLMediaRuleList => {
 if (value.includes('=>')) return ESLMediaRuleList.parse(value);
 const length = value.split('|').length;
 mask= mask.split('|').slice(0, length).join('|');
 return ESLMediaRuleList.parse(mask, value);
};