diff options
3 files changed, 42 insertions, 0 deletions
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; +--- + +<style> +.blue { + color: powderblue; +} + +.visible { + display: block; +} +</style> + +<div id="class">I’m just used to get the Scoped class</div> +<div id="dynamic-class" class={blue ? 'blue' : 'notblue'}>I change colors</div> +{visible && <div id="dynamic-vis" class="visible">I disappear</div>} 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'; </head> <body> <div class="wrapper"> + <AstroComponent /> <ReactCSS /> <ReactModules /> <VueCSS /> |