feat: support for imported bases

Author: andreypopp

src/ComponentRef.js

@@ -0,0 +1,46 @@
+/**
+ * @copyright 2016-present, Reactdown Team
+ * @flow
+ */
+
+import * as types from 'babel-types';
+
+// TODO: More robust regexpes required!
+const PARSE_REF_RE = /^([a-zA-Z0-9_\-\/]+)(\.([a-zA-Z0-9_]+))?$/;
+const PARSE_NAMED_REF_RE = /^([a-zA-Z0-9_]+)=([a-zA-Z0-9_\-\/]+)(\.([a-zA-Z0-9_]+))?$/;
+
+export type ComponentRef = {
+  source: string;
+  name: string;
+};
+
+export function parse(ref: string): ?ComponentRef {
+  let match = PARSE_REF_RE.exec(ref);
+  if (!match) {
+    return null;
+  }
+  let [_everything, source, _nothing, name = 'default'] = match;
+  return {source, name};
+}
+
+export function parseNamed(ref: string): ?{id: string; ref: ComponentRef} {
+  let match = PARSE_NAMED_REF_RE.exec(ref);
+  if (!match) {
+    return null;
+  }
+  let [_everything, id, source, _nothing, name = 'default'] = match;
+  return {id, ref: {source, name}};
+}
+
+export function importDeclaration(identifier, ref: ComponentRef | string) {
+  if (typeof ref === 'string') {
+    ref = parse(ref);
+  }
+  let specifier;
+  if (ref.name === 'default') {
+    specifier = types.importDefaultSpecifier(identifier);
+  } else {
+    specifier = types.importSpecifier(identifier, types.identifier(ref.name));
+  }
+  return types.importDeclaration([specifier], types.stringLiteral(ref.source));
+}

src/__tests__/fixtures/imported-base-named.css

@@ -0,0 +1,3 @@
+:local(.Label) {
+    color: red
+}

src/__tests__/fixtures/imported-base-named.js

@@ -0,0 +1,7 @@
+import React from "react";
+import styles from "css";
+import { Label as Label__Base } from "lib";
+export function Label(props) {
+  return React.createElement(Label__Base, { ...props, className: styles.Label
+  });
+}

src/__tests__/fixtures/imported-base-named.react.css

@@ -0,0 +1,4 @@
+Label {
+  base: lib.Label;
+  color: red;
+}

src/__tests__/fixtures/imported-base.css

@@ -0,0 +1,3 @@
+:local(.Label) {
+    color: red
+}

src/__tests__/fixtures/imported-base.js

@@ -0,0 +1,7 @@
+import React from "react";
+import styles from "css";
+import Label__Base from "somelib/Label";
+export function Label(props) {
+  return React.createElement(Label__Base, { ...props, className: styles.Label
+  });
+}

src/__tests__/fixtures/imported-base.react.css

@@ -0,0 +1,4 @@
+Label {
+  base: somelib/Label;
+  color: red;
+}

src/index.js

@@ -8,6 +8,8 @@ import * as postcss from 'postcss';
 import * as LoaderUtils from 'loader-utils';
 import generate from 'babel-generator';
 import transformVariants, {isVariant} from './transformVariants';
+import HTMLTagList from './HTMLTagList';
+import * as ComponentRef from './ComponentRef';
 
 const LOADER = require.resolve('../webpack');
 
@@ -53,14 +55,22 @@ function renderToCSS(source: string, _config: RenderConfig): string {
 function renderToJS(source: string, config: RenderConfig): string {
   let root = postcss.parse(source);
   let statements = [];
-  let component = 'div';
+  let component = types.stringLiteral('div');
   root.walkRules(node => {
     if (isVariant(node)) {
       return;
     }
     node.walkDecls(decl => {
       if (decl.prop === 'base') {
-        component = decl.value;
+        if (HTMLTagList[decl.value]) {
+          component = types.stringLiteral(decl.value);
+        } else {
+          let componentRef = ComponentRef.parse(decl.value);
+          component = types.identifier(node.selector + '__Base');
+          statements.unshift(
+            ComponentRef.importDeclaration(component, decl.value)
+          );
+        }
       }
     });
     statements.push(exportComponent(node.selector, component, node.selector));
@@ -92,7 +102,7 @@ function exportComponent(name: string, component: string, className: string) {
     types.memberExpression(
       types.identifier('React'),
       types.identifier('createElement')),
-    [types.stringLiteral(component), propsNode]
+    [component, propsNode]
   );
   let componentNode = types.functionDeclaration(
     types.identifier(name),