Fix an issue with tag/class/ids being extended oddly

Author: dimitrinicolas

.tape.js

@@ -17,6 +17,10 @@ module.exports = {
 			},
 			expect: 'basic.expect.css'
 		},
+		'basic.button': {
+			message: 'supports @extend usage with same tag name and class name',
+			expect: 'basic.button.expect.css'
+		},
 		'advanced': {
 			message: 'supports mixed usage (with postcss-nesting)',
 			plugin: () => require('postcss')(

index.js

@@ -138,7 +138,7 @@ function getSelectorIdMatch(selectorIds) {
 	).join('|');
 
 	// selector unattached to an existing selector
-	const selectorIdMatch = new RegExp(`(^|[^\\w-])(${escapedSelectorIds})([^\\w-]|$)`, '');
+	const selectorIdMatch = new RegExp(`(^|[^\\w-]!\.!\#)(${escapedSelectorIds})([^\\w-]|$)`, '');
 
 	return selectorIdMatch;
 }

test/basic.button.css

@@ -0,0 +1,13 @@
+button {
+  color: red;
+}
+
+.button {
+  @extend button;
+  background: blue;
+}
+
+#button {
+  @extend button;
+  background: lime;
+}

test/basic.button.expect.css

@@ -0,0 +1,13 @@
+button {
+  color: red;
+}
+
+.button {
+  color: red;
+  background: blue;
+}
+
+#button {
+  color: red;
+  background: lime;
+}