Remove printStyles feature

No longer needed, since media query styles are now rendered as CSS
anyway.

docs/api/README.md

@@ -12,7 +12,6 @@
 - [Plugins](#plugins)
 - [Style Component](#style-component)
 - [StyleRoot Component](#styleroot-component)
-- [PrintStyleSheet Component](#printstylesheet-component)
 
 
 ## Sample Style Object
@@ -527,70 +526,3 @@ class App extends React.Component {
   }
 }  
 ```
-
-
-## PrintStyleSheet component
-
-In order to fully support print styling it is necessary to use CSS because of browser differences, as described in [#132](https://github.com/FormidableLabs/radium/issues/132#issuecomment-99805511). Radium allows you to do this easily by specifying print styles as static properties of your components.
-
-With ES7 decorators and static class properties:
-
-```jsx
-@Radium
-class MyComponent extends React.Component {
-  static printStyles = {
-    wrapper: { background: 'black' },
-    text: { color: 'red' }
-  };
-
-  render() {
-    return (
-      <div className={this.printStyleClass.wrapper}>
-        <p className={this.printStyleClass.text}>I'm red on print</p>
-      </div>
-    );
-  }
-}
-```
-
-With `createClass`:
-
-```jsx
-Radium(React.createClass({
-  displayName: 'MyComponent',
-
-  statics: {
-    printStyles = {
-      wrapper: { background: 'black' },
-      text: { color: 'red' }
-    }
-  },
-
-  render() {
-    return (
-      <div className={this.printStyleClass.wrapper}>
-        <p className={this.printStyleClass.text}>I'm red on print</p>
-      </div>
-    );
-  }
-}));
-```
-
-In your root component render `<PrintStyleSheet />` and it will render a style tag containing all the CSS needed for printing, wrapped in a `@media print` query. You should only render `<PrintStyleSheet />` once. It will contain all the print styles for every component.
-
-**App.js**
-
-```jsx
-import {PrintStyleSheet} from 'radium';
-
-class App extends React.Component {
-  render() {
-    return (
-      <div>
-        <PrintStyleSheet />
-        ... rest of your app ...
-      </div>
-    );
-  }
-}
-```

docs/guides/README.md

@@ -205,7 +205,7 @@ var style = {
 };
 ```
 
-Radium will apply the correct styles for the currently active media queries.
+Radium will apply the correct styles for the currently active media queries. Top level CSS rules in your media queries will be converted to CSS and rendered in an actual `<style>` element with `!important` appended instead of being applied inline so they will work with server-side rendering. Note that you must add the `isRoot: true` config to your App component, e.g. `@Radium({isRoot: true})` to render the Radium stylesheet. Print styles will also work as normal, since they are rendered to CSS.
 
 ### Nested browser states
 
@@ -227,10 +227,6 @@ var style = {
 
 ### Known issues with media queries
 
-#### @media print
-
-If you use the query `@media print`, your print styles will not show up on Firefox at all, or in Chrome when triggering `window.print` from JavaScript. See [Issue 132](https://github.com/FormidableLabs/radium/issues/132#issuecomment-99805511) for more details.
-
 #### IE9 Support
 
 IE9 supports CSS media queries, but doesn't support the `matchMedia` API. You'll need a [polyfill that includes addListener](https://github.com/paulirish/matchMedia.js/).

examples/app.jsx

@@ -53,6 +53,7 @@ class TwoSquares extends React.Component {
 }
 
 var Spinner = React.createClass({
+<<<<<<< HEAD
   statics: {
     printStyles: {
       main: {
@@ -66,9 +67,15 @@ var Spinner = React.createClass({
   },
 
   render: function () {
+=======
+  render() {
+>>>>>>> Remove printStyles feature
     return (
-      <div className={this.printStyleClass.main}>
-        <div className={this.printStyleClass.inner} style={spinnerStyles.inner} />
+      <div>
+        <div style={[
+          spinnerStyles.inner,
+          {'@media print': {height: '10px'}}
+        ]} />
       </div>
     );
   }
@@ -158,9 +165,13 @@ var App = React.createClass({
           />
           <span>This content has scoped styles</span>
         </div>
+<<<<<<< HEAD
 
         <PrintStyleSheet />
       </StyleRoot>
+=======
+      </div>
+>>>>>>> Remove printStyles feature
     );
   }
 });

src/__tests__/enhancer-test.js

@@ -88,23 +88,6 @@ describe('Enhancer', () => {
     expect(Enhanced.displayName).to.equal(Composed.displayName);
   });
 
-  it('sets up classNames on for printStyles have a copy', () => {
-    class Composed extends Component {
-      render() {}
-    }
-    Composed.displayName = 'PrintStyleTest';
-    Composed.printStyles = {
-      foo: { display: 'none' },
-      bar: { display: 'block' }
-    };
-
-    const Enhanced = Enhancer(Composed);
-
-    const enhanced = new Enhanced();
-    expect(enhanced.printStyleClass.foo).to.equal('Radium-PrintStyleTest-foo');
-    expect(enhanced.printStyleClass.bar).to.equal('Radium-PrintStyleTest-bar');
-  });
-
   it('calls existing componentWillUnmount function', () => {
     const existingComponentWillUnmount = sinon.spy();
     class Composed extends Component {

src/__tests__/media-query-test.js

@@ -192,50 +192,4 @@ describe('Media query tests', () => {
     expect(mql.addListener).to.have.been.calledOnce;
     expect(mql.removeListener).to.have.been.calledOnce;
   });
-
-  it('renders top level style rules as CSS instead of inline', () => {
-    const matchMedia = sinon.spy(() => ({
-      addListener: () => {},
-      matches: true
-    }));
-
-
-    @Radium
-    class ChildComponent extends Component {
-      render() {
-        return (
-          <span style={{
-            '@media (min-width: 600px)': {background: 'red', color: 'blue'}
-          }} />
-        );
-      }
-    }
-
-    @Radium({matchMedia})
-    class TestComponent extends Component {
-      render() {
-        return (
-          <StyleRoot>
-            <ChildComponent />
-          </StyleRoot>
-        );
-      }
-    }
-
-    const output = TestUtils.renderIntoDocument(<TestComponent />);
-
-    const span = getElement(output, 'span');
-    const className = span.className.trim();
-    expect(className).to.not.be.empty;
-
-    const style = getElement(output, 'style');
-    expectCSS(style, `
-      @media (min-width:600px){
-        .${className}{
-          background:red !important;
-          color:blue !important;
-        }
-      }
-    `);
-  });
 });

src/__tests__/radium-test.js

@@ -1,11 +1,11 @@
 /* eslint-disable react/prop-types */
 
-import Radium, {PrintStyleSheet} from 'index.js';
+import Radium from 'index.js';
 import MouseUpListener from 'plugins/mouse-up-listener.js';
 import React, {Component, PropTypes} from 'react';
 import ReactDOM from 'react-dom';
 import TestUtils from 'react-addons-test-utils';
-import {expectCSS, getRenderOutput, getElement} from 'test-helpers';
+import {getRenderOutput, getElement} from 'test-helpers';
 
 describe('Radium blackbox tests', () => {
   beforeEach(() => {
@@ -284,55 +284,6 @@ describe('Radium blackbox tests', () => {
     expect(footer.style.color).to.equal('red');
   });
 
-  it('applies print styles through the PrintStyle component', () => {
-    Radium(React.createClass({
-      displayName: 'TestComponent',
-
-      statics: {
-        printStyles: {
-          foo: {color: 'blue'},
-          bar: {background: 'red'}
-        }
-      },
-
-      render() {
-        return (
-          <div />
-        );
-      }
-    }));
-
-    class TestComponent2 extends Component {
-      render() {
-        return <div />;
-      }
-    }
-
-    TestComponent2.displayName = 'TestComponent2';
-    TestComponent2.printStyles = {
-      main: {color: 'black'}
-    };
-    Radium(TestComponent2);
-
-    const output = TestUtils.renderIntoDocument(<PrintStyleSheet />);
-
-    const style = getElement(output, 'style');
-
-    expectCSS(style, `
-      @media print {
-        .Radium-TestComponent-foo {
-          color: blue !important;
-        }
-        .Radium-TestComponent-bar {
-          background: red !important;
-        }
-        .Radium-TestComponent2-main {
-          color: black !important;
-        }
-      }
-    `);
-  });
-
   it('resolves styles if an element has element children and spreads props', () => {
     @Radium
     class Inner extends Component {

src/enhancer.js

@@ -2,9 +2,8 @@
 
 import {Component, PropTypes} from 'react';
 
-import StyleKeeper from './style-keeper';
+import StyleKeeper from './style-keeper.js';
 import resolveStyles from './resolve-styles.js';
-import printStyles from './print-styles.js';
 
 const KEYS_TO_IGNORE_WHEN_COPYING_PROPERTIES = [
   'arguments',
@@ -63,10 +62,6 @@ export default function enhanceWithRadium(
       this.state = this.state || {};
       this.state._radiumStyleState = {};
       this._radiumIsMounted = true;
-
-      if (RadiumEnhancer.printStyleClass) {
-        this.printStyleClass = RadiumEnhancer.printStyleClass;
-      }
     }
 
     componentWillUnmount() {
@@ -152,8 +147,6 @@ export default function enhanceWithRadium(
     component.name ||
     'Component';
 
-  RadiumEnhancer.printStyleClass = printStyles.addPrintStyles(RadiumEnhancer);
-
   RadiumEnhancer.contextTypes = {
     ...RadiumEnhancer.contextTypes,
     _radiumConfig: PropTypes.object,

src/index.js

@@ -1,6 +1,5 @@
 import Enhancer from './enhancer';
 import Plugins from './plugins';
-import PrintStyleSheet from './components/print-style-sheet';
 import Style from './components/style';
 import StyleRoot from './components/style-root';
 import getState from './get-state';
@@ -12,7 +11,6 @@ function Radium(ComposedComponent: constructor) {
 }
 
 Radium.Plugins = Plugins;
-Radium.PrintStyleSheet = PrintStyleSheet;
 Radium.Style = Style;
 Radium.StyleRoot = StyleRoot;
 Radium.getState = getState;