Core

src/constructors/bulmaTemplate.ts

@@ -0,0 +1,11 @@
+import StyleSheet from '../models/StyleSheet'
+
+export default (sheet: StyleSheet) => {
+  const bulmaTemplate = (tags: BulmaTag[]) => {
+    sheet.injectTags(tags)
+
+    return tags
+  }
+
+  return bulmaTemplate
+}

src/constructors/constructorWithOptions.ts

@@ -1,36 +1,49 @@
+import { Component } from 'react'
 import { isValidElementType } from 'react-is'
 
 interface ConstructorOptions {
   [key: string]: any
   attrs?: { [key: string]: any }
 }
 
-type TemplateLiteral = any
+type ComponentConstructor = (
+  component: typeof Component,
+  options: ConstructorOptions,
+  tags: string[],
+) => Component
 
 interface TemplateFunction {
-  (): (...args: (string | TemplateLiteral)[]) => any
-  attrs?: (...options: any[]) => TemplateFunction
+  (style: Style, ...tags: TemplateTag[]): Component<any, any, any>
+  attrs?: (...attrs: any[]) => TemplateFunction
 }
 
-export default css => {
+type CssConstructor = (style: Style, ...tags: TemplateTag[]) => BulmaTag[]
+
+export default (css: CssConstructor) => {
   const constructWithOptions = (
-    componentConstructor,
-    tag,
+    componentConstructor: ComponentConstructor,
+    composedComponent: typeof Component,
     options: ConstructorOptions = {},
-  ) => {
-    if (!isValidElementType(tag)) {
+  ): TemplateFunction => {
+    if (!isValidElementType(composedComponent)) {
       throw new Error(
         process.env.NODE_ENV !== 'production'
-          ? `Cannot create styled-component for component: ${String(tag)}`
+          ? `Cannot create bulma-component for component: ${String(
+              composedComponent,
+            )}`
           : '',
       )
     }
 
-    const templateFunction: TemplateFunction = (...args) =>
-      componentConstructor(tag, options, css(...args))
+    const templateFunction: TemplateFunction = (
+      style: Style,
+      ...tags: TemplateTag[]
+    ) =>
+      // Here should go the derived tags from b``
+      componentConstructor(composedComponent, options, css(style, ...tags))
 
     templateFunction.attrs = attrs =>
-      constructWithOptions(componentConstructor, tag, {
+      constructWithOptions(componentConstructor, composedComponent, {
         ...options,
         attrs: { ...(options.attrs || {}), ...attrs },
       })

src/constructors/css.ts

@@ -1 +1,23 @@
-export default () => ''
+import interleave from '../utils/interleave'
+
+export default <bulmaTemplate, props>(
+  bulmaTemplate: bulmaTemplate,
+  props: props,
+) => {
+  const templateEvaluation = (
+    style: Style,
+    ...tags: TemplateTag[]
+  ): BulmaTag[] => {
+    const reducedTags = tags.map(tag => {
+      if (typeof tag === 'function') {
+        return tag(bulmaTemplate, props)
+      } else {
+        return tag
+      }
+    })
+
+    return interleave(style, reducedTags)
+  }
+
+  return templateEvaluation
+}

src/index.ts

@@ -1,19 +1,20 @@
 /* Import singletons */
 
-import css from './constructors/css'
-import StyleSheetManager from './models/StyleSheetManager'
+import StyleSheetManager, { BulmaContext } from './models/StyleSheetManager'
 import ServerStyleSheet from './models/ServerStyleSheet'
+import css from './constructors/css'
 
 /* Import singleton constructors */
 
 import _bulma from './constructors/bulma'
 import _constructorWithOptions from './constructors/constructorWithOptions'
 import _BulmaComponent from './models/BulmaComponent'
+import StyleSheet from './models/StyleSheet'
 
 /* Instantiate singletons */
 
 const constructorWithOptions = _constructorWithOptions(css)
-const BulmaComponent = _BulmaComponent(constructorWithOptions)
+const BulmaComponent = _BulmaComponent(BulmaContext)
 
 const bulma = _bulma(BulmaComponent, constructorWithOptions)
 

src/models/BulmaComponent.tsx

@@ -1,7 +1,36 @@
-import React, { Component } from 'react'
+import React, { Component, Context } from 'react'
 
-export default constructor => {
-  class BulmaComponent extends Component<any, any> {}
+interface Props<context> {
+  sheet: context & { injectTags: (tags: string[]) => void }
+  [key: string]: any
+}
+
+export default function<context>(BulmaContext: Context<context>) {
+  const withBulma = ComposedComponent => props => (
+    <BulmaContext.Consumer>
+      {sheet => <ComposedComponent sheet={sheet} {...props} />}
+    </BulmaContext.Consumer>
+  )
+
+  const createBulmaComponent = (
+    ComposedComponent: typeof Component,
+    options: object,
+    tags: BulmaTag[],
+  ) => {
+    class StyledComponent extends Component<Props<context>, any, any> {
+      componentWillMount() {
+        const { sheet } = this.props
+
+        sheet.injectTags(tags)
+      }
+
+      render() {
+        return <ComposedComponent classNames={tags} {...options} />
+      }
+    }
+
+    return withBulma(StyledComponent)
+  }
 
-  return BulmaComponent
+  return createBulmaComponent
 }

src/models/StyleSheet.ts

@@ -14,6 +14,10 @@ export default class StyleSheet {
     return master || (master = new StyleSheet())
   }
 
+  injectTags(tags: string) {
+    return
+  }
+
   clone(): StyleSheet {
     return
   }

src/types.ts

@@ -0,0 +1,5 @@
+type Style = string[]
+
+type BulmaTag = string
+
+type TemplateTag = <bulma, props>(bulma: bulma, props: props) => BulmaTag

src/utils/interleave.ts

@@ -0,0 +1,8 @@
+export default function interleave<T, U>(base: T[], elements: U[]): (T | U)[] {
+  return elements.reduce(
+    (array, element, index) => {
+      return [...array, element, base[index + 1]]
+    },
+    [base[0]],
+  )
+}