add support for selector for special cases

readme.md

@@ -412,6 +412,45 @@ setRootElement(myCustomAnchor);
 setDocumentElement(alternativeDocuments);
 ```
 
+## Give me back my selector
+
+Despite of having a non-selector philosophy, Electron will allow you to use some for some special cases. (like styling user input). Here is how.
+
+```javascript
+// will style Button inside of img 
+const Button = CSS({
+    img: {
+        color: color.blue
+    }
+});
+
+// will style Button inside of img inside of div
+const Button = CSS({
+    'div img': {
+        color: color.blue
+    }
+});
+```
+
+As for classname, what you define inside Button as selector are the parents !!
+If you want to have old style left to right selector use the 'next' helper (which actually prepend a '>')
+
+```javascript
+// will style img inside of div inside Button 
+const Button = CSS({
+    [CSS.next('div img')]: {
+        color: color.blue
+    }
+});
+
+// will style img inside of div inside Button 
+const Button = CSS({
+    '> div img': {
+        color: color.blue
+    }
+});
+```
+
 # Examples 
 
 ## React

src/index.js

@@ -164,7 +164,9 @@ const jsonToCss = function (_css, className, refresh = () => {}) {
       const eventKey = caseConvert(key.replace(/^on[A-Z]/, match => match.substr(-1).toLowerCase()));
 
       master += jsonToCss(_css[key], className + ':' + eventKey);
-    } else if (key.match(/^\./)) {
+    } else if (typeof _css[key] !== null && typeof _css[key] === 'object' && !Array.isArray(_css[key]) && key.match(/^>/)) {
+      master += jsonToCss(_css[key], className + ' ' + key.substr(2));
+    } else if (typeof _css[key] !== null && typeof _css[key] === 'object' && !Array.isArray(_css[key])) {
       master += key + ' ' + jsonToCss(_css[key], className);
     } else {
       const dashKey = caseConvert(key);
@@ -318,6 +320,8 @@ const CSS = function (rules) {
   return result;
 }
 
+CSS.next = (selector) => '> ' + selector;
+
 const Keyframes = function (rules) {
   createTargetStyle();
   const keysName = 'keys' + randomId();

tests/index.spec.js

@@ -43,6 +43,33 @@ describe('', () => {
       expect(getSheet().cssRules[0].style.color).toBe('red');
     });
 
+    it('can select an element', () => {
+      CSS({
+        color: 'red',
+        img: {
+          color: 'blue'
+        }
+      });
+
+      expect(getSheet().cssRules[0].style.color).toBe('red');
+      expect(getSheet().cssRules[1].style.color).toBe('blue');
+      expect(getSheet().cssRules[1].selectorText).toBe('img .class0');
+    });
+
+    it('can select a children', () => {
+      CSS({
+        color: 'red',
+
+        [CSS.next('img')]: {
+          color: 'blue'
+        }
+      });
+
+      expect(getSheet().cssRules[0].style.color).toBe('red');
+      expect(getSheet().cssRules[1].style.color).toBe('blue');
+      expect(getSheet().cssRules[1].selectorText).toBe('.class0 img');
+    });
+
     it('Can use constants', () => {
       CSS({
         color: color.red,