3 files changed, 56 insertions, 1 deletions
diff --git a/test/astro-scoped-styles.test.js b/test/astro-scoped-styles.test.js
new file mode 100644
index 000000000..d6ae7a02e
--- /dev/null
+++ b/test/astro-scoped-styles.test.js
@@ -0,0 +1,28 @@
+import { suite } from 'uvu';
+import * as assert from 'uvu/assert';
+import { scopeSelectors } from '../lib/compiler/optimize/postcss-scoped-styles/index.js';
+
+const ScopedStyles = suite('Astro PostCSS Scoped Styles Plugin');
+
+const className = '.astro-abcd1234';
+
+// Note: assume all selectors have no unnecessary spaces (i.e. must be minified)
+const tests = {
+  '.class': `.class${className}`,
+  h1: `h1${className}`,
+  '.nav h1': `.nav${className} h1${className}`,
+  '.class+.class': `.class${className}+.class${className}`,
+  '.class~:global(a)': `.class${className}~a`,
+  '.class *': `.class${className} ${className}`,
+  '.class>*': `.class${className}>${className}`,
+  '.class :global(*)': `.class${className} *`,
+  '.class:not(.is-active)': `.class${className}:not(.is-active)`, // Note: the :not() selector can NOT contain multiple classes, so this is correct; if this causes issues for some people then it‘s worth a discussion
+};
+
+ScopedStyles('Scopes correctly', () => {
+  for (const [given, expected] of Object.entries(tests)) {
+    assert.equal(scopeSelectors(given, className), expected);
+  }
+});
+
+ScopedStyles.run();
diff --git a/test/astro-styles-ssr.test.js b/test/astro-styles-ssr.test.js
index 9145e65a9..9ee67f69b 100644
--- a/test/astro-styles-ssr.test.js
+++ b/test/astro-styles-ssr.test.js
@@ -47,4 +47,24 @@ StylesSSR('Has correct CSS classes', async () => {
   }
 });
 
+StylesSSR('CSS Module support in .astro', async () => {
+  const result = await runtime.load('/');
+  const $ = doc(result.contents);
+
+  let scopedClass;
+
+  // test 1: <style> tag in <head> is transformed
+  const css = $('style')
+    .html()
+    .replace(/\.astro-[A-Za-z0-9-]+/, (match) => {
+      scopedClass = match;
+      return match;
+    }); // remove class hash (should be deterministic / the same every time, but even still don‘t cause this test to flake)
+  assert.equal(css, `.wrapper${scopedClass}{margin-left:auto;margin-right:auto;max-width:1200px}`);
+
+  // test 2: element received .astro-XXXXXX class (this selector will succeed if transformed correctly)
+  const wrapper = $(`.wrapper${scopedClass}`);
+  assert.equal(wrapper.length, 1);
+});
+
 StylesSSR.run();
diff --git a/test/fixtures/astro-styles-ssr/astro/pages/index.astro b/test/fixtures/astro-styles-ssr/astro/pages/index.astro
index 30591da72..7333fac21 100644
--- a/test/fixtures/astro-styles-ssr/astro/pages/index.astro
+++ b/test/fixtures/astro-styles-ssr/astro/pages/index.astro
@@ -7,9 +7,16 @@ import SvelteScoped from '../components/SvelteScoped.svelte';
 <html>
   <head>
     <meta charset="UTF-8" />
+    <style lang="scss">
+      .wrapper {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 1200px;
+      }
+    </style>
   </head>
   <body>
-    <div>
+    <div class="wrapper">
       <ReactCSS />
       <VueCSS />
       <SvelteScoped />