Add `stylable-require` property on Component Model

src/dom_components/model/Component.js

@@ -39,6 +39,9 @@ module.exports = Backbone.Model.extend(Styleable).extend({
     // All other properties will be hidden from the style manager
     stylable: true,
 
+    // Indicate an array of style properties to show up which has been marked as `toRequire`
+    'stylable-require': '',
+
     // Indicate an array of style properties which should be hidden from the style manager
     unstylable: '',
 

src/style_manager/model/Property.js

@@ -12,6 +12,13 @@ module.exports = require('backbone').Model.extend({
     status: '',
     visible: true,
     fixedValues: ['initial', 'inherit'],
+
+    // If true, will be hidden by default and will show up only for targets
+    // which require this property (via `stylable-require`)
+    // Use case:
+    // you can add all SVG CSS properties with toRequire as true
+    // and then require them on SVG Components
+    toRequire: 0,
   },
 
 

src/style_manager/view/PropertyView.js

@@ -375,9 +375,15 @@ module.exports = Backbone.View.extend({
    * @return {Boolean}
    */
   isTargetStylable(target) {
+    if (this.model.get('id') == 'flex-width') {
+      //debugger;
+    }
     const trg = target || this.getTarget();
-    const property = this.model.get('property');
+    const model = this.model;
+    const property = model.get('property');
+    const toRequire = model.get('toRequire');
     const unstylable = trg.get('unstylable');
+    const stylableReq = trg.get('stylable-require');
     let stylable = trg.get('stylable');
 
     // Stylable could also be an array indicating with which property
@@ -391,6 +397,11 @@ module.exports = Backbone.View.extend({
       stylable = unstylable.indexOf(property) < 0;
     }
 
+    // Check if the property is available only if requested
+    if (toRequire) {
+      stylable = (stylableReq && stylableReq.indexOf(property) >= 0) || !target;
+    }
+
     return stylable;
   },