[jss-isolate] Option for isolation like in shadow dom.

[kof]

We can achieve this by defining a default rule name, which will be reset. We can still use inheritance within one component, but it won't spread down to nested components.

We can achieve this by adding an isolate option to the plugin creator.

• jss.use(isolate({isolate: true}) is the current behavior, isolates all rules if you don't set isolate: false on a sheet or on a rule
• jss.use(isolate({isolate: false}) will not isolate any rule by default, to isolate you will need to set isolate: true on a sheet or on the rule.
• jss.use(isolate({isolate: 'root'}) - will isolate automatically only rules with name "root" or any other name you want to use. This is identical to shadow dom behavior. This allows children in this component to inherit inheritable values, but components which have own roots will be isolated, so that inheritance doesn't spread to all children.

[kof]

thanks @giuseppeg for the input!

[kof]

cc @maximkoretskiy

[giuseppeg]

FYI there is a list of [inherited] properties for CSS2.1 on the W3C site. You'd need to add the missing CSS3/4 ones – there is a list on StackOverflow but I haven't validated it yet.

[kof]

Done, check it out https://github.com/cssinjs/jss-isolate (not published)