From 69d693b77ce8d702a193bfcff8e5338889546ae4 Mon Sep 17 00:00:00 2001
From: Drew Powers <1369770+drwpow@users.noreply.github.com>
Date: Fri, 21 May 2021 12:45:49 -0600
Subject: [PATCH] Add scoped styles test (#223)
---
packages/astro/test/astro-styles-ssr.test.js | 22 +++++++++++++++++++
.../src/components/Astro.astro | 18 +++++++++++++++
.../astro-styles-ssr/src/pages/index.astro | 2 ++
3 files changed, 42 insertions(+)
create mode 100644 packages/astro/test/fixtures/astro-styles-ssr/src/components/Astro.astro
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';