feat: add support for base specifier

Author: andreypopp

src/__tests__/index-test.js

@@ -43,6 +43,20 @@ Label {
       color: black;
     }
   }
+}
+    `, {requestCSS: 'react-css-components?css!styles.react.css'});
+    console.log('--- js');
+    console.log(js);
+    console.log('--- css');
+    console.log(css);
+  });
+
+  it('renders react components based on specified DOM component', function() {
+    let {js, css} = render(`
+
+Label {
+  base: span;
+  color: red;
 }
     `, {requestCSS: 'react-css-components?css!styles.react.css'});
     console.log('--- js');

src/index.js

@@ -38,6 +38,11 @@ function renderToCSS(source: string, config: RenderConfig): string {
   let root = postcss.parse(source);
   root = transformVariants(root);
   root.walkRules(node => {
+    node.eachDecl(decl => {
+      if (decl.prop === 'base') {
+        decl.remove();
+      }
+    });
     let cssNode = node.clone();
     cssNode.selector = `:local(.${node.selector})`;
     node.replaceWith(cssNode);
@@ -48,11 +53,17 @@ function renderToCSS(source: string, config: RenderConfig): string {
 function renderToJS(source: string, config: RenderConfig): string {
   let root = postcss.parse(source);
   let statements = [];
+  let component = 'div';
   root.walkRules(node => {
     if (isVariant(node)) {
       return;
     }
-    statements.push(exportComponent(node.selector, 'div', node.selector));
+    node.eachDecl(decl => {
+      if (decl.prop === 'base') {
+        component = decl.value;
+      }
+    });
+    statements.push(exportComponent(node.selector, component, node.selector));
   });
   statements.unshift(
     types.importDeclaration(