feat: add static decorator dynamic CSS

streamich · Mar 15, 2018 · 5ef8a08 · 5ef8a08
1 parent 381d4fd
commit 5ef8a08
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/.storybook/decorator.stories.tsx b/.storybook/decorator.stories.tsx
@@ -45,6 +45,23 @@ class Static extends Component<any, any> {
   }
 }
 
+@css
+class Static2 extends Component<any, any> {
+  static css = {
+    border: '1px dashed blue',
+  };
+
+  css () {
+    return {
+      color: this.props.color
+    };
+  }
+
+  render () {
+    return <div>Hello there</div>;
+  }
+}
+
 storiesOf('@css decorator', module)
   .add('Default', () =>
     <CssTest />
@@ -55,3 +72,6 @@ storiesOf('@css decorator', module)
   .add('Static decorator', () =>
     <Static />
   )
+  .add('Static dynamic styles', () =>
+    <Static2 color='blue' />
+  )
diff --git a/addon/decorator.js b/addon/decorator.js
@@ -15,6 +15,13 @@ exports.addon = function (renderer) {
         if (isComponent) {
             if (a.css) transformComponentStatic(renderer, a.prototype, a.css);
 
+            var componentWillMount_ = a.prototype.componentWillMount;
+
+            a.prototype.componentWillMount = function () {
+                if (this.css) transformComponentDynamic(renderer, a, this.css.bind(this));
+                if (componentWillMount_) componentWillMount_.apply(this);
+            };
+
             return a;
         }