Added in-built support for 'styled-components'

example/js/components/Country/components/Image/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import * as e from './styles';
+
+export default function Image(props) {
+    return <e.Image {...props} />;
+}

example/js/components/Country/components/Image/styles.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+
+export const Image = styled.img`
+    width: 35vmin;
+    height: 35vmin;
+
+    @media (max-width: 285px) {
+        width: 20vmin;
+        height: 20vmin;
+    }
+
+    @media (max-width: 190px) {
+        display: none;
+    }
+`;

example/js/components/Country/index.js

@@ -6,13 +6,16 @@ import DocumentTitle from 'react-document-title';
 import * as duck from '../../duck';
 import * as utils from '../../utils';
 import Countries from '../Countries';
+import Image from './components/Image';
 
 function Country({ weather, country, countries, fetch }) {
     const { title, label, fahrenheit, timezone, date } = utils.getWeather(
         weather,
         country,
     );
-    useEffect(() => fetch(country), [country]);
+    useEffect(() => {
+        fetch(country);
+    }, [country]);
 
     return (
         <DocumentTitle title={`Weather for ${country}`}>
@@ -22,7 +25,7 @@ function Country({ weather, country, countries, fetch }) {
                     onClick={() => fetch(country, { cache: false })}
                 />
                 <main>
-                    <img src={utils.getFilename(country)} alt={country} />
+                    <Image src={utils.getFilename(country)} alt={country} />
                     <h1>
                         {title} at{' '}
                         {timezone

example/js/components/Layout/styles.css

@@ -50,11 +50,6 @@ button.refresh:hover {
     opacity: 0.5;
 }
 
-img {
-    width: 35vmin;
-    height: 35vmin;
-}
-
 h1 {
     font-family: Times, 'Times New Roman', serif;
     font-weight: normal;
@@ -137,15 +132,7 @@ select {
     }
 }
 
-@media (max-width: 285px) {
-    img {
-        width: 20vmin;
-        height: 20vmin;
-    }
-}
-
 @media (max-width: 190px) {
-    img,
     button {
         display: none;
     }

package.json

@@ -74,6 +74,7 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-terser": "^5.1.3",
     "sinon": "^8.0.2",
+    "styled-components": "^4.4.1",
     "to-string-loader": "^1.1.6",
     "webpack": "^4.41.5",
     "webpack-cli": "^3.3.10"

src/index.js

@@ -3,6 +3,19 @@ import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { decamelize } from 'humps';
 
+function Noop({ children }) {
+    return children;
+}
+
+function getStyleWrapper() {
+    try {
+        const styled = require('styled-components');
+        return styled.StyleSheetManager;
+    } catch {
+        return Noop;
+    }
+}
+
 function ShadowContent({ root, children }) {
     return createPortal(children, root);
 }
@@ -15,6 +28,7 @@ ShadowContent.propTypes = {
 function createComponent(options) {
     const ShadowRoot = forwardRef(
         ({ mode, delegatesFocus, styleSheets, children, ...props }, ref) => {
+            const Wrapper = getStyleWrapper();
             const [node, setNode] = useState(null);
             const [root, setRoot] = useState(null);
 
@@ -34,7 +48,11 @@ function createComponent(options) {
             return (
                 <options.tag ref={setNode} {...props}>
                     {root && (
-                        <ShadowContent root={root}>{children}</ShadowContent>
+                        <Wrapper target={root}>
+                            <ShadowContent root={root}>
+                                {children}
+                            </ShadowContent>
+                        </Wrapper>
                     )}
                 </options.tag>
             );