Feat: add dash attribute selector (ref #26) (#41)

lib/replace/regex.js

@@ -1,6 +1,6 @@
 export default {
   selectors: /(#|\.)[^\s:.{)[>+,\s]+/g, // matches all selectors beginning with . or # - e.g. .matching#alsomatch .matchmetoo
   strings: /"\s*[\S\s]*?\s*"|'\s*[\S\s]*?\s*'/g, // matches strings such as: 'hello' or "hello"
-  attributeSelectors: /\[\s*(class|id)\s*([*^$]?)=\s*("[\s\S]*?"|'[\s\S]*?'|[\s\S]*)[\s\S]*?\]/g, // matches attribute selectors of html just with class or id in it with `$=`, `^=` or `*=`, e.g.: [class*="selector"]. 3 group matches, first `class` or `id`, second regex operator, third the string
+  attributeSelectors: /\[\s*(class|id)\s*([*^$|]?)=\s*("[\s\S]*?"|'[\s\S]*?'|[\s\S]*)[\s\S]*?\]/g, // matches attribute selectors of html just with class or id in it with `$=`, `^=` or `*=`, e.g.: [class*="selector"]. 3 group matches, first `class` or `id`, second regex operator, third the string
   keyframes: /@(-[a-z]*-)*keyframes\s+([a-zA-Z0-9_-]+)/g, // matches keyframes and just the first group the first matched non-whitespace characters - e.g. matches: `@keyframes    my-KeyFra_me`
 };

lib/selectorLibrary.js

@@ -385,7 +385,16 @@ class SelectorLibrary {
         return;
       }
 
-      if (attributeSelector.charAt(1) === '=') {
+      if (attributeSelector.charAt(1) === '|') {
+        let match = slicedSelector.match(`^${attributeString}-`);
+
+        if (match) {
+          match = match[0].replace(/-$/, '');
+          result = `${firstChar}${match}-${value.nameGeneratorCounter.generate()}`;
+        }
+      }
+
+      if (attributeSelector.charAt(1) === '=' || attributeSelector.charAt(1) === '|') {
         const match = slicedSelector.match(attributeString);
 
         if (match && slicedSelector === match[0]) {
@@ -400,7 +409,7 @@ class SelectorLibrary {
           result =
             firstChar +
             value.nameGeneratorCounter.generate() +
-            match +
+            match[0] +
             value.nameGeneratorCounter.generate();
         }
       }
@@ -409,15 +418,15 @@ class SelectorLibrary {
         const match = slicedSelector.match(`^${attributeString}`);
 
         if (match) {
-          result = firstChar + match + value.nameGeneratorCounter.generate();
+          result = firstChar + match[0] + value.nameGeneratorCounter.generate();
         }
       }
 
       if (attributeSelector.charAt(1) === '$') {
         const match = slicedSelector.match(`${attributeString}$`);
 
         if (match) {
-          result = firstChar + value.nameGeneratorCounter.generate() + match;
+          result = firstChar + value.nameGeneratorCounter.generate() + match[0];
         }
       }
     });

test/selectorLibrary.js

@@ -446,6 +446,14 @@ test('setAttributeSelector | should set attribute selectors correctly without qu
   t.is(rcs.selectorLibrary.attributeSelectors['#^header'].originalString, '[id^=header]');
 });
 
+test('setAttributeSelector | should set attribute selectors correctly without quotes', (t) => {
+  rcs.selectorLibrary.setAttributeSelector('[class|=test]');
+
+  t.is(typeof rcs.selectorLibrary.attributeSelectors['.|test'], 'object');
+  t.is(rcs.selectorLibrary.attributeSelectors['.|test'].originalString, '[class|=test]');
+});
+
+
 test('setAttributeSelector | should set attribute all attribute selectors', (t) => {
   rcs.selectorLibrary.setAttributeSelector([
     '[id^=header]',
@@ -481,6 +489,16 @@ test('replaceAttributeSelector | should return the correct equal selector', (t)
   t.is(rcs.selectorLibrary.replaceAttributeSelector('#lequal'), false);
 });
 
+test('replaceAttributeSelector | should return the correct dash selector', (t) => {
+  rcs.selectorLibrary.setAttributeSelector('[id|=dash]');
+
+  t.is(rcs.selectorLibrary.replaceAttributeSelector('#dash'), '#dash');
+  t.is(rcs.selectorLibrary.replaceAttributeSelector('#dash-k'), '#dash-t');
+  t.is(rcs.selectorLibrary.replaceAttributeSelector('#dash-more-here'), '#dash-n');
+  t.is(rcs.selectorLibrary.replaceAttributeSelector('#dashq'), false);
+  t.is(rcs.selectorLibrary.replaceAttributeSelector('#ldash'), false);
+});
+
 test('replaceAttributeSelector | should return the correct end selector', (t) => {
   rcs.selectorLibrary.setAttributeSelector('[id$=end]');