Remove sc style nodes on cleanup (styled-components#382)

* Remove sc style nodes on cleanup * Add resetStyleSheet test * Remove unneeded 'expect' import
nhardy · Jul 12, 2021 · e1be59f · e1be59f
1 parent 90f8813
commit e1be59f
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 5 deletions.
diff --git a/src/utils.js b/src/utils.js
@@ -11,6 +11,13 @@ const sheet = mainSheet || masterSheet;
 const isServer = () => typeof document === 'undefined';
 
 const resetStyleSheet = () => {
+  if (!isServer()) {
+    const scStyles = document.querySelectorAll('style[data-styled-version]')
+    for (const item of scStyles) {
+      item.parentElement.removeChild(item)
+    }
+  }
+
   sheet.names = new Map();
   sheet.clearTag();
 };

diff --git a/test/utils.spec.js b/test/utils.spec.js
@@ -1,9 +1,9 @@
-const {
-  __PRIVATE__: { mainSheet, masterSheet },
-} = require('styled-components');
-
-const { getHashes } = require('../src/utils');
+import styled, { __PRIVATE__ } from 'styled-components'
+import { render } from '@testing-library/react';
+import React from 'react'
+import { getHashes, resetStyleSheet } from '../src/utils';
 
+const { mainSheet, masterSheet } = __PRIVATE__
 const sheet = mainSheet || masterSheet;
 
 it('extracts hashes', () => {
@@ -36,3 +36,23 @@ it('extracts hashes', () => {
 
   expect(getHashes()).toEqual(['sc-1', 'a', 'sc-2', 'b', 'c', 'sc-3', 'd', 'e']);
 });
+
+it('resets style sheets', () => {
+  const Component = styled.div`
+    background-color: orange;
+  `
+
+  render(<Component />)
+
+  expect(
+    document.querySelectorAll('style[data-styled-version]').length,
+  ).not.toBe(0)
+  expect(sheet.names.size).not.toBe(0)
+
+  resetStyleSheet()
+
+  expect(
+    document.querySelectorAll('style[data-styled-version]').length,
+  ).toBe(0)
+  expect(sheet.names.size).toBe(0)
+})