style

README.md

@@ -23,7 +23,10 @@ import ReactGlobalStyle from 'react-global-style';
 // `el` can be a selector
 <ReactGlobalStyle className="foo" el="#app-root" />
 
-// COMING SOON: style support
+// className can be an array
+<ReactGlobalStyle className={['foo', 'bar']} />
+
+// `style` is also supported
 <ReactGlobalStyle style={{color: 'black'}} />
 ```
 

src/ReactGlobalStyle.js

@@ -102,7 +102,30 @@ export default class ReactGlobalStyle extends React.Component {
   }
   updateStyles(style, oldStyle) {
     if (!style) style = {};
-    if (!oldStyle) style = {};
+    if (!oldStyle) oldStyle = {};
+    const el = this.el();
+    const ed = this.ed();
+
+    Object.keys(style).forEach((a) => {
+      // Check if this is a new style
+      if (!oldStyle[a] && oldStyle[a] !== 0) {
+        ed.addStyleLevel(a, style[a]);
+        el.style[a] = style[a];
+      }
+    });
+
+    Object.keys(oldStyle).forEach((b) => {
+      // Remove the style by peeling back a layer
+      if (!style[b] && style[b] !== 0) {
+        ed.removeStyleLevel(b);
+        const levels = ed.styleLevels.get(b);
+        if (levels && levels.length) {
+          el.style[b] = levels[levels.length - 1];
+        } else {
+          el.style[b] = '';
+        }
+      }
+    });
   }
   componentDidMount() {
     this.updateClasses(splitClasses(this.props.className), []);

src/__tests__/ReactGlobalStyle-test.js

@@ -126,6 +126,43 @@ describe(`ReactGlobalStyle`, () => {
     expect(el.className).toBe(`bar quux`);
   });
 
-});
+  it(`sets and removes styles`, () => {
+    const el = document.createElement('div');
+    const w = mount(<ReactGlobalStyle style={{color: `red`}} el={el} />);
+    expect(el.style.color).toBe(`red`);
+    w.setProps({el, style: {}});
+    expect(el.style.color).toBe(``);
+    w.setProps({el});
+    expect(el.style.color).toBe(``);
+  });
 
+  it(`resets to previous styles`, () => {
+    const el = document.createElement('div');
+    const w = mount(<ReactGlobalStyle style={{color: `red`}} el={el} />);
+    const w2 = mount(<ReactGlobalStyle style={{color: `blue`}} el={el} />);
+    expect(el.style.color).toBe('blue');
+    // w2.setProps({el, style: {}});
+    w2.setProps({el});
+    expect(el.style.color).toBe('red');
+  });
 
+  it(`style barage of changes`, () => {
+    const el = document.createElement('div');
+    const w = mount(<ReactGlobalStyle style={{color: `red`}} el={el} />);
+    w.setProps({el, style: {color: 'blue'}});
+    w.setProps({el, style: {width: '5em'}});
+    w.setProps({el, style: {width: '5em'}});
+    w.setProps({el, style: {}});
+    expect(el.style.color).toBe('');
+    expect(el.style.color).toBe('');
+  });
+
+  it(`unmount`, () => {
+    const el = document.createElement('div');
+    const w = mount(<ReactGlobalStyle clasName="foo" style={{color: `red`}} el={el} />);
+
+    w.unmount();
+    expect(el.className).toBe('');
+    expect(el.style.color).toBe('');
+  });
+});