Break css.ts into separate files

dist/client.d.ts

@@ -0,0 +1,3 @@
+import { Module } from 'snabbdom/modules/module';
+export declare const cssModule: Module;
+export default cssModule;

dist/client.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var utils_1 = require("./utils");
+var updateDOM = function (oldNode, newNode) {
+    if (newNode.elm) {
+        var elm_1 = newNode.elm;
+        utils_1.updateVNode(newNode, function (name, value) { return elm_1.setAttribute(name, value); });
+    }
+};
+exports.cssModule = {
+    create: updateDOM,
+    update: updateDOM,
+};
+exports.default = exports.cssModule;

dist/server.d.ts

@@ -0,0 +1,3 @@
+import { VNode } from 'snabbdom/vnode';
+export declare const serverSideCssModule: (node: VNode, attributes: Map<string, string | number>) => void;
+export declare const collectStyles: (node: VNode) => string;

dist/server.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var typestyle_1 = require("typestyle");
+var utils_1 = require("./utils");
+exports.serverSideCssModule = function (node, attributes) {
+    return utils_1.updateVNode(node, function (name, value) { return attributes.set(name, value); });
+};
+exports.collectStyles = function (node) {
+    var instance = typestyle_1.createTypeStyle();
+    traverseVNode(node, instance);
+    return instance.getStyles();
+};
+var traverseVNode = function (node, instance) {
+    if (utils_1.isVNode(node)) {
+        var data = node.data;
+        if (data.css) {
+            instance.style(data.css);
+        }
+        if (node.children) {
+            node.children.forEach(function (child) { return traverseVNode(child, instance); });
+        }
+    }
+};

dist/snabbdom-typestyle.d.ts

@@ -0,0 +1,4 @@
+import cssModule from './client';
+export * from './types';
+export * from './server';
+export default cssModule;

dist/snabbdom-typestyle.js

@@ -0,0 +1,8 @@
+"use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+var client_1 = require("./client");
+__export(require("./server"));
+exports.default = client_1.default;

dist/types.d.ts

@@ -0,0 +1,6 @@
+import { VNodeData } from 'snabbdom/vnode';
+import { types } from 'typestyle';
+export interface StyledVNodeData extends VNodeData {
+    css?: types.NestedCSSProperties;
+}
+export declare type Style = types.NestedCSSProperties;

dist/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

dist/utils.d.ts

@@ -0,0 +1,3 @@
+import { VNode } from 'snabbdom/vnode';
+export declare const isVNode: (vNode: string | VNode) => vNode is VNode;
+export declare const updateVNode: (node: VNode, attributeAccessor: (attribute: string, className: string) => void) => void;

dist/utils.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var typestyle_1 = require("typestyle");
+exports.isVNode = function (vNode) {
+    return vNode.length === undefined;
+};
+exports.updateVNode = function (node, attributeAccessor) {
+    var data = node.data;
+    if (data.css) {
+        data.props = data.props || {};
+        var styleClass = typestyle_1.style(data.css);
+        var oldClassName = data.props.className || '';
+        var newClassName = (oldClassName + " " + styleClass).trim();
+        attributeAccessor('class', newClassName);
+    }
+};

src/client.ts

@@ -0,0 +1,17 @@
+import { Module } from 'snabbdom/modules/module';
+import { VNode } from 'snabbdom/vnode';
+import { updateVNode } from './utils';
+
+const updateDOM = (oldNode: VNode, newNode: VNode): void => {
+  if (newNode.elm) {
+    const elm: Element = newNode.elm as Element;
+    updateVNode(newNode, (name, value) => elm.setAttribute(name, value));
+  }
+};
+
+export const cssModule = {
+  create: updateDOM,
+  update: updateDOM,
+} as Module;
+
+export default cssModule;

src/server.ts

@@ -0,0 +1,29 @@
+import { VNode } from 'snabbdom/vnode';
+import { createTypeStyle, getStyles, style } from 'typestyle';
+import { TypeStyle } from 'typestyle/lib/internal/typestyle';
+
+import { StyledVNodeData } from './types';
+import { isVNode, updateVNode } from './utils';
+
+export const serverSideCssModule = (node: VNode, attributes: Map<string, number | string>): void =>
+  updateVNode(node, (name, value) => attributes.set(name, value));
+
+export const collectStyles = (node: VNode): string => {
+  const instance = createTypeStyle();
+  traverseVNode(node, instance);
+  return instance.getStyles();
+};
+
+const traverseVNode = (node: string | VNode, instance: TypeStyle) => {
+  if (isVNode(node)) {
+    const data: StyledVNodeData = node.data as StyledVNodeData;
+
+    if (data.css) {
+      instance.style(data.css);
+    }
+
+    if (node.children) {
+      node.children.forEach((child) => traverseVNode(child, instance));
+    }
+  }
+};

src/snabbdom-typestyle.ts

@@ -0,0 +1,6 @@
+import cssModule from './client';
+
+export * from './types';
+export * from './server';
+
+export default cssModule;

src/types.ts

@@ -0,0 +1,8 @@
+import { VNodeData } from 'snabbdom/vnode';
+import { types } from 'typestyle';
+
+export interface StyledVNodeData extends VNodeData {
+  css?: types.NestedCSSProperties;
+}
+
+export type Style = types.NestedCSSProperties;

src/utils.ts

@@ -0,0 +1,22 @@
+import { VNode } from 'snabbdom/vnode';
+import { style } from 'typestyle';
+
+import { StyledVNodeData } from './types';
+
+export const isVNode = (vNode: string | VNode): vNode is VNode => {
+  return (vNode as string).length === undefined;
+};
+
+export const updateVNode = (node: VNode, attributeAccessor: (attribute: string, className: string) => void): void => {
+  const data: StyledVNodeData = node.data as StyledVNodeData;
+
+  if (data.css) {
+    data.props = data.props || {};
+
+    const styleClass = style(data.css);
+    const oldClassName = data.props.className || '';
+    const newClassName = `${oldClassName} ${styleClass}`.trim();
+
+    attributeAccessor('class', newClassName);
+  }
+};

tsconfig.json

@@ -11,6 +11,6 @@
     ]
   },
   "files": [
-    "src/css.ts"
+    "src/snabbdom-typestyle.ts"
   ]
 }