From 1e735bb331266a64e88bbc943b38b505c929cfed Mon Sep 17 00:00:00 2001
From: Matthew Phillips <matthew@matthewphillips.info>
Date: Tue, 29 Jun 2021 16:40:30 -0400
Subject: [PATCH] Pass in scoped class name to child components (#579)

* Pass in scoped class name to child components

If a class is being passed into child components, pass in the scoped class name as well.

* Adds the changeset
---
 .changeset/eighty-dogs-notice.md                    |  5 +++++
 packages/astro/src/compiler/transform/styles.ts     | 11 +++++++++--
 packages/astro/test/astro-styles-ssr.test.js        | 13 +++++++++++++
 .../astro-styles-ssr/src/components/Astro.astro     |  3 +++
 .../fixtures/astro-styles-ssr/src/pages/index.astro |  5 ++++-
 5 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/eighty-dogs-notice.md

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 />