Implement variants in Stylesheet

vovkasm · Dec 17, 2016 · ba7e650 · ba7e650
1 parent e6df6ed
commit ba7e650
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/src/stylesheet.js b/src/stylesheet.js
@@ -160,11 +160,17 @@ class Stylesheet {
     }
     this.rules[key].sort(ruleComparator)
   }
-  getProps (context, ownProps) {
+  getProps (context, ownProps, variants) {
     const props = shallowClone(ownProps)
 
     const ctx = parseContext(context)
     const rules = []
+    if (variants !== undefined && Array.isArray(variants)) {
+      for (let i = 0; i < variants.length; ++i) {
+        const variant = variants[i]
+        this.collectRules(rules, makeRuleCtx(ctx.name + '.' + variant, ctx.rest))
+      }
+    }
     this.collectRules(rules, ctx)
     mergeRules(props, rules)
     return props

diff --git a/test/stylesheets.spec.js b/test/stylesheets.spec.js
@@ -152,4 +152,20 @@ describe('Stylesheet', function () {
       })
     })
   })
+  describe('variants', function () {
+    beforeEach(function () {
+      s.addDefaultRules({
+        'Header': {style: {fontSize: 10}},
+        'Header.active': {style: {fontWeight: 'bold'}}
+      })
+    })
+    it('follow variants', function () {
+      expect(s.getProps('App Header', {}, ['active'])).to.be.deep.equal({
+        style: {fontSize: 10, fontWeight: 'bold'}
+      })
+      expect(s.getProps('App Header', {}, [])).to.be.deep.equal({
+        style: {fontSize: 10}
+      })
+    })
+  })
 })