Skip scoped `astro-*` class if Astro component has no `<style>` (#497)

* feat(#472): do not inject `astro-xxx` class for components without styles

* test: add test for skipped scoped classes

* chore: add changeset

* Update happy-cougars-scream.md

5 files changed, 25 insertions, 2 deletions

diff --git a/.changeset/happy-cougars-scream.md b/.changeset/happy-cougars-scream.md
new file mode 100644
index 000000000..901721ef8
--- /dev/null
+++ b/.changeset/happy-cougars-scream.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix [472](https://github.com/snowpackjs/astro/issues/472) by not injecting `astro-*` scoped class unless it is actually used
diff --git a/packages/astro/src/compiler/transform/styles.ts b/packages/astro/src/compiler/transform/styles.ts
index d5a10b323..9913bc809 100644
--- a/packages/astro/src/compiler/transform/styles.ts
+++ b/packages/astro/src/compiler/transform/styles.ts
@@ -189,6 +189,7 @@ export default function transformStyles({ compileOptions, filename, fileID }: Tr
   const styleNodes: TemplateNode[] = []; // <style> tags to be updated
   const styleTransformPromises: Promise<StyleTransformResult>[] = []; // async style transform results to be finished in finalize();
   const scopedClass = `astro-${hashFromFilename(fileID)}`; // this *should* generate same hash from fileID every time
+  const nodesToScope = new Set<TemplateNode>();
 
   return {
     visitors: {
@@ -225,8 +226,7 @@ export default function transformStyles({ compileOptions, filename, fileID }: Tr
               return; // only continue if this is NOT a <script> tag, etc.
             }
             // Note: currently we _do_ scope web components/custom elements. This seems correct?
-
-            injectScopedClassAttribute(node, scopedClass);
+            nodesToScope.add(node);
           },
         },
       },
@@ -254,6 +254,14 @@ export default function transformStyles({ compileOptions, filename, fileID }: Tr
     },
     async finalize() {
       const styleTransforms = await Promise.all(styleTransformPromises);
+      
+      // If we DO have styles, let's inject the scoped `class` attribute
+      // Otherwise, our final optimization is easier if we skip this
+      if (styleTransforms.length > 0) {
+        for (const node of nodesToScope.values()) {
+          injectScopedClassAttribute(node, scopedClass);
+        }
+      }
 
       styleTransforms.forEach((result, n) => {
         if (styleNodes[n].attributes) {
diff --git a/packages/astro/test/astro-styles-ssr.test.js b/packages/astro/test/astro-styles-ssr.test.js
index 8a3fd7bdc..03d94ebde 100644
--- a/packages/astro/test/astro-styles-ssr.test.js
+++ b/packages/astro/test/astro-styles-ssr.test.js
@@ -126,4 +126,11 @@ StylesSSR('Astro scoped styles', async ({ runtime }) => {
   assert.match(cssMinify(css.toString()), `.blue.${scopedClass}{color:powderblue}.color\\:blue.${scopedClass}{color:powderblue}.visible.${scopedClass}{display:block}`);
 });
 
+StylesSSR('Astro scoped styles skipped without <style>', async ({ runtime }) => {
+  const result = await runtime.load('/');
+  const $ = doc(result.contents);
+
+  assert.type($('#no-scope').attr('class'), 'undefined', `Astro component without <style> should not include scoped class`)
+});
+
 StylesSSR.run();
diff --git a/packages/astro/test/fixtures/astro-styles-ssr/src/components/AstroNone.astro b/packages/astro/test/fixtures/astro-styles-ssr/src/components/AstroNone.astro
new file mode 100644
index 000000000..fe3b34b98
--- /dev/null
+++ b/packages/astro/test/fixtures/astro-styles-ssr/src/components/AstroNone.astro
@@ -0,0 +1 @@
+<div id="no-scope">360</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 8c435fdce..c43ef83f5 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,5 +1,6 @@
 ---
 import AstroComponent from '../components/Astro.astro';
+import AstroComponentNone from '../components/AstroNone.astro';
 import ReactCSS from '../components/ReactCSS.jsx';
 import ReactModules from '../components/ReactModules.jsx';
 import VueCSS from '../components/VueCSS.vue';
@@ -22,6 +23,7 @@ import SvelteScoped from '../components/SvelteScoped.svelte';
   <body>
     <div class="wrapper">
       <AstroComponent />
+      <AstroComponentNone />
       <ReactCSS />
       <ReactModules />
       <VueCSS />