Merge pull request #3141 from sveltejs/gh-1705

add scoping attribute for pseudo-class selectors without a type/class

Author: Rich-Harris

src/compiler/compile/css/Selector.ts

@@ -61,7 +61,10 @@ export default class Selector {
 			let i = block.selectors.length;
 			while (i--) {
 				const selector = block.selectors[i];
-				if (selector.type === 'PseudoElementSelector' || selector.type === 'PseudoClassSelector') continue;
+				if (selector.type === 'PseudoElementSelector' || selector.type === 'PseudoClassSelector') {
+					if (i === 0) code.prependRight(selector.start, attr);
+					continue;
+				}
 
 				if (selector.type === 'TypeSelector' && selector.name === '*') {
 					code.overwrite(selector.start, selector.end, attr);

test/css/samples/not-selector/expected.css

@@ -0,0 +1 @@
+.svelte-xyz:not(.foo){color:red}

test/css/samples/not-selector/input.svelte

@@ -0,0 +1,8 @@
+<p class="foo">foo</p>
+<p class="bar">bar</p>
+
+<style>
+	:not(.foo) {
+		color: red;
+	}
+</style>