Pass empty names option to Sheet when using StyleSheetManager with …

…custom target (#3159) * Reset the names Map when reconstructing Sheet with custom target * Modify StyleSheetManager test to catch previous bug * add failing test * Update CHANGELOG.md
styled-components · Jul 29, 2020 · b19d17f · b19d17f
1 parent 1311e17
commit b19d17f
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,10 @@ _The format is based on [Keep a Changelog](http://keepachangelog.com/) and this
 
 ## Unreleased
 
+### Bugfixes
+
+- Make sure `StyleSheetManager` renders all styles in iframe / child windows (see [#3159](https://github.com/styled-components/styled-components/pull/3159)) thanks @eramdam!
+
 ## [v5.1.1] - 2020-04-07
 
 ### New Functionality

diff --git a/packages/styled-components/src/models/StyleSheetManager.js b/packages/styled-components/src/models/StyleSheetManager.js
@@ -40,7 +40,7 @@ export default function StyleSheetManager(props: Props) {
       // eslint-disable-next-line prefer-destructuring
       sheet = props.sheet;
     } else if (props.target) {
-      sheet = sheet.reconstructWithOptions({ target: props.target });
+      sheet = sheet.reconstructWithOptions({ target: props.target }, false);
     }
 
     if (props.disableCSSOMInjection) {

diff --git a/packages/styled-components/src/models/test/StyleSheetManager.test.js b/packages/styled-components/src/models/test/StyleSheetManager.test.js
@@ -196,6 +196,62 @@ describe('StyleSheetManager', () => {
     div.parentElement.removeChild(div);
   });
 
+  // https://github.com/styled-components/styled-components/issues/2973
+  it('should inject common styles into both the main document and a child frame', async () => {
+    const CommonTitle = styled.h1`
+      color: palevioletred;
+    `;
+
+    // Injects the stylesheet into the document available via context
+    const SheetInjector = ({ children, target }) => (
+      <StyleSheetManager target={target}>{children}</StyleSheetManager>
+    );
+
+    class Main extends React.Component {
+      componentDidMount() {
+        const styles = this.props.document.querySelector('style').textContent;
+        expect(styles.includes('palevioletred')).toEqual(true);
+      }
+
+      render() {
+        return this.props.children;
+      }
+    }
+
+    class Child extends React.Component {
+      componentDidMount() {
+        const styles = this.props.document.querySelector('style').textContent;
+        expect(styles.includes(`palevioletred`)).toEqual(true);
+      }
+
+      render() {
+        return <CommonTitle />;
+      }
+    }
+
+    const div = document.body.appendChild(document.createElement('div'));
+
+    render(
+      <Main document={document}>
+        <div>
+          <CommonTitle />
+          <Frame>
+            <FrameContextConsumer>
+              {({ document }) => (
+                <SheetInjector target={document.head}>
+                  <Child document={document} />
+                </SheetInjector>
+              )}
+            </FrameContextConsumer>
+          </Frame>
+        </div>
+      </Main>,
+      div
+    );
+
+    div.parentElement.removeChild(div);
+  });
+
   it('should render styles in correct order when styled(StyledComponent) and StyleSheetManager is used', () => {
     const Red = styled.div`
       color: red;

diff --git a/packages/styled-components/src/sheet/Sheet.js b/packages/styled-components/src/sheet/Sheet.js
@@ -57,8 +57,12 @@ export default class StyleSheet implements Sheet {
     }
   }
 
-  reconstructWithOptions(options: SheetConstructorArgs) {
-    return new StyleSheet({ ...this.options, ...options }, this.gs, this.names);
+  reconstructWithOptions(options: SheetConstructorArgs, withNames?: boolean = true) {
+    return new StyleSheet(
+      { ...this.options, ...options },
+      this.gs,
+      (withNames && this.names) || undefined
+    );
   }
 
   allocateGSInstance(id: string) {