some more stuff, generating CSS selectors from rules

src/components/button.style.js

@@ -1,5 +1,6 @@
 export default {
   name: 'Button',
+  selector: '.btn',
   states: {
     hover: ':hover',
     disabled: ':disabled',

src/components/icon.style.js

@@ -1,3 +1,4 @@
 export default {
-  name: 'Icon'
+  name: 'Icon',
+  selector: '.icon'
 }

src/components/panel.style.js

@@ -1,5 +1,6 @@
 export default {
   name: 'Panel',
+  selector: '.panel',
   validInnerComponents: [
     'Text',
     'Icon',

src/components/text.style.js

@@ -1,9 +1,7 @@
 export default {
   name: 'Text',
+  selector: '',
   states: {
     faint: '.faint'
-  },
-  variants: {
-    green: '/.greentext'
   }
 }

src/components/underlay.style.js

@@ -1,5 +1,6 @@
 export default {
-  name: 'Panel',
+  name: 'Underlay',
+  selector: '.underlay',
   validInnerComponents: [
     'Panel'
   ]