From 87ab4c6927abb9adaeb846687092e5dab78e2d7f Mon Sep 17 00:00:00 2001
From: Drew Powers <1369770+drwpow@users.noreply.github.com>
Date: Thu, 6 May 2021 15:39:34 -0600
Subject: [PATCH] Bugfix: scoped styles (#178)

---
 .changeset/wicked-sloths-hide.md                       |  5 +++++
 .../compiler/transform/postcss-scoped-styles/index.ts  | 10 +++++-----
 packages/astro/test/astro-scoped-styles.test.js        |  3 +++
 3 files changed, 13 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/wicked-sloths-hide.md

diff --git a/.changeset/wicked-sloths-hide.md b/.changeset/wicked-sloths-hide.md
new file mode 100644
index 000000000..887336138
--- /dev/null
+++ b/.changeset/wicked-sloths-hide.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Bugfix: Scoped CSS with pseudoclasses and direct children selectors
diff --git a/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts b/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts
index 23350869c..116302c0f 100644
--- a/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts
+++ b/packages/astro/src/compiler/transform/postcss-scoped-styles/index.ts
@@ -75,18 +75,18 @@ export function scopeRule(selector: string, className: string) {
       continue;
     }
 
-    // don‘t scope body, title, etc.
-    if (NEVER_SCOPED_TAGS.has(value)) {
+    // don’t scope body, title, etc.
+    if (CSS_SEPARATORS.has(value) || NEVER_SCOPED_TAGS.has(value)) {
       ss = head + value + tail;
       continue;
     }
 
     // scope everything else
-    let newSelector = ss.substring(start, end);
+    let newSelector = value;
     const pseudoIndex = newSelector.indexOf(':');
     if (pseudoIndex > 0) {
-      // if there‘s a pseudoclass (:focus)
-      ss = head + newSelector.substring(start, pseudoIndex) + c + newSelector.substr(pseudoIndex) + tail;
+      // if there’s a pseudoclass (:focus or ::before)
+      ss = head + newSelector.substring(0, pseudoIndex) + c + newSelector.substr(pseudoIndex) + tail;
     } else {
       ss = head + newSelector + c + tail;
     }
diff --git a/packages/astro/test/astro-scoped-styles.test.js b/packages/astro/test/astro-scoped-styles.test.js
index 1fc11490b..90ea5b785 100644
--- a/packages/astro/test/astro-scoped-styles.test.js
+++ b/packages/astro/test/astro-scoped-styles.test.js
@@ -16,6 +16,9 @@ ScopedStyles('Scopes rules correctly', () => {
     '.class~:global(a)': `.class.${className}~a`,
     '.class *': `.class.${className} .${className}`,
     '.class>*': `.class.${className}>.${className}`,
+    '.class button:focus': `.class.${className} button.${className}:focus`,
+    '.class h3::before': `.class.${className} h3.${className}::before`,
+    'button:focus::before': `button.${className}:focus::before`,
     '.class :global(*)': `.class.${className} *`,
     '.class :global(.nav:not(.is-active))': `.class.${className} .nav:not(.is-active)`, // preserve nested parens
     '.class :global(ul li)': `.class.${className} ul li`, // allow doubly-scoped selectors