Merge pull request FormidableLabs#646 from FormidableLabs/feature-sco…

…pingSelectorsAllOver

Make scopeSelector work without nested selectors

docs/api/README.md

@@ -439,6 +439,33 @@ The `<Style>` component renders an HTML `<style>` tag containing a set of CSS ru
 
 Without the `<Style>` component, it is prohibitively difficult to write a `<style>` element in React. To write a normal `<style>` element, you need to write your CSS as a multiline string inside of the element. `<Style>` simplifies this process, and adds prefixing and the ability to scope selectors.
 
+If you include a `scopeSelector`, you can include CSS rules that should apply to that selector as well as any nested selectors. For example, the following
+
+```
+<Style
+  scopeSelector=".scoping-class"
+  rules={{
+    color: 'blue',
+    span: {
+      fontFamily: 'Lucida Console, Monaco, monospace'
+    }
+  }}
+/>
+```
+
+will return:
+
+```
+<style>
+.scoping-class {
+  color: 'blue';
+}
+.scoping-class span {
+  font-family: 'Lucida Console, Monaco, monospace'
+}
+</style>
+```
+
 ### Props
 
 #### rules

examples/app.jsx

@@ -160,7 +160,8 @@ var App = React.createClass({
             rules={{
               span: {
                 fontFamily: 'Lucida Console, Monaco, monospace'
-              }
+              },
+              color: 'blue'
             }}
           />
           <span>This content has scoped styles</span>

src/__tests__/style-component-test.js

@@ -105,4 +105,32 @@ describe('<Style> component', () => {
       }
     `);
   });
+
+  it('adds scopeSelector if no selectors are present', () => {
+    const output = TestUtils.renderIntoDocument(
+      <Style
+        rules={{
+          color: 'red',
+          backgroundColor: 'white',
+          div: {
+            color: 'blue',
+            backgroundColor: 'black'
+          }
+        }}
+        scopeSelector=".scope"
+      />
+    );
+
+    const style = getElement(output, 'style');
+    expectCSS(style, `
+      .scope {
+        color: red;
+        background-color: white;
+      }
+      .scope div {
+        color: blue;
+        background-color: black;
+      }
+    `);
+  });
 });

src/components/style.js

@@ -30,13 +30,24 @@ const Style = React.createClass({
       this.context._radiumConfig.userAgent
     );
 
-    return Object.keys(styles).reduce((accumulator, selector) => {
-      const {scopeSelector} = this.props;
+    const {scopeSelector} = this.props;
+    const rootRules = Object.keys(styles).reduce((accumulator, selector) => {
+      if (typeof styles[selector] !== 'object') {
+        accumulator[selector] = styles[selector];
+      }
+
+      return accumulator;
+    }, {});
+    const rootStyles = Object.keys(rootRules).length ?
+      cssRuleSetToString(scopeSelector || '', rootRules, userAgent) :
+      '';
+
+    return rootStyles + Object.keys(styles).reduce((accumulator, selector) => {
       const rules = styles[selector];
 
       if (selector === 'mediaQueries') {
         accumulator += this._buildMediaQueryString(rules);
-      } else {
+      } else if (typeof styles[selector] === 'object') {
         const completeSelector = scopeSelector
           ? selector
             .split(',')