Repository: arve0/markdown-it-attrs (js)

Issue:
Styling a element with several CSS classes
Hi,
I am trying to use this in `tui.editor` within a Gollum installation, I have already written a render layer for Gollum which mimics `markdown-it-attrs` behaviors. Something that makes me wonder is some inconsistencies when having several classes on an element.

Example input:
```md
1.this is the markdown I'm trying to parse {.note .green}
2.this is the markdown I'm trying to parse {.note.green}
```
Current output:
```html
<p class="note green">1.this is the markdown I'm trying to parse</p>
<p>2.this is the markdown I'm trying to parse</p>
```

Expected output:
```html
<p class="note green">1.this is the markdown I'm trying to parse</p>
<p class="note green">2.this is the markdown I'm trying to parse</p>
```
Won't you agree that both should render the same way? I mean why not allowing the shorthand `.warning.green` instead of `.warning .green`? and why it completely eats `.note.green`?

Thanks
/Reza

Pull request:
allow dot in class names
fixes #75 

Patch:
diff --git a/utils.js b/utils.js
index a210f24..8188a6d 100644
--- a/utils.js
+++ b/utils.js
@@ -36,15 +36,15 @@ exports.getAttrs = function (str, start, options) {
     }
 
     // {.class} {..css-module}
-    if (char_ === classChar) {
-      if (key === '') {
-        key = 'class';
-        parsingKey = false;
-        continue;
-      } else if (key === 'class') {
+    if (char_ === classChar && key === '') {
+      if (str.charAt(i + 1) === classChar) {
         key = 'css-module';
-        continue;
+        i += 1;
+      } else {
+        key = 'class';
       }
+      parsingKey = false;
+      continue;
     }
 
     // {#id}


Test patch:
diff --git a/test.js b/test.js
index 8505dbb..d069bd0 100644
--- a/test.js
+++ b/test.js
@@ -24,9 +24,9 @@ describeTestsWithOptions({
 
 function describeTestsWithOptions(options, postText) {
   describe('markdown-it-attrs.utils' + postText, () => {
-    it(replaceDelimiters('should parse {.class ..css-module #id key=val}', options), () => {
-      let src = '{.red ..mod #head key=val}';
-      let expected = [['class', 'red'], ['css-module', 'mod'], ['id', 'head'], ['key', 'val']];
+    it(replaceDelimiters('should parse {.class ..css-module #id key=val .class.with.dot}', options), () => {
+      let src = '{.red ..mod #head key=val .class.with.dot}';
+      let expected = [['class', 'red'], ['css-module', 'mod'], ['id', 'head'], ['key', 'val'], ['class', 'class.with.dot']];
       let res = utils.getAttrs(replaceDelimiters(src, options), 0, options);
       assert.deepEqual(res, expected);
     });