Repository: sveltejs/svelte (JavaScript)
Task: Bug Fix (2019-06-30 21:42:26+00:00)

Issue:
:not(...) styles are broken
[REPL](https://svelte.technology/repl?version=2.13.1&gist=c80e2cda5f07897ad9eaada7df570cc0). The encapsulator should treat `:not(selector)` as `*:not(selector)`, but it doesn't.


Discussion:
I don't think it is a svelte bug. 
This is the normal behaviour in CSS. 
See this codepen : https://codepen.io/thollander/pen/JzJQKO?editors=1100

The color is inherited by default. 
https://www.w3schools.com/cssref/pr_text_color.asp
So it takes the color of the body property which validates the rule `:not(p)`
However, in the example, you can see border hasn't the same behaviour.


Updated REPL that shows the bug better: https://svelte.dev/repl/3c70b1effcf4442a8280b1c5db8c6f10?version=3.6.2

`:not(xxx)` should be converted to `.svelte-xyz123:not(xxx)`

Patch:
diff --git a/src/compiler/compile/css/Selector.ts b/src/compiler/compile/css/Selector.ts
--- a/src/compiler/compile/css/Selector.ts
+++ b/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 patch:
diff --git a/test/css/samples/not-selector/expected.css b/test/css/samples/not-selector/expected.css
new file mode 100644
--- /dev/null
+++ b/test/css/samples/not-selector/expected.css
@@ -0,0 +1 @@
+.svelte-xyz:not(.foo){color:red}
\ No newline at end of file
diff --git a/test/css/samples/not-selector/input.svelte b/test/css/samples/not-selector/input.svelte
new file mode 100644
--- /dev/null
+++ b/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>
\ No newline at end of file