Prevent _emitSheetCSS to generate empty style tags

styled-components · Jun 8, 2024 · 92b2ad9 · 92b2ad9
1 parent 770d1fa
commit 92b2ad9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/packages/styled-components/src/models/ServerStyleSheet.tsx b/packages/styled-components/src/models/ServerStyleSheet.tsx
@@ -23,6 +23,7 @@ export default class ServerStyleSheet {
 
   _emitSheetCSS = (): string => {
     const css = this.instance.toString();
+    if (!css) return '';
     const nonce = getNonce();
     const attrs = [
       nonce && `nonce="${nonce}"`,

diff --git a/packages/styled-components/src/sheet/Rehydration.ts b/packages/styled-components/src/sheet/Rehydration.ts
@@ -16,7 +16,7 @@ export const outputSheet = (sheet: Sheet) => {
 
     const names = sheet.names.get(id);
     const rules = tag.getGroup(group);
-    if (names === undefined || rules.length === 0) continue;
+    if (names === undefined || !names.size || rules.length === 0) continue;
 
     const selector = `${SC_ATTR}.g${group}[id="${id}"]`;
 

diff --git a/packages/styled-components/src/test/ssr.test.tsx b/packages/styled-components/src/test/ssr.test.tsx
@@ -60,6 +60,18 @@ describe('ssr', () => {
     expect(css).toMatchSnapshot();
   });
 
+  it('should emit nothing when no styles were generated', () => {
+    styled.h1`
+      color: red;
+    `;
+
+    const sheet = new ServerStyleSheet();
+    renderToString(sheet.collectStyles(<div />));
+
+    const css = sheet.getStyleTags();
+    expect(css).toBe('');
+  });
+
   it('should not spill ServerStyleSheets into each other', () => {
     const A = styled.h1`
       color: red;