diff options
5 files changed, 34 insertions, 3 deletions
diff --git a/.changeset/eighty-dogs-notice.md b/.changeset/eighty-dogs-notice.md new file mode 100644 index 000000000..22d557b65 --- /dev/null +++ b/.changeset/eighty-dogs-notice.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Allows passing in a class to a child component which will be scoped diff --git a/packages/astro/src/compiler/transform/styles.ts b/packages/astro/src/compiler/transform/styles.ts index 10d43af53..cfade44b0 100644 --- a/packages/astro/src/compiler/transform/styles.ts +++ b/packages/astro/src/compiler/transform/styles.ts @@ -196,8 +196,15 @@ export default function transformStyles({ compileOptions, filename, fileID }: Tr html: { InlineComponent: { enter(node) { - if (node.name !== 'Markdown') return; - injectScopedClassAttribute(node, scopedClass, '$scope'); + if (node.name === 'Markdown') { + injectScopedClassAttribute(node, scopedClass, '$scope'); + } + for(let attr of node.attributes) { + if(attr.name === 'class') { + injectScopedClassAttribute(node, scopedClass, 'class'); + break; + } + } }, }, Element: { diff --git a/packages/astro/test/astro-styles-ssr.test.js b/packages/astro/test/astro-styles-ssr.test.js index 7c6760672..d8a1bd904 100644 --- a/packages/astro/test/astro-styles-ssr.test.js +++ b/packages/astro/test/astro-styles-ssr.test.js @@ -133,4 +133,17 @@ StylesSSR('Astro scoped styles skipped without <style>', async ({ runtime }) => assert.type($('#no-scope').attr('class'), 'undefined', `Astro component without <style> should not include scoped class`); }); +StylesSSR('Astro scoped styles can be passed to child components', async ({ runtime }) => { + const result = await runtime.load('/'); + const $ = doc(result.contents); + + let scopedClass; + $('style').html().replace(/outer\.(astro-[A-Za-z0-9-]+)/, (match, p1) => { + scopedClass = p1; + return match; + }); + + assert.match($('#passed-in').attr('class'), `outer ${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 index 103b00f4c..5e557c1bd 100644 --- a/packages/astro/test/fixtures/astro-styles-ssr/src/components/Astro.astro +++ b/packages/astro/test/fixtures/astro-styles-ssr/src/components/Astro.astro @@ -1,6 +1,8 @@ --- let blue = true; let visible = true; + +const { class: cn } = Astro.props; --- <style> @@ -21,3 +23,4 @@ let visible = true; <div id="dynamic-class" class={blue ? 'blue' : 'notblue'}>I change colors</div> {visible && <div id="dynamic-vis" class="visible">I disappear</div>} <div id="colon-class" class="color:blue">I am blue</div> +<div id="passed-in" class={cn}>This was passed in</div>
\ No newline at end of file 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 c43ef83f5..5135d7927 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 @@ -18,11 +18,14 @@ import SvelteScoped from '../components/SvelteScoped.svelte'; margin-right: auto; max-width: 1200px; } + .outer { + color: red; + } </style> </head> <body> <div class="wrapper"> - <AstroComponent /> + <AstroComponent class="outer" /> <AstroComponentNone /> <ReactCSS /> <ReactModules /> |