diff --git a/lib/replace/regex.js b/lib/replace/regex.js index d7b9191..f964569 100644 --- a/lib/replace/regex.js +++ b/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` }; diff --git a/lib/selectorLibrary.js b/lib/selectorLibrary.js index 9ca8cfc..9f90081 100644 --- a/lib/selectorLibrary.js +++ b/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,7 +418,7 @@ class SelectorLibrary { const match = slicedSelector.match(`^${attributeString}`); if (match) { - result = firstChar + match + value.nameGeneratorCounter.generate(); + result = firstChar + match[0] + value.nameGeneratorCounter.generate(); } } @@ -417,7 +426,7 @@ class SelectorLibrary { const match = slicedSelector.match(`${attributeString}$`); if (match) { - result = firstChar + value.nameGeneratorCounter.generate() + match; + result = firstChar + value.nameGeneratorCounter.generate() + match[0]; } } }); diff --git a/test/selectorLibrary.js b/test/selectorLibrary.js index 5a55472..afcec0e 100644 --- a/test/selectorLibrary.js +++ b/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]');