Initial implementation of reversed attribute merge

#409

src/config/defaults.ts

@@ -29,6 +29,7 @@ export const defaultOptions: Options = {
         'hidden', 'ismap', 'loop', 'multiple', 'muted', 'novalidate', 'readonly',
         'required', 'reversed', 'selected', 'typemustmatch'
     ],
+    'output.reverseAttributes': false,
     'output.selfClosingStyle': 'html',
     'output.field': (index, placeholder) => placeholder,
 
@@ -52,7 +53,7 @@ export const defaultOptions: Options = {
     'stylesheet.floatUnit': 'em',
     'stylesheet.unitAliases': { e: 'em', p: '%', x: 'ex', r: 'rem' },
     'stylesheet.json': false,
-    'stylesheet.json-double-quotes': false,
+    'stylesheet.jsonDoubleQuotes': false,
     'stylesheet.fuzzySearchMinScore': 0.3
 };
 

src/config/types.ts

@@ -104,6 +104,9 @@ export interface Options {
     /** A list of boolean attributes */
     'output.booleanAttributes': string[];
 
+    /** Reverses attribute merging directions when resolving snippets */
+    'output.reverseAttributes': boolean;
+
     /** Style of self-closing tags: html (`<br>`), xml (`<br/>`) or xhtml (`<br />`) */
     'output.selfClosingStyle': 'html' | 'xml' | 'xhtml';
 
@@ -204,7 +207,7 @@ export interface Options {
     'stylesheet.json': boolean;
 
     /** Use double quotes for JSON values */
-    'stylesheet.json-double-quotes': boolean;
+    'stylesheet.jsonDoubleQuotes': boolean;
 
     /**
      * A float number between 0 and 1 to pick fuzzy-matched abbreviations.

src/markup/snippets.ts

@@ -1,4 +1,4 @@
-import parse, { AbbreviationNode } from '@emmetio/abbreviation';
+import parse, { AbbreviationNode, AbbreviationAttribute } from '@emmetio/abbreviation';
 import { walk, findDeepest, isNode, Container } from './utils';
 import { Config } from '../config';
 
@@ -37,9 +37,12 @@ export default function resolveSnippets(node: AbbreviationNode, parentAncestors:
 
         // Add attributes from current node into every top-level node of parsed abbreviation
         if (child.attributes) {
-            // TODO add option with attribute merge direction
             for (const topNode of abbr.children) {
-                topNode.attributes = (topNode.attributes || []).concat(child.attributes);
+                const from: AbbreviationAttribute[] = topNode.attributes || [];
+                const to: AbbreviationAttribute[] = child.attributes || [];
+                topNode.attributes = config.options['output.reverseAttributes']
+                    ? to.concat(from)
+                    : from.concat(to);
             }
         }
 

src/stylesheet/format.ts

@@ -132,5 +132,5 @@ function toCamelCase(str: string): string {
 }
 
 function getQuote(config: Config): string {
-    return config.options['stylesheet.json-double-quotes'] ? '"' : '\'';
+    return config.options['stylesheet.jsonDoubleQuotes'] ? '"' : '\'';
 }

test/expand.ts

@@ -59,6 +59,11 @@ describe('Expand Abbreviation', () => {
                 '<ul>\n\t<li class="item1"></li>\n\t<!-- /.item1 -->\n\t<li class="item2"></li>\n\t<!-- /.item2 -->\n</ul>');
         });
 
+        it('reverse attributes merge', () => {
+            equal(expand('a.test'), '<a href="" class="test"></a>');
+            equal(expand('a.test', { options: { 'output.reverseAttributes': true } }), '<a class="test" href=""></a>');
+        });
+
         // it.only('debug', () => {
         //     equal(expand('link:css'), '<link rel="stylesheet" href="style.css">');
         // });