diff --git a/packages/astro/test/astro-styles-ssr.test.js b/packages/astro/test/astro-styles-ssr.test.js
index 2fd87b37a..d07087b26 100644
--- a/packages/astro/test/astro-styles-ssr.test.js
+++ b/packages/astro/test/astro-styles-ssr.test.js
@@ -101,4 +101,26 @@ StylesSSR('CSS Module support in .astro', async ({ runtime }) => {
assert.equal(wrapper.length, 1);
});
+StylesSSR('Astro scoped styles', async ({ runtime }) => {
+ const result = await runtime.load('/');
+ const $ = doc(result.contents);
+
+ const el1 = $('#dynamic-class');
+ const el2 = $('#dynamic-vis');
+
+ let scopedClass;
+
+ $('#class')
+ .attr('class')
+ .replace(/astro-[A-Za-z0-9-]+/, (match) => {
+ scopedClass = match;
+ return match;
+ });
+
+ if (!scopedClass) throw new Error(`Astro component missing scoped class`);
+
+ assert.match(el1.attr('class'), `blue ${scopedClass}`);
+ assert.match(el2.attr('class'), `visible ${scopedClass}`);
+});
+
StylesSSR.run();
diff --git a/packages/astro/test/fixtures/astro-styles-ssr/src/components/Astro.astro b/packages/astro/test/fixtures/astro-styles-ssr/src/components/Astro.astro
new file mode 100644
index 000000000..42967c445
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-styles-ssr/src/components/Astro.astro
@@ -0,0 +1,18 @@
+---
+let blue = true;
+let visible = true;
+---
+
+
+
+I’m just used to get the Scoped class
+I change colors
+{visible && I disappear
}
diff --git a/packages/astro/test/fixtures/astro-styles-ssr/src/pages/index.astro b/packages/astro/test/fixtures/astro-styles-ssr/src/pages/index.astro
index 45f9683ac..8c435fdce 100644
--- a/packages/astro/test/fixtures/astro-styles-ssr/src/pages/index.astro
+++ b/packages/astro/test/fixtures/astro-styles-ssr/src/pages/index.astro
@@ -1,4 +1,5 @@
---
+import AstroComponent from '../components/Astro.astro';
import ReactCSS from '../components/ReactCSS.jsx';
import ReactModules from '../components/ReactModules.jsx';
import VueCSS from '../components/VueCSS.vue';
@@ -20,6 +21,7 @@ import SvelteScoped from '../components/SvelteScoped.svelte';